[React] 리액트란 ?

1-1. 리액트 이해

• 리액트는 자바스크립트 라이브러리
• 구조가 MVC, MVW 등인 프레임워크와 달리, 오직 V(View)만 신경 쓰는 라이브러리
• 컴포넌트 : 리액트 내 특정 부분이 어떻게 생길지 정하는 선언체
• 컴포넌트는 재사용이 가능한 API로 수많은 기능들을 내장
• 컴포넌트 하나에서 컴포넌트의 생김새와 작동 방식 정의
• 사용자 화면에 뷰를 보여주는 것을 렌더링이라고 함.

1-2. 초기 렌더링

• render함수 → render() { . . .}
  • 컴포넌트가 어떻게 생겼는지 정의하는 역할을 함.
  • 객체 반환
  • 컴포넌트 내부에 또 다른 컴포넌트들이 들어갈 수 있다.
  • 이때 render 함수를 실행하면 그 내부에 있는 컴포넌트들도 재귀적으로 렌더링함.
  • 최상위 컴포넌트의 렌더링 작업이 끝나면, HTML 마크업을 만들고, 이를 실제 페이지의 DOM요소 안에 주입.

1-3. 조화 과정

• 리액트 라이브러리에서 업데이트를 어떻게 진행하는가
  • “업데이트 과정을 거친다.” → “조화 과정을 거친다.”가 더 정확한 표현.
  • 변화에 따라 뷰가 변형되는 것처럼 보이지만, 새로운 요소로 갈아끼우는 것.
  • 이 작업 또한 render 함수가 맡아서 함.
  • 컴포넌트는 데이터를 업데이트했을 때 단순히 업데이트한 값을 수정하는 것이 아니라, 새로운 데이터를 가지고 render 함수를 또 다시 호출함.
  • 이때 render 함수가 반환하는 결과를 곧바로 DOM에 반영하지 않고, 이전에 render 함수가 만들었던 컴포넌트 정보와 현재 render 함수가 만든 컴포넌트 정보를 비교함.
  • 자바스크립트를 사용해 두 가지 뷰를 최소한의 연산으로 비교한 후, 둘의 차이를 알아내 최소한의 연산으로 DOM 트리를 업데이트 함.

출처 : [길벗] "리액트를 다루는 기술" 책 저자 - 김민준