리액트 작동 원리(1)

리액트가 어떻게 작동하는가?

< React 정의 >

React는 유저 인터페이스를 만들기 위한 JavaScript 라이브러리이다.
React는 Component로 유저 인터페이스를 만들고, Component를 활용하여 유저 인터페이스를 효율적으로 구축하고 업데이트 한다.

- React는 어떻게 되어 있나..?

React는 Component를 관리하는 라이브러리로
Component를 관리하고 Component의 현재 state와 이전의 state의 차이점을 찾아낼 수 있다.
React가 다루는 데이터로는 Component에 영향을 미치는 Props, State, Context 이다.

 

 

React가 Component를 관리하는 과정을 보면 (예시),

1. React는 데이터(props, state, context)에서 변경된 내용을 바탕으로 화면에 어떻게 나타낼 지 정한다.
2. 정한 내용을 인터페이스(ReactDOM을 예시로..)에 보낸다.
3. ReactDOM이 새로운 화면에 컴포넌트를 화면에 띄운다.

그렇다면...realDOM에 component가 영향을 미치는 걸까?!!

- realDOM과 virtualDOM의 관계

React는 virtualDOM을 사용하는데, virtualDOM은 'component tree'를 결정한다.

virtualDOM은 트리의 현재 모양과 최종 모양을 정하고 state를 업데이트 한다.
이러한 정보를 realDOM에 전달하여 realDOM은 차이점을 파악하고 realDOM과 virtudalDOM을 맞추기 위해 realDOM을 조작한다.

- Re-Evaluating Components !== Re-Rendering the Dom

---

정리를 하면서도..맞는지 잘 모르겠다 🥲
이해는 되는데 설명을 잘 못하겠는 느낌..

 

참고자료 : udemy강의
내가 보려고 걸어둔 글 : Introduction to React : Real DOM & Virtual DOM