React SPA React Router

SPA 

다음엔 피그마 쓰겠습니다 ^^

전통적인 웹페이지에서는 한 부분만 바뀌더라도 페이지 전체를 로딩 했어야 했다.

웹사이트가 복잡해지면서 사용자와 상호작용이 더 빈번하게 일어나게 되었는데

그럴때마다 중복된 요소들을 매번 불러오는것이 서버와 불필요한 트래픽을 발생시켰다. 

 

반면에 SPA에서는 화면에 필요한 데이터만 서버에서 전달받아서 브라우저에 해당하는 부분만 업데이트 하는 방식으로 작동한다.

 

Sounds Great!

However!

 

🥝 SPA 단점

1. 로딩하는데 오래걸린다.

html은 화면로딩시에 script태그로 javascript를 받아오는데

이때 대부분의 코드가 javascript에 들어있으니 무거워져서 로딩하는데 시간이 걸린다.

 

2. 최적화가 어려워진다.

검색로봇이 웹페이지에 있는 정보수집, 분석해서 인덱스에 저장하고

사용자가 검색어입력하면 인덱스에서 가장 연관성 높은 웹페이지를 보여 준다.

html에서 정보를 캐내는데 거의 비워져있으니 정보수집이 힘들다

 

 

🥝 와이어프레임 

디자인에 들어가기전에 선을 이용해 윤곽선을 잡는것

리액트를 사용해 컴포넌트 기반 개발을 하려면

어플리케이션 안에서 다뤄지는 데이터를 컴포넌트끼리 유기적으로 주고받을 수 있게 설계해야한다.

 

React Router

라우팅에 따라 다른 뷰를 보여주기 위해서 리액트에서는 리액트 라우터라는 라이브러리를 많이 사용합니다.

화면에 따라 주소도 달라지는데 이렇게 다른 주소에 따라 뷰를 보여주는 과정을 경로에 따라 변한다는 의미로 라우팅이라고 한다

 

🥝리액트 라우터의 주요 컴포넌트

1. 라우터 역할을 하는 BrowserRouter

👉🏻 History API를 사용해 페이지를 새로고침 안해도 주소를 변경한다.

 

2. 경로를 매칭해주는 Routes와 Route

👉🏻 Routes : Route 컴포넌트를 감싸서 그 중 경로가 일치하는 단 하나의 라우터만 렌더링 시켜주는 역할

👉🏻 Route : path 속성을 지정해서 해당 path에서 어떤 컴포넌트를 보여줄지 정한다. Link 컴포넌트가 정해주는 URL경로와 일치하는 경우에만 작동된다.

 

3. 경로 변경하는 역할 Link 

👉🏻  해당 컴포넌트를 클릭할때, Route의 Path와 일치하는 페이지로 이동할 수 있게한다.

 

🥝 리액트 라우터 사용법

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

npm install react-router dom@^6.3.0

터미널에서 npm으로 다운을 받으면

package.json의 'dependencies'에서 확인할 수 있다.

<BrowserRouter>가 상위에 작성되어 있어야 리액트 라우터의 컴포넌트들을 사용할 수 있다.

✔️ ReactDOM 단계인 index.js에 <BrowswerRouter>를 넣을 수 도 있다. 큰 차이는 없으니 취향대로 사용해도된다고 한다!

✔️<Routes>

<Routes>는 여러개의 <Route> 중에 경로가 일치하는 하나의 라우터만 렌더링을 시켜준다.

<Routes>를 사용하지 않으면 매칭되는 모든 요소를 렌더링한다.

 

✔️ <Route>

path : 경로를 작성한다. 경로와 컴포넌트 이름이 동일해야 헷갈리지 않는다.

element : 연결하고자 하는 컴포넌트를 넣어준다.

✔️ <Link>

to: <Route>컴포넌트에 설정해 준 path주소를 연결해준다.

✨TIP!

만약 사용자가 지정된 주소 이외의 주소로 접근하게 되면 path="*" 속성을 사용해 설정되어있는 컴포넌트를 보여준다.

 

🥝 React Router에서 a요소가 아닌 Link를 사용하는 이유?

<a> 요소는 페이지를 전환하는 과정에서 페이지를 불러오기때문에 다시 처음부터 랜더링을 시킨다 -> 새로고침일어남

하지만 Link 컴포넌트는 페이지 전환을 방지하는 기능이 내장되어있다.