🌙 [React] 리액트 시작하기
🌊 리액트 시작하기
리액트의 이해
: 리액트는 오직 V(view)만 신경 쓰는 라이브러리다. 리액트의 컴포넌트는 재사용이 가능한 API로 수많은 기능들을 내장하고 있고 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의한다.
사용자 화면에 뷰를 보여주는 것을 렌더링이라고 한다. 리액트 라이브러리는 데이터가 변할 때 마다 새롭게 리렌더링 하면서 성능을 아끼고, 최적의 사용자 경험을 제공한다.
초기 렌더링
: 어떤 UI곤련 프레임워크, 라이브러리를 사용하든 초기 렌더링이 필요하다. 리액트에서는 render 함수에 해당한다.
render(){...}
이 함수는 컴포넌트가 어떻게 생겼고, 어떻게 자동하는 지에 대한 정보를 지닌 객체를 반환한다.
렌더링 → HTML 마크업 → DOM에 주입
조화 과정
: 리액트에서 뷰를 업데이트 할 때는 조화 과정을 거친다고 얘기하는 것이 더 정확한 표현이다. 우리가 보기에는 뷰가 변형 되는 것처럼 보이지만 사실은 새로운 요소로 갈아 끼우기 때문이다.
이 작업 또한 render 함수가 맡아서 한다.
render 함수가 반환되는 결과를 곧바로 DOM에 반영하지 않고 이전 render함수가 만들었던 컴포넌트 정보와 함께 현재 만든 컴포넌트 정보를 비교하여 둘의 차이를 알아내 해당 부분의 DOM 트리를 업데이트한다.
리액트의 특징
Virtual DOM
DOM (Document Object Model) : 객체로 문서 구조를 표현하는 방법. XML이나 HTML로 작성한다. 웹 브라우저는 DOM을 활용하여 객체에 JS나 CSS를 적용한다. DOM은 트리 형태이다. DOM은 동적 UI에 최적화되어 있지 않다.
DOM 자체를 읽고 쓸 때의 성능은 JS 객체를 처리할 때의 성능과 비교하여 다르지 않다. 단 웹브라우저 단에서 DOM에 변화가 일어나면 웹 브라우저가 CSS를 다시 연산하고, 레이어를 구성하고, 페이지를 리페인트 하는 과정에서 시간이 허비되는 것이다.
리액트는 Virtual DOM 방식을 사용하여 DOM 업데이트를 추상화함으로써 DOM처리 횟수를 최소화하고 효율적으로 진행한다.
Virtual DOM은 실제 DOM의 가벼운 사본과 비슷하다.
리액트 업데이트 과정
- 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링한다.
- 이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다.
- 바뀐 부분만 실제 DOM에 적용한다.
지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하기 - 리액트 매뉴얼
리액트의 툴
yarn
: npm 대체로 사용 가능. npm과 같은 패키지 매니저. yarn은 npm의 단점을 보완한다.
- yarn은 병렬적으로 실행하여 npm보다 속도가 빠르다.
- 보안이 뛰어나다.
- 효율적인 캐시 시스템
- 기타 부가 기능 제공
리액트를 다루는 기술(개정판)을 참고하였습니다.