React의 기술적인 특징
- 컴포넌트를 기반으로 UI를 표현한다.
- 화면 업데이트 구현이 쉽다.
- 화면 업데이트가 빠르게 처리된다.
컴포넌트(Component) 란?
- 컴포넌트 = 구성요소 > 화면을 구성하는 요소, UI를 구성하는 요소
리액트에서는 페이지의 모든 요소들을 "컴포넌트"의 단위로 모듈화해서 개발하기 때문에
여러 페이지에서 공통으로 사용하는 요소들의 유지보수가 쉽다.
선언형 프로그래밍 / 명령형 프로그래밍
- 선언형 프로그래밍 : 과정은 생략하고 목적만 간결히 명시하는 방법 (React 활용 구현)
- 명령형 프로그래밍 : 목적을 이루기 위한 모든 일련의 과정을 설명하는 방법 (Javascript 만으로 구현)
리액트에서는 각 컴포넌트의 상태를 저장하는 State라는 특수한 변수를 저장할 수 있다.
State 값이 바뀌면 즉각 렌더링을 해주기 때문에
State의 값만 바꿔주면 업데이트를 구현할 수 있다.
즉, 리액트에서는 특정 변수(State)의 값을 바꾸는 것만으로 화면을 업데이트 시킬 수 있다. (업데이트의 간편성)
화면 업데이트의 최적화 - VirtualDOM (React 핵심 기능)
브라우저의 렌더링 과정과 관련이 있음.
브라우저의 렌더링 과정 (CRP, Critical Rendering Path)
CRP, Critical Rendering Path (브라우저 렌더링 과정)HTML > DOMHTML 문서를 일종의 객체 모델 (Object Model)로 알기 쉽게 변환하는 과정 HTML (Hyper Text Markup Language) - 하이퍼 텍스트 마크업 언어 웹 페이지의 구
jongstechblog.tistory.com
- DOM 구조를 javascript 객체로 흉내낸 것, 일종의 복제판
- React는 업데이트가 발생하면 실제 DOM 수정 전 가상의 DOM**(Virtual Dom)**에 먼저 반영한다.
(쉽게 말하면 원본파일의 복사본을 만들어, 복사본을 수정한 후 원본파일에 덮어쓰기 하는것.)
원본 출처: 인프런 - [2024] 한입 크기로 잘라먹는 리액트(React.js) : 기초부터 실전까지 (이정환 - Winterlood)
'React' 카테고리의 다른 글
| React : UseEffect (0) | 2024.12.28 |
|---|---|
| React : React Hooks (0) | 2024.12.28 |
| React : UseState (1) | 2024.12.26 |