[React] React란

공부 시작 전, 책 한번 훑어보며

궁금해서 찾아본 리액트 관련 이모저모

1. React

-  사용자 인터페이스 구축을 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리.

- 컴포넌트 단위로 UI를 구성하는 JavaScript 라이브러리.

- Facebook에서 개발하여, 2013년에 오픈 소스화.

 

1-1. State & Props

- State를 통해 컴포넌트의 상태값을 관리.

- Props를 통해 컴포넌트의 속성을 전달. 일반적인 리액트의 데이터 플로우에서 부모컴포넌트가 자식과 상호작용할 수 있는 유일한 수단.

 

1-2. Virtual DOM

(1) 사용자의 뷰에 변화가 생김.

(2) Virtual DOM에 변화를 적용시킴.

(3) 최종적인 결과물을 실제 DOM에 전달.

 -> Virtual DOM은 렌더링이 되지 않기 때문에 연산비용이 적음.

The Document Object Model(DOM)
- 웹 페이지는 일종의 문서. 웹브라우저를 통해 문서의 내용이 해석되어 화면에 나타나는 것. 
- 자바스크립트와 같은 스크립팅 언어를 통해 DOM을 수정.

 

1-3. ref

- 자식을 수정하려면 새로운 props를 전달해서 자식을 다시 렌더링하는 게 일반적은 리액트의 플로우

- 직접적으로 자식을 수정해야하는 경우에 해결책을 제공.

- React.createRef()를 통해 생성.

- 일반적으로, 컴포넌트의 인스턴스가 생성될 때 Ref를 프로퍼티로서 추가하고, 컴포넌트의 인스턴스 어느곳에서도 Ref에 접근할 수 있음.

 

1-4. Hooks

- 리액트 v16.8에 새로 도입된 기능.

- 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능.

- 함수형 컴포넌트는 클래스 컴포넌트의 장점인 state 사용이나 life cycle을 직접 다루는 등의 기능을 사용 못함. 그래서 Hooks 등장.

- 대표적 Hooks : useEffect, useState ..

side effect : 리액트 컴포넌트가 화면에 1차로 렌더링 된 이후에 비동기로 처리되어야하는 부수적인 효과들.

 

1-5. 라이프사이클

(1) 라이프사이클

 - 마운트, 업데이트, 언마운트 

 

(2) 라이프사이클 메서드

 

 

2. Next.js

- React 프레임워크

- SSR(Server Side Rendering) 지원

 

- 작동방식

(1) 처음에 서버에 페이지 접속을 요청한 경우, SSR방식으로 렌더링 될 HTML보냄. (SEO최적화 - 검색엔진 노출가능)

(2) 브라우저에서 JS를 다운받고 React 실행. (SPA)

(3) 사용자가 페이지와 상호작용을 하며 다른페이지로 이동할 경우 CSR 방식으로 브라우저에서 처리.

 

(1) SPA (Single Page Application) 
 - 필요한 정적 리소스를 최초에 한번 다운로드
 - 이후 변경이 있을 때 변경된 부분만 갱신

(2) CSR (Client Side Rendering)
- 서버에서 브라우저로 응답을 보냄.
- 브라우저에서 JS를 다운로드 받고 React 실행
- 페이지가 보이고 상호작용할 수 있음.
-> 변경된 사항만 Server에 요청을 보내면 되서 비용적인 측면에서 효율적.
-> 초기 페이지 로딩이 오래걸리고, SEO가 어려움.