[React] 리액트를 다루는 기술 1장 - 리액트 시작

1. 왜 리액트인가?

 

리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 유용

대부분 프레임워크들은 구조가 MVC, MVW이지만, 리액트는 View만 신경 쓰는 라이브러리

 

👉 컴포넌트

리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체

 

👉 렌더링

사용자 화면에 뷰를 보여주는 것

 

# 초기 렌더링

render() 함수 활용 > 컴포넌트를 정의하는 역할

뷰가 어떻게 생겼고, 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환함

render() 함수 실행 시 내부 컴포넌트들도 재귀적으로 렌더링

 

초기 렌더링 과정

최상위 컴포넌트 렌더링 > 정보들을 사용해 HTML 마크업 생성 > DOM 요소 안에 주입

 

2. 리액트 특징

 

👉 DOM(Document Object Model)

객체로 문서 구조를 표현하는 방법

웹 브라우저는 DOM을 활용해 객체에 JS와 CSS 적용! 트리 형태이기 때문에 수정/제거/삽입 용이 

 

DOM 자체는 빠르지만 변화가 일어날 경우 웹 브라우저가 CSS 다시 연산하고, 레이아웃 구성, 페이지 리페인트하는 데 시간이 오래 걸림

> DOM을 최소한으로 조작해 작업 처리 시 개선 가능

 

👉 Virtual DOM 

1. 데이터 업데이트 시 전체 UI를 Virtual DOM에 리렌더링

2. 이전 Virtual DOM에 있던 내용과 현재 내용 비교

3. 바뀐 부분을 실제 DOM에 적용

 

🔔 Virtual DOM과 리액트는 업데이트 처리 간결성을 개선할 수 있기 때문에, 어떨 때는 사용한다 == 무조건 빨라진다! 는 아님

 

3. 작업 환경 설정

 

👉 npm

Node.js 패키지 매니저 도구

 

👉 yarn

npm과 마찬가지로 패키지 관리자 도구

npm보다 빠른 속도를 가졌으며 효율적인 캐시 시스템과 부가 기능 제공