리액트 간단정리
1. 함수형태이고, html을 return으로 반환한다.
2. export, import 시켜야 한다.
리액트는 복잡한 사용자 인터페이스(UI)를 쉽게 구축하기 위한 라이브러리이다.
리액트는 Virtual DOM(가상돔)을 사용해 state의 변화를 감지하고 실제 DOM과 비교하여 다른 부분만 리렌더링 하는 방식으로 작동한다. 리액트를 쓰지 않고 바닐라 JS로 하면 dom Selector를 통해 실제 DOM을 변경하는 방식을 썼지만, 리액트의 경우 Virtual DOM을 거쳐 실제 DOM을 건드리기 때문에, 불변성이 훨씬 잘 지켜진다고 할 수 있다.
리액트의 핵심은 state와Components이다. state는 리액트가 상태변화를 감지하여 바뀐부분을 렌더링한다는 뜻이다. 이는 JS에서 배운 클로저의 원리와 비슷하다. 리액트의 경우는 hook함수(useState, useEffect)를 사용하여 상태를 관리하게 된다.
예를 들어 다음과 같은 코드가 있을 때,
function MyComponent() {
const [count, setCount] = useState(0);
function handleClick() {
setCount(count + 1);
}
return (
<div>
<p>You clicked {count} times</p>
<button onClick={handleClick}>Click me</button>
</div>
);
}button을 클릭해 state가 바뀌면 handleClick함수와 함수를 호출하는 버튼만 렌더링된다. MyComponent 전체가 다시 렌더링 되는 것은 아니다.
1. CSR vs SSR
CSR은 클라이언트 사이드 렌더링, SSR은 서버 사이드 렌더링을 의미한다. 기준은 서버를 렌더링하는 '주체'인데, 말그대로 CSR은 클라이언트(브라우저)가 직접, SSR은 서버(프론트)서버가 렌더링한다는 의미이다.
1. CSR (클라이언트 서버 렌더링)
*브라우저가 요리사
CSR은 브라우저가 프론트 서버에서 리소스를 요청하고, 받은 리소스(html,css,js)를 브라우저가 직접 빈 화면에 렌더링하는 방식이다.더 정확히 말하면 페이지에 필요한 리소스를 모두 받아와 데이터를 캐싱하고 있다가 현재 URL에 해당하는 페이지를 렌더링한다. 요리로 비유하자면 모든 요리들의 재료를 다 받아온 뒤, 집에 와서 직접 요리를 해 먹는 것이다.
장점 : 초기 렌더링 이후의 속도가 빠르다. 페이지를 매번 새로 요청해 받아오지 않고도, 필요한 재료(리소스)가 다 있으니 시간이 단축된다.(모든 요리 재료가 다 있으니 메뉴가 바뀌어도 쉽게 만들 수 있다.)
단점 : 초기 페이지가 빈 페이지이기에 검색엔진 최적화에 불리하다.
또한 처음 리소스를 받는 과정에서 첫 페이지 로딩에 시간이 걸린다. 예를 들어, 백엔드에서 데이터를 받아오는 동안 사용자가 빈 화면을 보게 될 가능성이 있다.
2. SSR (서버 사이드 렌더링)
*프론트엔드 서버가 요리사
SSR은 서버 사이드 렌더링으로, 모든 페이지를 프론트서버와 백서버가 데이터 통신을 통해 페이지를 완성한 뒤에, 브라우저에 넘겨주는 방식이다. 요리에 비유하자면 SSR은 호텔 레스토랑에서 메뉴를 하나하나 주문한뒤 받아오는 방식이다.
장점 : 첫 페이지 렌더링이 비교적 빠르다. 또한 SEO, 검색엔진 최적화에 유리하다. 애초에 완성된 페이지를 받아오기 때문에 검색엔진에 잘 잡힌다. 그래서 구글 같은 검색 엔진에 노출이 잘 된다는 장점이 있다. 그래서 검색 엔진이 가능한 사이트(인스타그램, 쇼핑몰)의 경우 SSR을 사용한다.
또한 서버에서 직접 페이지를 렌더링하기에, 사용자의 하드웨어의 영향을 많이 받지 않는다.
단점 : 서버의 부담이 크고, SSR을 위한 코드 작성이 더 필요하기에 생산 비용이 증가한다. 리액트의 경우 CSR 기반이기에 검색 엔진 최적화를 가능하게 하는 NextJS를 추가적으로 배워야 한다.
또한 데이터 양이 많은 무거운 페이지의 경우 초기 로딩이 오히려 CSR보다 오래 걸릴 수 있다.
CSR, SSR 요약 정리
- 주체는? CSR은 '브라우저', SSR은 '서버'
- 처음화면이? CSR은 '빈화면', SSR은 '완성된 페이지'
- 데이터 방식이? CSR은 '캐싱' SSR은 매번 '재요청'
2. SPA vs MPA
1. SPA(싱글 페이지 앱)
single page application으로, 리액트와 같이 컴포넌트 기반 프레임워크는 이 SPA에 최적화되어 있다. 대충 말하자면 HTML이 하나라는 뜻이다. 사용자가 웹 사이트에 접속하고 이벤트가 발생하면 URL이 변경됨에 따라 HTML파일을 해당 URL에 맞는 리소스를 보여주도록 한다.
2. MPA(멀티 페이지 앱)
multi page application의 약자로, html 파일이 여러개인 애플리케이션을 말한다. 요청을 받으면 해당 페이지에 필요한 리소스를 불러와 화면을 구성한다. Mpa는 다수의 html 파일로 이루어져 있다는 점에서 SPA와 다르다.
사실 밑의 한 줄을 이해하기 위해 정리한 것이다.
요약 : 리액트는 CSR, SPA에 기반한 라이브러리이다.!
3. npm
npm은 node에 기본으로 내장된 패키지 관리 툴이다.
npm i(install) 라이브러리명 : 라이브러리 설치
npm rm 라이브러리명 : 라이브러리 삭제
npm i -g 라이브러리명 : 라이브러리를 전역 환경에 설치
타입스크립트 등 몇개의 라이브러리만..
npm i -D 라이브러리명 : 개발자 환경에서 설치. 디버깅 같은 기능
npx : npm과 달리 라이브러리를 설치하지 않고 실행만 시킴 멀티레포 vs 모노레포
멀티레포는 Repository를 각 도메인 및 성능 시스템 단위로 생성하여 운영하는 방식이다. 장점은 각 프로젝트가 고유의 저장소를 가지게 됨으로써, 다른 프로젝트와의 의존성을 가지고 있지 않아 독립적으로 빠르게 개발이 가능하다.
이와 달리 모노레포는 하나의 워크스페이스에 여러 프로젝트를 담고 관리하는 방식이다. 코드 컨벤션등 통일성을 유지할 수 있다는 장점이 있으나, 다른 프로젝트를 한 폴더에서 관리한다는 것이기 때문에 폴더 구조나 신경을 써야 하는 부분이 배로 늘어난다는 이야기기기도 하다.
따라서 초기에 사용하는 것보다는 이미 사용자가 충분히 확보되어 안정화가 된 복잡한 프로젝트를 간단하게 만들기 위해 사용한다.
webpack(모듈 번들러의 한 종류)
모듈 번들러란 모듈을 묶어주고 정리하는 것을 말한다.한 프로젝트에는 많은 다양한 종류의 파일들이 생성되는데,(html, css, js, media..)이런 리소스들을 확장자명이나 특정 기준으로 분류하여 묶어주는 역할을 한다.
웹팩은 이런 모듈 번들러의 일종이다. CSR의 특성상 URL의 따라 해당 페이지의 리소스를 찾아서 페이지에서 보여주어야 하는데, 웹팩은 미리 리소스들을 잘 분류해 놓아 탐색시간을 줄여줌으로써 네트워크 연산 비용을 줄일 수 있다.
장점
1. 모듈 단위의 개발 가능
2. loader를 통해 js가 로드할 수 없는 파일도 로드할 수 있는 파일로 변환한다.
*babel: 트랜스 파일러. 최신 문법을 이해하지 못하는 하위 버전의 브라우저 로더들이 최신 문법을 이해할 수 있도록 문법을 변환하여 트렌스 파일함.
리액트의 파일구조 - 모르는 것만
package.json
: 설치된 라이브러리의 목록을 관리한다. 라이브러리의 버전 및 목록을 관리하고 실행 스크립트, 명령어를 관리한다.
package.lock.json
: 라이브러리의 실제 설치 주소가 나와있다. 이에 문제가 생기면 npm i를 하면 된다
src
: App.js와 index.js는 리액트 구조 상 가장 최상위의 컴포넌트를 의미한다.
:App.js는 라우팅, 라이브러리의 기본 설정을 담당한다. 최상위 컴포넌트의 하나로, 모든 컴포넌트의 종착지가 된다.
: App.css는 App.js에서 참조된 기본 css 파일이다. 모든 컴포넌트에 적용되는 전역 css 파일이다.
