React-페이지라우팅

페이지라우팅 : URL 요청 경로에 맞게 적절한 페이지를 보여주는 과정

index페이지 : URL(google.com) 경로 뒤에 아무것도 표시하지 않았을 경우 나오는 시작페이지

Path : naver.com/ 뒤에 붙는 blog나 cafe (ex. naver.com/ blog, naver.com/cafe)

 

클라이언트 사이드 렌더링

1. 리액트 앱은 html 파일이 하나뿐인 단일 페이지 애플리케이션(Single Page Application)
2. html파일이 하나이기 때문에 서버 사이드가 아닌 클라이언트 사이드 렌더링으로 페이지를 라우팅한다!

 

렌더링 과정

1. 웹 브라우저가 URL로 서비스 요청
2. 웹 서버는 요청 URL의 경로를 따지지 않고 페이지의 틀 역할을 하는 index.html과 자바스크립트 애플리케이션인 리액트 앱을 함께 반환
3. 웹 브라우저는 서버에서 제공된 index.html 페이지를 보여주고, JS로 이루어진 리액트 앱을 실행. 그리고 리액트 앱은 현재 경로에 맞는 페이지를 보여줌.
4. 페이지를 이동하면 웹 브라우저는 서버에서 받은 리액트 앱을 싱행해 자체적으로 페이지를 교체.

요약 : client side rendering은 사용자가 보는 페이지를 웹 서버가 아닌 브라우저가 완성한다.

 

BrowserRouter : 브라우저의 주소 변경을 감지하는 기능.

Routes

여러 route 컴포넌트를 감싸고, 현재 URL 경로에 맞게 적절한 Route 컴포넌트를 페이지에 렌더링.

Routes를 switch, Route를 case로 생각하면 이해하기 쉽다!

Routes는 자식인 Route 컴포넌트에서 설정한 경로와 요청 URL을 비교. 그리고 정확히 일치하는 컴포넌트를 element 속성에 전달해 렌더링.

 

 

 

페이지 이동 구현

 

Link 컴포넌트 

to 속성에 경로를 지정해 페이지를 이동. 

예시.

<Link to={“/“}> Home </Link>

 

 

@페이지 라우팅은 따로 하고, 이동은 link로 따로 한다.

 

동적 경로 : 값이 변하는 요소를 URL에 포함하는 경우

 

종류 : URL 파라미터, 쿼리 스트링

 

• URL 파라미터
  • 유동적인 값은 중괄호로 표시
  • id나 이름을 이용해 특정 데이터를 조회할 때 사용
    • 예시 ; Https://localhost:3000/diary/{id}
• 쿼리 스트링
  • 물음표(?) 뒤에 key=value 문법으로 URL에 유동적인 값을 포함하는 방법
  • 게시물 리스트에서 사용자가 정렬 조건을 선택하거나 현재 조회하는 게시판의 페이지를 표현할 때 사용
    • 예시 ; Https://localhost:3000?key=value

 

URL파라미터로 경로 설정하기

useParams 훅

useParams 훅은 브라우저에서 URL을 입력하면 이 경로에 포함된 URL파라미터를 객체 형태로 반환.

 

 

동적 경로 지정 , parameter로 id 지정

 

 

param에 파라미터를 객체로 저장 

 

출력결과