-
리액트 (React)
- 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용
- 오직 View만 신경 쓰는 라이브러리
컴포넌트 (Component)
- 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체
- 재사용이 가능한 API
- 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의
렌더링
- 사용자 화면에 뷰를 보여주는 것
초기 렌더링
- 맨 처음 어떻게 보일 지를 정하는 초기 렌더링이 필요
render() { ... }
- 컴포넌트가 어떻게 생겼는지 정의
- 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환
- 컴포넌트 내부에 또 다른 컴포넌트 삽입 가능
- render 함수를 실행하면 그 내부에 있는 컴포넌트들도 재귀적으로 렌더링 함
- 렌더링 작업이 끝나면 지니고 있는 정보들을 사용하여 HTML 마크업을 만들고, 우리가 정하는 실제 페이지의 DOM
요소 안에 주입
조화 과정
- 리액트에서 뷰를 업데이트 할 때는 "업데이트 과정을 거친다" 보다는 "조화 과정을 거친다" 라고 함
- 컴포넌트는 데이터를 업데이트했을 때 새로운 데이터를 가지고 render 함수를 또다시 호출
- 하지만 render 함수가 반환하는 결과를 바로 DOM에 반영하지 않고, 이전에 render 함수가 만들었던 컴포넌트 정보와 현재 render 함수가 만든 컴포넌트 정보를 비교