[React] 1-1. 리액트 이해

리액트는 구조가 MVC, MVW 등인 프레임워크와 달리 오직 V(view) 만 신경 쓰는 라이브러리이다.

 

컴포넌트: 특정 부분이 어떻게 생길지 정하는 선언체

 

초기랜더링: 어떤 UI 관련 프레임워크, 라이브러리를 사용하든지 간에 맨 처음 어떻게 보일지를 정하는 초기 렌더링이 필요하다. 

 

render() 함수는 컴포넌트가 어떻게 생겼는지 정의하는 역할을 한다. 이 함수는 html 형식의 문자열을 반환하지 않고, 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환한다. 컴포넌트 내부에는 또 다른 컴포넌트들이 들어갈 수 있다. 이 때 render 함수를 실행하면 그 내부에 잇는 컴포넌트들도 재귀적으로 렌더링한다. 이렇게 최상위 컴포넌트의 렌더링 작업이 끝나면 지니고 잇는 정보들을 사용하여 HTML 마크업을 만들고, 실제 페이지의 DOM 요소 안에 주입한다. 

 

컴포넌트는 데이터를 업데이트했을 떄 단순히 업데이트한 값을 수정하는 것이 아니라, 새로운 데이터를 가지고 render 함수를 또 다시 호출한다. 하지만 이 때 render 함수가 반호나하는 결과를 곧바로 DOM에 반영하지 않고, 이전에 render 함수가 만들었던 컴포넌트 정보와 현재 render 함수가 만든 컴포넌트 정보를 비교한다.

 

자바스크립트를 사용하여 두 가지 뷰를 최소한의 연산으로 비교한 후, 둘의 차이를 알아내 최소한의 연산으로 DOM 트리를 업데이트 한다.

 

• 출처: 리액트를 다루는 기술