(React) 리액트란?

서론

요즘 프론트엔드 공부하면서 React를 배우고 있는데, 처음엔 그냥 "웹 만드는 라이브러리구나~" 정도로만 생각했음

근데 쓰다보니까 일반 HTML/CSS/JS로 만드는 것과 확실히 다른 느낌이 들더라고 특히 버튼 클릭하면 화면이 바뀌는 거 만들 때 코드가 훨씬 깔끔해지는 게 신기했음

그래서 React가 정확히 뭔지, 왜 다들 쓰는 건지 궁금해서 찾아봤음

---

본론

React는 페이스북(지금은 Meta)에서 만든 UI를 만들기 위한 JavaScript 라이브러리임

쉽게 말하면 웹 페이지의 화면을 더 편하게 만들 수 있게 도와주는 도구라고 보면 됨

React의 핵심 특징

1. 컴포넌트 기반

화면을 레고 블록처럼 작은 조각(컴포넌트)으로 나눠서 만들 수 있음

• 버튼, 헤더, 카드 같은 걸 각각 컴포넌트로 만들어서 조립하는 느낌
• 코드를 모듈화해서 관리하기 쉬워짐
• 각 컴포넌트가 독립적이라 수정도 편함

function Button() {
  return <button>클릭!</button>;
}

function App() {
  return (
    <div>
      <h1>안녕하세요</h1>
      <Button />
      <Button />
    </div>
  );
}

2. 상태 관리가 쉬움

버튼 클릭하면 숫자가 올라가는 것처럼, 데이터가 바뀌면 화면도 자동으로 업데이트됨.

• 일반 JS로 하면 document.getElementById 같은 거 써서 직접 DOM을 건드려야 함
• React는 상태(state)만 바꾸면 알아서 화면이 바뀜
• 코드가 훨씬 직관적이고 간결해짐

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>클릭 횟수: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        증가
      </button>
    </div>
  );
}

3. 재사용성 상승

한 번 만든 컴포넌트를 여러 곳에서 재사용할 수 있음

• 같은 디자인의 버튼을 10개 만들어야 한다면? 컴포넌트 하나만 만들고 10번 불러오면 됨
• 코드 중복이 줄어들어서 유지보수가 편해짐
• 효율 상승

---

결론

React를 쓰면 복잡한 웹 페이지도 컴포넌트 단위로 나눠서 관리할 수 있고 상태 관리도 편해서 개발 속도가 빨라짐

처음엔 JSX 문법이랑 컴포넌트 개념이 낯설 수 있는데, 익숙해지면 일반 JS보다 훨씬 편함

특히 규모가 큰 프로젝트일수록 React의 장점이 더 부각되는 것 같음

앞으로 더 깊이 공부해봐야겠음!