리액트의 리렌더링 방식

💡 리액트의 리렌더링

💡 React는 상태(state)가 변경되면 컴포넌트가 다시 렌더링됨 (리렌더링)

❗ React는 컴포넌트 기반 UI 라이브러리

❗ 상태는 컴포넌트 내에서 관리되는 데이터

❗ 상태가 변경되면 React는 해당 컴포넌트만 다시 렌더링하여 UI를 업데이트

🔍 상태 변경 후 렌더링 과정

React에서 상태가 변경되면 다음의 일련의 과정을 거쳐 UI가 업데이트됨

1. 상태 변경 (setState 호출)

   상태는 useState와 같은 훅을 통해 관리되며, 상태가 변경되면 React는 이를 감지

   const [count, setCount] = useState(0);
   
   return (
     <div>
       <p>{count}</p>
       <button onClick={() => setCount(count + 1)}>Increment</button>
     </div>
   );

2. 렌더링 준비

   상태가 변경되면 React는 해당 컴포넌트를 다시 렌더링하기 위한 준비 시작

   실제 DOM을 변경하기 전에 가상 DOM에서 먼저 변경을 감지함

3. 가상 DOM 업데이트

   React는 컴포넌트를 렌더링하여 새로운 가상 DOM 트리를 생성

   이 가상 DOM은 이전 렌더링 결과와 비교하여 변경된 부분을 찾음

   가상 DOM 정리

4. 변경된 부분만 실제 DOM에 반영

   가상 DOM을 비교한 후, 변경된 부분만 실제 DOM에 반영하는 효율적인 업데이트가 이루어짐

   이를 통해 성능이 최적화

✅ 컴포넌트가 리렌더링되는 조건

상태값이 변경되었을 때 리렌더링 발생

일반적으로, 아래 세 가지 경우에서 주로 리렌더링 발생

• 내부 상태값이 변경된 경우 (useState 등을 통한 상태값 변경시)
• 중앙 상태값이 변경된 경우 (Redux 등을 통한 상태값 변경시)
• props의 값이 변경된 경우
• 상위 컴포넌트가 재렌더링된 경우

---

참고

https://ko.legacy.reactjs.org/docs/rendering-elements.html
https://velog.io/@badahertz52/react-rendering-과-state-변경감지