컴포넌트 리렌더링과 분할의 중요성

React에서 컴포넌트 리렌더링과 분할의 중요성

---

React에서는 효율적인 UI 업데이트를 위해 컴포넌트의 리렌더링이 중요한 역할을 한다.
리렌더링의 조건과 React에서 컴포넌트를 나누는 이유에 대해 알아보자.

리렌더링 조건 3가지

---

리렌더링은 컴포넌트 함수가 재실행되는 것을 의미한다.
리렌더링이 발생하는 주요조건은 다음과 같다.

1. 상태(state)가 변경되면 컴포넌트 리렌더링

---

React 컴포넌트 내부의 상태가 변경되면 해당 컴포넌트는 리렌더링된다.

const [count, setCount] = useState(0);

const increment = () => {
  setCount(count + 1); // 상태 변경 -> 리렌더링 발생
};

2. 부모 컴포넌트로부터 전달받는 props의 값이 변경되면 리렌더링

---

부모 컴포넌트에서 자식 컴포넌트로 전달되는 props가 변경되면, 자식 컴포넌트는 리렌더링된다.

const Parent = () => {
  const [parentState, setParentState] = useState(0);

  return <Child value={parentState} />;
};

const Child = ({ value }) => {
  return <div>{value}</div>;
};

3. 부모 컴포넌트가 리렌더링되면 자식 컴포넌트도 리렌더링

---

부모 컴포넌트가 리렌더링되면, 그 자식 컴포넌트도 리렌더링된다.
하지만 이를 방지하기 위해 React.memo를 사용할 수 있다.

const Child = React.memo(({ value }) => {
  return <div>{value}</div>;
});

const Parent = () => {
  const [parentState, setParentState] = useState(0);

  return <Child value={parentState} />;
};

React.memo는 부모 컴포넌트가 리렌더링되어도 자식 컴포넌트를 리렌더링하지 않게 해주지만,
props 값이 바뀌면 여전히 리렌더링된다.

컴포넌트를 나누는 이유

---

컴포넌트를 나누는 것은 React 설계에 있어 중요한 부분이다.
컴포넌트를 나누는 주요 이유는 다음과 같다.

1. 재사용성

---

잘 나뉜 컴포넌트는 다른 곳에서도 재사용이 가능하다. 이를 통해 코드 중복을 줄이고,
유지보수를 용이하게 한다.

const Button = ({ onClick, children }) => {
  return <button onClick={onClick}>{children}</button>;
};

const App = () => {
  return (
    <div>
      <Button onClick={() => alert('Clicked!')}>Click Me</Button>
    </div>
  );
};

2. 가독성

---

큰 컴포넌트를 작은 컴포넌트로 나누면 코드의 가독성이 향상된다.
이는 개발자들이 코드를 이해하고 수정하는 데 큰 도움이 된다.

const Header = () => {
  return <h1>Header</h1>;
};

const Content = () => {
  return <p>Content goes here</p>;
};

const Footer = () => {
  return <footer>Footer</footer>;
};

const App = () => {
  return (
    <div>
      <Header />
      <Content />
      <Footer />
    </div>
  );
};

3. 상태 관리

---

컴포넌트를 나눔으로써, 상태를 필요한곳에만 위치시킬 수 있다.
이는 불필요한 리렌더링을 방지하고, 상태 관리를 쉽게 만들어 준다.

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

const App = () => {
  return (
    <div>
      <Counter />
    </div>
  );
};

결론

---

React에서 컴포넌트의 리렌더링 조건과 컴포넌트를 나누는 이유에 대해 알아보았다.
효율적인 리렌더링 제어와 컴포넌트 분할을 통해 애플리케이션의 성능과 가독성을 높일 수 있다.
이를 통해 보다 유지보수하기 쉬운 코드 베이스를 구축할 수 있다.