React 개요
리액트도 node.js의 구조를 따른다.
리액트는 자바 스크립트 프레임 워크이다.
웹 페이지 UI를 개발할때 사용한다.
사용자 인터페이스를 컴포넌트화 시킨다.
컴포넌트들을 결합 해서 전체 페이지를 만든다.
일반 전통적인 방법과 다르다
컴포넌트는 재사용을 위함이다.
재사용성 증가
하나의 DOM을 사용하여 차이가 나는 부분만 업데이트하는 Single Page Application 방식이다.
SPA <-> MPA
Multi Page Application
DOM을 새로 만들어 새 페이지 사용하는 방식
SPA는 한번 열면 DOM이 계속 떠있고 바뀌는 부분만 업데이트가 된다.
view도 SPA이다
장점!
페이지 전환이 빠르다
새로 탭이 열리지도않고 깜박임도 없다
바로 바뀜
마치 native app처럼 화면 전환이 될때 매우 부드러워 사용자 경험이 좋다
사용자의 행위에 따른 interaction이 빠르다
서버는 데이터 제공만 하면 되기때문에 서버 개발이 상당히 간편해진다.
서버가 REST API로 사용이 되므로 꼭 리액트만 사용하는게 아니고 다른 뷰나 앱에서도 사용이 된다.
JavaScript에서 DOM을 생성하고 100개의 DOM을 생성하는 코드가 처음에 화면 로딩할때 다 다운이 된다.
단점!!
처음에 로딩시간이 오래걸릴수있다.
클라이언트 상태관리가 복잡해진다.
원래 전통적으로는 서버에 세션을 만들어서 동일한 상태를 공유한다.
그런데 리액트는 상태유지를 클라이언트에 저장한다
상태관리에 신경을 써야된다.
검색엔진에서 잘 노출이 안된다. 왜냐면 첫 요청에 완전한 화면이 만들어져 내려오는것이 아니다
검색 엔진은 어떤 URL에서 내용 및 태그를 검색하는건데
검색이 잘 안되게 된다.
규모가 커질수록 관리가 잘 안된다.
첫번째 요청해서 받아오는 html에는
<html>
<body>
<div id ="app">
</div>
</body>
</html>
딱 이렇게만 있다....
화면 로딩 속도가 느리다
단점 극복 방법!
브라우저에서 dom을 생성해서 기존 걸 갱신한다.
첫 화면을 빨리 나오게 하는 방법 = SSR
SSR + Streaming SSR
첫화면만큼은 서버에서 만들어서 다 포함시켜주자. 그게 Server Side Rendering
많은 이미지를 한꺼번에 받고 보여준다? 속도가 매우 느림
컴포넌트화 시켰기 때문에 데이터가 많아서 시간이 걸리는 부분을 브라우저에 주려면 속도가 느림
이런것들을 streaming (조각조각) 따로 보낸다.
React 18이상 버전은 기본이 스트리밍으로 되어있다.
리액트 18버전 부터는 순수 React가 아니다.
Next.js로 개발하라고 이미 포함이 되어있다.
Next.js는
컴포넌트가 서버에서 실행하는 컴포넌트가 있고
클라이언트에서 실행하는 컴포넌트가 있다.
두가지 나뉘어져있다.
'React' 카테고리의 다른 글
| [26.02.02] React 재직자 수업 5 -App Router, JSX (0) | 2026.02.02 |
|---|---|
| [26.02.02] React 재직자 수업 4 -프로젝트 재구성 , React Develope Tools (0) | 2026.02.02 |
| [26.02.02] React 재직자 수업 3 -클라이언트 컴포넌트, 서버 컴포넌트 (0) | 2026.02.02 |
| [26.02.02] React 재직자 수업 1 - npm 설치 package.json 의미 (1) | 2026.02.02 |
| React Vite 리액트 비트 정리 (0) | 2024.03.27 |
댓글