Create React App

리액트SPA를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인.
명령어 > npx create-react-app@latest 폴더이름

React SPA(Single Page Aplication)

서버로부터 필요한 데이터만 받아 업데이트함으로써 사용자와 소통하는 웹 페이지

장점

• 전체가 아닌 필요한 부분의 데이터를 받아오기에 사용자와 interation에 빠르게 반응
• 서버 과부하 줄어듦
• 전체 페이지 렌더링 x > 더 나은 유저경험 제공

(SPA방식으로 만든 서비스 > youtube, facebook, Gmail, airbnb, Netflix 등)

단점

• html은 거의 비어있고 대부분의 코드는 js파일에 있음 > 무거워짐 > 첫로딩 느림
• html이 거의 비어있기에 검색엔진의 자료수집 힘듦 > 검색엔진 최적화가 안좋음

React Router

Routing

다른 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 따라 변경한다."라는 의미로 라우팅(Routing)

주요 컴포넌트

• 라우터 역할을 하는 BrowserRouter
• 경로를 매칭해주는 Routes 와 Route
• 경로를 변경하는 역할을 하는 Link

BrowserRouter

• 웹 애플리케이션에서 HTML5의 History API를 사용해 페이지를 새로고침하지 않고도 주소를 변경할 수 있게 해준다.
• 상위에 작성되어 있어야 React Router의 컴포넌트들을 사용할 수 있다.

Routes, Route

• Routes 컴포넌트는 여러 Route 컴포넌트를 감싸서 그중 경로가 일치하는 단 하나의 라우터만 렌더링을 시켜주는 역할.
• Routes 를 사용하지 않으면 매칭되는 모든 요소를 렌더링.
• Route 컴포넌트는 path 속성을 지정하여 해당 path 에서 어떤 컴포넌트를 보여줄지 정함.
• Link 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동.

Link

페이지 전환을 통해 페이지를 새로 불러오지 않고 애플리케이션을 그대로 유지하여 HTML5 History API를 이용해 페이지의 주소만 변경

이 컴포넌트들을 사용하기 위해서는 React Router 라이브러리에서 따로 불러와야 한다.

import { BrowserRouter, Routes, Route } from 'react-router-dom';

Import는 필요한 모듈을 불러오는 역할로 비구조화 할당(destructuring assignment)과 비슷하게 이용할 수 있다.

아직까진 재밌고? 할만한거같다.