⚛️ 리액트가 작동하는 방식

• 리액트는 오로지 컴포넌트만 신경씀, 리액트 DOM은 웹의 interface를 뜻함.
• 리액트는 컴포넌트의 변경 전후의 상태를 확인하는 라이브러리. 리액트 DOM의 역할엔 관여하지 않음.
• 리액트 DOM은 브라우저의 일부인 실제 DOM에 대한 작업을 하므로, 사용자가 보고있는 화면에 무언가를 표시하는 역할을 함.
• 리액트는 컴포넌트가 화면에 새로운것을 표시하는지 확인하고, 이를 리액트 DOM에게 알려 새로운 화면과 새로운 컴포넌트, 새 출력을 표시해줌.
• 리액트는 컴포넌트 트리를 통해 구성한 가상 DOM이라는 개념을 사용하는데, 가상 DOM은 앱이 마지막에 만들어내는 컴포넌트 트리를 결정하는데 사용하며, 컴포넌트 트리의 현재 모양과 최종 모양을 결정함.
• 🔥 컴포넌트의 재평가는 DOM을 다시 렌더링 하는 것이 아님!
• 리액트가 구성한 컴포넌트의 이전 상태와 트리, 그리고 현재의 상태간의 차이점을 기반으로 변경이 필요할 때만 업데이트 된다. 즉, 실제 DOM은 필요한 경우에만 변경됨.
• 리액트는 가상 DOM과의 비교를 통해 최종 스냅샷과 현재의 스냅샷을 실제 DOM에 전달하는 구조를 갖음.
• 리액트 DOM은 전체 DOM을 재렌더링 하지 않음!

● 예제

👾 Parent.js

const [isShow, setIsShow] = useState(false);

const clickHandler = ()=>{
  // toggle
  setIsShow( prev => !prev );
}
return(
  // isShow가 아닌 false로 값을 고정시킴!!!
  <Child show={false}/>
  <button onclick={clickHandler}>toggle Btn</button>
);

👾 Child.js

const Child = (props)=>{
return(
  {props.show && <p>show!!</p>}
);
}

👉🏻 토글 버튼을 클릭하면 isShow state의 값은 변경되어 Parent컴포넌트는 재평가가 됨! 이때 Child컴포넌트도 재평가가 되는데 이유는 state값이 변경되어서가 아니라 Parent컴포넌트가 재평가 되면서 jsx를 return하기 때문에 Child컴포넌트도 재평가가 되는것이다!! 이때 DOM은 렌더링 되지 않음!!!
🔥 컴포넌트의 재평가는 DOM을 다시 렌더링 하는 것이 아님!

💡 결론

리액트는 컴포넌트만 신경을 쓰며, 이전 가상 DOM과 현재 가상 DOM을 비교하여 변경된 사항만 리액트 DOM에게 알린다. 변경된 사항을 리액트 DOM이 실제 DOM을 업데이트 함.

[참고] Udemy - React 완벽 가이드 with Redux, Next.js, TypeScript