[Week7 - Day33] React Router

1. 오늘의 과업 리스트 📋

+ React Router 적용 퀴즈

 

2. React Router

1) SPA

싱글 페이지 애플리케이션 (Single Page Application)

 

📍 SPA의 등장

   • MPA 방식: 화면이 바뀔 때마다 페이지의 모든 부분을 새로 전송 받음

       ➡️동일한 화면 구조가 불필요하게 재 전송되며 많은 트래픽이 발생됨

   • SPA 방식: 브라우저가 화면의 렌더링을 담당하면서 애플리케이션을 미리 로드하고, 화면에 필요한 데이터만 전달받아 그때 그때 동적으로 보여주는 방식

       ➡️트래픽 감소와 속도 및 반응성 향상

📍SPA 단점

• 최초 접속시에 모든 리소스를 받아와야하기 때문에 로딩시간이 길어질 수 있다.
• 서버에서 처리 후 보여주던 부분을 클라이언트가 받아온 후 화면을 구성하기 때문에 완성되기 전의 페이지가 사용자에게 잠깐씩 노출될 수 있다.
• 데이터 처리를 클라이언트에서 하는 경우가 많아져서 보안상 취약할 수 있다.

쇼핑몰이나 컨텐츠 배포를 위해 여러 카테고리가 필요한 애플리케이션의 경우 MPA 방식이 적합하다.

➡️애플리케이션의 성격이나 요구사항에 맞춰서 선택하기

 

📍Ajax

Asynchronous Javascript And Xml

• 비동기적으로 서버와 브라우저가 데이터를 교환하는 통신 방식
• 페이지의 새로고침을 막기 위해 사용
• 한 개의 페이지에서 동적으로 변화하는, 페이지 일부만 갱신할 수 있는 SPA를 구현

 2) React Router 사용 방법

 가. Router 

라우팅: 주소에 따라 다른 화면을 보여주는 것

• SPA 한 개의 페이지 안에서 각각 다른 화면을 보여주고, 화면들에 주소 부여
• React에서 React Router 라이브러리를 제공하고 있어 라우팅 방식으로 SPA 구축 가능

 나. 주요 컴포넌트

• BrowserRouter: 이 컴포넌트는 최상위에 위치하며, 이를 통해 React Router의 다른 컴포넌트들을 활용할 수 있다.
• Routes 와 Route: Routes 컴포넌트 안에는 여러 개의 Route 컴포넌트가 위치하며, 각 Route는 특정 경로와 그 경로에 해당하는 컴포넌트를 정의한다. Routes 컴포넌트는 경로가 일치하는 하나의 Route만을 렌더링한다.
• Link: Link 컴포넌트는 HTML의 a 태그와 유사한 역할을 하며, 클릭하면 지정한 화면으로 변경해준다. 이 때 to 속성에 이동할 경로를 지정한다. a 태그와 달리, Link 컴포넌트는 페이지 전환 시 새로고침을 방지하는 기능이 내장되어 있어 SPA를 구현할 수 있다.

 다. 가이드

https://reactrouter.com/

React Router Official Documentation

버전별 사용 방법을 제공하므로 참고하자!

---

💯 React Router 퀴즈

lms에서 퀴즈 진행

📑 오답 검토

 

3. Router 라이브러리 활용

1) 설치

npm install react-router-dom

2) 프로젝트 적용

 가. 메인 페이지에서 [장바구니] 버튼을 누르면 장바구니 페이지로 이동

장바구니 버튼 클릭

장바구니 페이지로 이동되는 것을 볼 수 있다.

 나. 상품을 클릭하면 상세 정보 페이지로 이동

상품 카드 클릭

상품 상세 페이지로 이동되는 것을 볼 수 있다.

---

✒️컨텐츠 피드백 및 진행 소감

이번 실습을 통해 React Router를 활용하여 쇼핑몰 내 다양한 페이지(상품 목록, 상세 페이지, 장바구니, 결제 완료 등)를 유기적으로 연결해보는 경험을 쌓을 수 있었다. 장바구니 상태를 Recoil로 전역 관리하고, 상세 페이지에서 해당 상품을 담거나 수량을 조절하는 로직을 처리하는 과정에서 상태 관리와 라우팅이 어떻게 유기적으로 연결되는지 체감할 수 있었다. 또한, 결제 완료 후 장바구니를 초기화하거나, 카드 선택 모달에서 특정 경로로 이동시키는 흐름 등도 navigate()를 통해 자연스럽게 구성할 수 있었다.

 

https://www.interninmeta.or.kr/

인턴IN메타