[공부] 리액트 라우터 정리

📖 React Router

이해

로딩시 모든 자바스크립트 다운 → 규모가 크면 로딩 속도 느려짐

 

특정 페이지만 리렌더링 가능 → 속도 빠름, 자원 낭비 X

서드파티 라이브러리로, 공식 라이브러리가 아니다.

 

설치 및 불러오기

명령어

 

import

 

 

실습

App 컴포넌트 감싸기

실제 index.html에 반영되는 App 컴포넌트를 전역으로 사용하기 위해 scr/index.js 파일에 있는 App 컴포넌트를 감싼다.

 

Home, About 페이지 만들기

 

Route 특정 주소에 컴포넌트 연결하기

url이 localhost:3000/ 으로 끝나면, Home 컴포넌트를 불러오고

url localhost:3000/about으로 끝나면, About 컴포넌트를 불러온다.

 

<Link to> 태그로 새로고침 방지

<a href=""> 태그를 사용하면, 새로고침이 되기때문에 Router를 사용하는 의미가 없어진다. 이를 해결하기 위해 Link 태그를 사용한다.

링크가 걸린 about 문자를 클릭하면, About 컴포넌트를 호출하여, About UI가 화면에 표시된다.

 

파라미터와 쿼리 이용 전 선행작업

링크 클릭시 profile 컴포넌트를 호출하는 profiles 파일을 생성한다.

여기서 중요한 점은, profile/tenenger라는 url로 이동한다는 것이다.

 

나머지는 3, 4번을 참고하여, profiles 컴포넌트를 연결한다.

 

파라미터 : useParams

파라미터는 특정 id 나 이름을 가지고 조회를 할 때 사용(localhost:3000/about)

 

useParams는 루트 url 다음에 나오는 url을 가져오는 함수이다.

예시 : localhost:3000/profile → profile이 url_back 값으로 할당된다.

 

profiles 컴포넌트에 tenenger 링크를 클릭하면, url이 localhost:3000/profile/tenenger로 변경된다. profile 뒤에있는 tenenger를 useParams로 가져오기 위해 다음과 같은 작업을 진행한다.

 

그리고 profile 컴포넌트를 호출 할 수 있도록, profile 파일을 생성한다. 그리고 useParams를 이용해 localhost:3000/profile/tenenger을 username으로 가져와 화면에 표시한다.

 

쿼리 : useLocation

쿼리는 어떤 키워드를 검색하거나, 요청을 할 때 필요한 옵션을 전달 할 때 사용(localhost:3000/?search="apple")

파라미터와 사용법이 비슷하여 생략한다.

 

화면이동 : useNavigation

useNavigation을 이용하여, 페이지 이동, 뒤로가기, 앞으로가기 구현할 수 있다.