[React] 리액트

YAYEUN·2020년 4월 2일
1

리액트는 라이브러리

리액트는 개발에 필요한 모든 사항을 지원하는 솔루션이 아니다.
리액트는 다른 라이브러리와 결합돼 완전한 기능의 애플리케이션을 만드는데 사용된다.

리액트란?

자바스크립트 라이브러리로 사용자 인터페이스를 만드는데 사용한다.
오직 V(View)만 신경쓰는 라이브러리이다.

컴포넌트 (component)

특정 부분이 어떻게 생길지 정하는 선언체.
컴포넌트는 재사용이 가능한 API로 수많은 기능을 내장하고 있으며, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의한다.

렌더링 (Render)

사용자 화면에 뷰를 보여주는 것을 렌더링이라고 한다.
리액트는 데이터가 변할 때마다 새롭게 리렌더링 하면서 성능을 아끼고, 최적의 사용자 경험을 제공한다.

초기 렌더링

어떤 UI 관련 프레임워크, 라이브러리를 사용하든지 간에 맨 처음 어떻게 보일지 정하는 초기 렌더링 이 필요하다.
리액트에서는 이를 다루는 render 함수가 있다.

render() { ... }

리렌더링

컴포넌트의 데이터 변경으로 다시 실행되는 리렌더링

조화 과정

뷰를 업데이트 할 때는 ‘업데이트 과정을 거친다’ 라는 표현보다는 ‘조화 과정(reconciliation) 을 거친다’ 라는 표현이 더 적합하다.
컴포넌트에서 데이터에 변화가 있을 때 새로운 요소로 갈아 끼우기 때문이다.
이 작업을 render 함수가 맡아서 하는데, 컴포넌트는 새로운 데이터를 가지고 render 함수를 다시 호출하는 방식이다.
render 함수가 반환하는 결과를 바로 DOM에 반영하는 것이 아니라
이전에 render 함수가 만들었던 컴포넌트 정보와 현재 render 함수가 만든 컴포넌트 정보를 비교한 후 차이를 알아내 DOM 트리에 업데이트한다.

profile
yayeun

0개의 댓글