반응형
01. React
- 페이스북이 개발한 프론트엔드를 위한 오픈소스 JavaScript 라이브러리
- 대규모 웹 서비스의 UI를 더 편하게 개발하기 위해 만들어진 기술
- 특징 : 컴포넌트를 기반으로 UI 표현, 화면 업데이트 구현이 쉽고 빠르게 처리됨
02. React의 특징
01) 컴포넌트를 기반으로 UI 표현
- 컴포넌트 : 화면을 구성하는 요소, UI를 구성하는 요소
- 리액트는 각각의 영역들을 분리해서 컴포넌트 단위로 나눠서 모듈화할 수 있음
- 웹페이지를 레고 조립하듯이 여러 개의 컴포넌트들을 합쳐서 만들어낼 수 있음
- 중복 코드가 없고 유지보수가 용이함
02) 화면 업데이트 구현이 쉬움
- 업데이트 : 사용자의 행동에 따라 웹페이지가 바뀌는 모든 기능
- 선언형 프로그래밍으로 동작으로 목적만 명시하기 때문에 코드가 간결하고 업데이트를 쉽게 할 수 있음
- 각각의 컴포넌트는 상태를 저장하는 'State'의 값이 바뀌면 바뀐 값에 따라 각각 다른 UI를 화면에 렌더링 할 수 있음
(렌더링 : 웹페이지 화면에 UI 요소를 그려내는 것) - 화면에 업데이트가 필요할 때 State 값을 바꾸어 렌더링하면 됨
💡 선언형 프로그래밍 VS 명령형 프로그래밍
더보기
🖥️선언형 프로그래밍
- 불필요한 과정은 생략하고 목적만 간결히 명시하는 방식
- ex) 파스타 하나 주문
- 업데이트를 위한 복잡한 동작을 직접 정의할 필요 없이 특정 변수의 값을 바꾸는 것만으로 화면을 업데이트 시킬 수 있음
🖥️ 명령형 프로그래밍
- 목적을 이루기 위한 모든 일련의 과정을 설명하는 방식
- ex) 주방에서 100g의 면을 꺼내기, 뜨거운 물에 9분간 삶기 등
03) 화면 업데이트가 빠르게 처리됨
- 브라우저는 HTML과 CSS로 작성한 웹페이지를 여러 단계의 과정을 거쳐서 화면에 렌더링 시켜줌
ⓛ HTML과 CSS를 각각 DOM과 CSSOM으로 변환
② 웹 페이지의 설계도인 렌더 트리를 만듦 (화면의 렌더링 되어야 하는 모든 정보가 포함됨)
③ Layout : 렌더트리에 포함되어 있는 요소들의 위치를 배치를 잡는 작업
④ Painting : 실제로 화면에 그려내는 과정
📌 업데이트 할 때 (DOM이 수정될 때) 📌
- 업데이트 될 때는 Critical Redering Path의 전체 단계를 진행 : Render Tree → Layout → Painting
- reflow와 repaint는 오래 걸리는 과정 ( reflow : 레이아웃 다시 진행, repaint : 페인팅 다시 진행 )
✅ 자바 스크립트에서의 DOM 수정
- 동시에 발생한 업데이트를 모아 한번에 수정하여 DOM의 수정 횟수를 최소화해야 함
- DOM 수정 횟수가 늘어날수록 성능 악화가 일어남
- 복잡하고 대규모의 서비스일 경우 업데이트 수정 횟수를 줄이는 것이 어려움
✅ 리액트에서의 DOM 수정
- 리액트는 가상의 돔인 Virtual DOM이 DOM 수정 횟수 최소화를 자동으로 해줌
- Virtual DOM : DOM을 자바스크립트 객체로 흉내낸 일종의 복제판
- 업데이트가 발생하면 JavaScript 객체인 Virtual DOM을 먼저 수정하고 업데이트들이 모이면 한 번에 DOM에 반영을 해줌
- 그래서 최소한의 횟수로 DOM이 수정될 수 있음
참고자료
이정환 Winterlood, '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지'
반응형
댓글