이번포스팅에서는 리액트 시작전 짚고 넘어갈 것들을 정리해보았습니다.
- 리액트는 MVC 모델중 View 만 신경쓰는 라이브러리이다.
- 리액트는 웹페이지를 컴포넌트 단위로 분류한다.
- 리액트가 사용자의 화면에 View 보여주는 행위를 렌더링이라고한다.
- 리액트의 컴포넌트를 화변에 반영해주는 render 함수 render(){...}
- html 문자열을 반환하는게 아닌 view가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를지닌 객체를 반환
- 컴포넌트 안에 컴포넌트 가능 render 함수는 컴포넌트 안에 컴포넌트들까지 모두 렌더링함 (재귀렌더링)
- 최상위 컴포넌트의 렌더링이 끝나면 HTML로 변환하여 DOM에 주입함
리액트 Vitrual DOM
Vitual DOM 을 보기전에 DOM부터 알아봅시다.
DOM : Document object model
DOM은 동적 UI에 최적화되어있지 않습니다. HTML은 근본적으로 정적이기 때문이구요, 웹브라우저에서 화면에 변화가 생기면 CSS, 레이아웃구성, 페이지 리페인트 등 브라우저가 연산할게 많아지면서 성능 이슈가 생깁니다.
Virtual DOM
리액트에서 View를 업데이트할 때는 "조화과정"을 거친다고 합니다
render 함수가 이전화면과 변경된 화면을 비교하고 변경된 부분만 view에 업데이트 합니다.
- 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링합니다.
- 이전 Virtual DOM의 내용과 비교합니다.
- 변화된 부분만 실제 DOM에 적용합니다.
리액트를 사용한다고 무조건 다른 기술스택보다 빠른것은 아닙니다. 페이스북 개발팀이 아래와 같은 이유로 만들었다고합니다.
지속적으로 데이터가 변화하는 대규모 애플리케이션구축
작은규모의 정적인 웹은 리액트를 사용하지 않는게 성능에 이로울 수 있습니다.
작업환경설정
리액트 시작전 반드시 node.js 설치 ( 개발시 필요한 도구들 사용을 위해 ) 설치가 완료되면 패키지 매니저인 npm이 설치됩니다.
node.js 설치주소
https://nodejs.org/ko/download
Front End