노마드 코더 강의를 수강하면서 알게된 내용을 정리하고 복습하기 위한 게시글이다.
강의 내용에 돌입하기전에 웹 페이지를 개발하면서 리액트의 정의와 특징, 장점이 무엇인지 정리해보려한다.
React?
리액트는 페이스북에서 제공하는 자바스크립트 라이브러리로, 사용자와 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여준다.
React의 특징
1. Virtual DOM (가상돔) 기반
리액트는 가상돔을 기반으로 성능을 최적화하여 UI를 빠르게 렌더링한다. 이를 이해하기 위해서는 우선 HTML과 CSS가 렌더링 되는 과정을 이해할 필요가 있다.
1. DOM 트리 생성
웹 브라우저가 HTML을 전달 받으면 HTML을 파싱하여 메모리 상에 DOM 객체들(DOM Node)로 이루어진 DOM 트리를 생성한다.
2. 스타일 규칙 생성
CSS 파일과 HTML의 요소들의 인라인 스타일을 파싱하여 스타일 정보를 가진 스타일 규칙들을 생성한다.
Attachment : 스타일 정보를 계산하고 결과값을 객체 형태로 반환함.
3. 렌더 트리 생성
앞서 생성한 DOM 트리와 스타일 규칙을 바탕으로 실제 브라우저의 화면에 렌더링하는 데 필요한 정보인 렌더 트리를 생성한다.
4. 레이아웃(-> 리플로우)
렌더 트리의 각 노드들은 스크린의 좌표가 주어지며 정확히 어디에 나타나야 할 지 위치와 크기에 대한 정보를 계산한다.
5. 페인트(-> 리페인트)
렌더 트리의 각 노드들을 실제 화면에 그리는 단계이다.
브라우저는 위와 같은 동작을 거쳐 페이지를 렌더링한다. 이때 이 계산 과정은 모두 동기적으로 동작하게 되어 렌더 트리에 새로운 노드가 추가된다면 동일한 과정을 반복하게 된다. 결국 브라우저에서 많은 연산을 하기때문에 렌더링 성능이 떨어진다.
따라서 DOM 노드를 조작하는 작업은 동적인 UI를 구성하는 것에 효율적이지 못하다. 이러한 문제점을 해결하기 위한 방도가 Virtual DOM 이다.
Virtual DOM은 실제 DOM을 모방하는 형태로 메모리 상에서만 존재하는 가상의 DOM을 말한다. DOM의 변화가 생길 경우 실제 DOM을 조작하는 것이 아닌 DOM 작업을 가상화하여 처리한 후 최종 결과를 실제 DOM에게 전달해준다.
메모리 상에서만 그려지는 DOM이기 때문에 훨씬 오버헤드가 적다는 특징이 있어, 문서의 각 요소를 효율적인 방식으로 제어가 가능해진다.
2. Component 기반
한 페이지 안에 독립된 작은 Component를 만들고 이를 조립하여 화면을 구성한다.
컴포넌트는 재사용을 할 수 있으며 이를 통해 생산성을 향상시키고 복잡한 UI도 효과적으로 구성할 수 있다.
React Component는 두 가지 방식이 있다.
- 클래스형 컴포넌트
- 함수형 컴포넌트
차이점과 특징은 다음에 알아보자
3. 단방향 데이터 바인딩
데이터 바인딩이란?
사용자 UI의 데이터와 자바스크립트 데이터를 일치 시킨다.
리액트는 단방향 데이터 바인딩을 통하여 데이터 변화가 일어났을 때 성능 저하가 없이 DOM 객체 갱신이 가능하며 데이터 흐름이 단방향이기 때문에 데이터 추적과 디버깅이 쉽다.
4. JSX
JSX는 자바스크립트에 XML을 추가 확장한 문법으로 리액트로 프로젝트를 개발할 때 사용된다. JSX 문법으로 인해 UI 작업 시 시각적으로 도움이 된다.
다음 게시글에서 상세히 다뤄보쟈
5. Props 와 State
| Props | State |
|---|---|
| - 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 데이터 | - 컴포넌트 내부에서 값을 저장하거나 변경할 수 있는 데이터 |
| - 읽기 전용 데이터 | - 동적 데이터 |
| - 자식 컴포넌트에서 전달 받은 props는 변경이 불가능하고 props를 전달해준 최상위 부모 컴포넌트만 변경할 수 있다. | - 사용자와 상호작용을 통해 데이터를 동적으로 변경할 때 사용된다. 클래스형 컴포넌트에서만 사용 가능하며 각각의 state는 독립적이다. |
JSX와 Props, State는 강의를 통해 문법적으로 익숙해지고 개념이 잡히면 더 상세하게 다룰 예정이므로 이번 게시글에서는 특징에 대해 간단히 알고 넘어가기만 해도 좋을 것 같다.
뿅
[참고]https://happycording.tistory.com/entry/React%EB%A6%AC%EC%97%91%ED%8A%B8-%EC%9E%85%EB%AC%B8-1-React%EB%9E%80-%EB%A6%AC%EC%97%91%ED%8A%B8-%ED%8A%B9%EC%A7%95
[참고]https://dev-yakuza.posstree.com/ko/react/create-react-app/react/
