[리액트] 리액트 렌더링 공부

최근에 친구가 리액트를 공부하는 것을 보고 '리액트가 뭐하는건데? 화면 만들어주는거? 어떻게 동작하는거야?'라는 질문을 한 적이 있다. 자바스크립트라는 언어로 화면을 만들어 주는 것이라고 설명하긴 했는데, 공부를 하는데 무엇을 공부를 하는지 스스로 잘 모르는 것 같은 무엇인가 찜찜한 느낌을 받아서 정리해봅니다..

리액트란?

오직 사용자 인터페이스, View를 만드는데 사용되는 자바스크립트 라이브러리이다. 프레임워크가 아니다!

리액트가 View를 만드어 주는 것을 렌더링(Rendering)한다라고 한다.

---

리액트는 어떻게 사용자 화면에 View를 만드는거지

 ReactDOM.render() 함수를 호출하면 재귀적 과정으로 Virtual DOM을 만들기 시작한다!

ReactDOM.render( element, document.getElementById('root') );

Reconciler, 재조정자는 class인지 함수인지 컴포넌트 유형을 확인한다. 컴포넌트의 유형에 따라 엘리먼트 렌더링이 처리가 조금 다르다. 

클래스형 컴포넌트는 render 함수를 통해 화면을 정의한다. 각 컴포넌트마다 render 함수를 가지고 있다. render함수는 컴포넌트가 어떻게 생겼는지(View)와 어떻게 작동하는지에 대한 Dom Node가 아닌 '객체'를 상위 컴포넌트에 반환한다.

컴포넌트

UI에서 재사용 가능하도록 나눈 조각

컴포넌트는 상위 컴포넌트에게 전달받은 Props를 활용해서 화면에 표시할 수 있는 element를 구성한다.

---

그렇다면 브라우저가 어떻게 화면에 보여줄까

브라우저의 workflow

참고자료

https://ko.reactjs.org/docs/implementation-notes.html

https://d2.naver.com/helloworld/9297403

https://velopert.com/3236

https://medium.com/humanscape-tech/react-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%83%9D%EB%AA%85%EC%A3%BC%EA%B8%B0-c7f45ef2d0be