초기 렌더링
- 어떤 UI 관련 프레임워크, 라이브러리를 사용히든지 간에 맨 처음 어떻게 보일지를 정하는 초기렌더링이 필요합니다. 리액트에서는 이를 다루는 render 힘수가 있습니다.
render() { ... }
- 이 힘수는 컴포넌트가 어떻게 생겼는지 정의하는 역할을 합니다. 이 힘수는 html 형식의 문자열을 반환하지 않고. 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환합니다. 컴포넌트 내부에는 또 다른 컴포넌트들이 들어갈 수 있습니다. 이때 render 힘수를 실행하면그 내부에 있는 컴포넌트들도 재귀적으로 렌더링합니다. 이렇게 최상위 컴포넌트의 렌더링 작업이 끝나면 지니고 있는 정보들을 사용하여 HTML 마크업을 만들고, 이를 우리가 정하는실제 페이지의 DOM 요소 안에 주입합니다.
- 컴포넌트를 실제 페이지에 렌더링할 때는 분리된 두 가지 절차를 따르는데요. 먼저 문자열 형태의HTML 코드를 생성한 후 특정 D○M에 해당 내용을 주입하면 이벤트가 적용됩니다.
조화 과정
- 리액트 라이브러리에서 중요한 부분인 업데이트를 어떻게 진행하는지 한번 알아봅시다. 우선 리액트에서 뷰를 업데이트할 때는 ‘‘업데이트 과정을 거친다”라고 하기보다는 “조화 과정을 거친다”라고 하는 것이 더 정확한 표현입니다. 컴포넌트에서 데이터에 변화가 있을 때 우리가 보기에는 변화에 따라 뷰가 변형되는 것처럼 보이지만. 사실은 새로운 요소로 갈아끼우기 때문입니다.
