리액트란?
복잡한 사용자 인터페이스(UI)를 쉽게 구축하기 위해 페이스북에서 제작한 javascript로 만든 라이브러리이고 CSR에 SPA입니다.
핵심 컨셉
- component
리엑트는 component들로 이루어진 UI 라이브러리이다. 리엑트의 component들도 dom tree처럼 트리형식으로 이루어져 있다.component는 하나의 페이지를 한 가지 기능을 수행하는 UI 단위로 분리한 것이고 고립되어 있으며 서로 독립적이며 재사용이 용이하고 관리 및 유지 보수에 효율적
-
Virtual Dom
- react가 가지고 있는 가상 돔, 진짜 돔의 복사본
- react의 상태가 바뀌면 가상돔의 상태를 진짜 돔에 리랜더링하는 것
- 바뀐 컴포넌트만 랜더링을 시킨다.
-
state와 render
리엑트는 상태가 변경이 될 때마다 어플리케이션 전체를 다시 렌더링한다. state에 맞게 render함수에서 어떻게 렌더링할 건지 한번만 정리해 놓으면 리엑트가 알아서 상태가 변경되고 render 함수를 호출해준다.- state : 컴포넌트에 들어있는 데이터를 나타내는 객체, 데이터의 저장공간
- render : JSX로 작성되었으며 state에 변경된 사항이 있으면 render함수가 실행된다.
CSR(Client Side Rendering)
- 사용자가 페이지를 그린다.
- 사용자가 웹 사이트에 접속 → 서버에 페이지에 필요한 리소스(code, asset) request
페이지가 로드될 때 상품에 관한 정보를 백엔드 서버에 달라고 요청
사용자는 전달받은 리소스를 js까지 모두 로드한 후 화면에 표현
사용자가 랜더링 부담
장점
필요한 자바스크립트를 사전에 미리 불러와 초기 랜더 이후의 속도는 빠르다. 특히 사전에 백엔드와 통신하는 부분이 없다면 SSR을 사용할 이유가 없다.
단점
-
초기 페이지 로딩이 SSR보다 느리다.
-
사용자가 페이지를 랜더하는 동안 빈화면을 보게되므로 UX가 좋지 않다. 사용자에게 랜더링을 부담
사용자 하드웨어에 의존
SSR(Server Side Rendering)
-
서버에서 페이지를 그린다.
-
사용자가 웹 사이트 접속 → 서버에 필요한 페이지 요청 → 서버에서 그려진 페이지 전달
js가 로드 되기 전에 완성된 페이지를 사용자가 먼저 확인
-
서버가 랜더링 부담
장점
SEO(검색 엔진 최적화) : 웹 사이트를 검색엔진이 크롤링하여 사용자에게 제공, 해당 과정을 최적화하여 더 많은 사용자에게 웹 사이트를 노출
- 빠른 첫페이지 로딩속도
- 서버에서 랜더를 부담하기 때문에 사용자가 느끼는 부담이 덜하다.
단점
-
서버의 부담(생산 비용 증가 → 단 SSG로 완화 가능)
-
무거운 페이지라면 오히려 초기 페이지로딩이 오래걸려 UX를 해칠 가능성이 높음
-
CSR보다 더 많은 생산비용(코드를 많이 쳐야함, 인력) 추가 러닝 커브
SPA(Single Page Aplication)
- 말 그대로 페이지가 하나인 애플리케이션(.html 파일이 1개)
react는 SPA 개발에 최적화, 사용자가 웹 사이트에 접속하면 접속 당시 단 한번만 페이지에 필요한 리소스(html, css, js)를 전부 전달하고 이를 캐싱(저장)해두었다가 url가 달라짐에 따라 html의 내부를 수정(리랜더)해서 사용자에게 보여주는 것이다. 따라서 react의 통상적인 파일 구조에는 index.html 파일 하나만 존재
MPA(Multi Page Aplication)
- SPA와 반대로 페이지가 여러개인 애플리케이션(.html이 여러개)
- SSR 방식으로 요청마다 리소스를 받아온다.
npm이란?
node.js에서 기본적으로 설치되어 있는 패키지 관리 툴
npx란?
npm과 달리 설치하지 않고 라이브러리를 실행 시켜주는 도구
npx를 사용하면 react project를 생성할 때 굉장히 무거운 패키지를 사용한다. 이를 설치하지 않고도 프로젝트 생성
yarn이란?
과거 npm보다 속도, 안정성, 보안 모두 뛰어나 이목을 끌었다가 현재는 npm과의 차이가 거의 없다. 따라서 yarn 만을 사용하는 것은 npm과 차이가 없기 때문에 사용하는 의미가 없다.
가상 돔트리(Virtual DOM Tree)
DOM은 HTML, XML 문서의 프로그래밍 interface이다. 즉, DOM을 활용해서 그저 텍스트 파일이기만 했던 HTML이나 XML 문서(document)에 프로그래밍 언어가 접근할 수 있도록 한다. DOM은 이름 그대로 문서 구조를 트리 형태의 객체(Object)로 표현한다.
특히 웹 브라우저는 DOM을 활용하여 객체에 자바스크립트와 CSS를 적용하게 된다. 컴포넌트의 상태가 변경되면 view를 새로 그리게 되는 방식으로 동작한다. root컴포넌트에서 상태가 변경되면 모든 컴포넌트들을 새로 렌더링하게 된다. 이렇게 상태가 변경될 때마다 모든 render함수가 호출되면 안좋아질 수 있다고 생각할 수 있지만 리엑트에서는 컴포넌트들이 가상의 DOM Tree형태로 메모리상에 존재한다. DOM Tree에 직접 업데이트 되는 것이 아니라 먼저 가상의 DOM Tree에 업데이트하는 것이다.
