[React.js] 리액트를 이해하자!

리액트 이해

리액트는 MVC, MVW 구조를 사용하는 프레임워크와는 달리, 오직 V(view)만 신경 쓴다.

React 는 어떤 데이터가 변할 때마다 어떤 변화를 줄지 고민하지않고 그냥 기존 뷰를 날려버리고 처음부터 새로 렌더링하는 방식으로 동작한다. 때문에 애플리케이션 구조가 간단하고 작성해야 할 코드양도 많이 줄어든다.

리액트의 렌더링

React는 데이터가 변할 때 마다 새롭게 리렌더링한다.

리액트의 초기 렌더링을 담당하는 render()

어떠한 UI관련 라이브러리, 프레임워크를 사용하든지 초기 렌더링이 필요한데, 이를 React 에서는 render()함수가 담당한다.

부모 컴포넌트, 자식 컴포넌트의 render()

부모 컴포넌트의 render()가 실행이 되면 자식 컴포넌트의 render()도 실행된다.

state, props와 render()의 관계

state값과 props의 값이 바뀌면 render()가 실행된다.

데이터가 변경된다기 보단 새로운 요소로 새롭게 갈아 끼운다고 생각을 하는 것이 편할 것 같다.
그리고 이 작업은 render()가 수행한다.

조화 과정

컴포넌트는 데이터를 없데이트 했을 때 단순히 업데이트한 값을 수정하는 것이 아니라 새로운 데이터를 가지고 render()를 호출한다. 그 결과 데이터를 지닌 뷰를 생성한다.

이전에 render()를 이용하여 만들었던 뷰와 현재 render()가 만든 컴포넌트 정보를 최소한의 연산으로 비교한 후 둘의 차이를 최소한의 연산으로 DOM트리를 업데이트한다.