React - Router

React Router란?

 

설치하기 & 기본설정

터미널에 아래의 명령어를 입력해서 라이브러리를 설치합니다.

# @6 은 버전을 의미합니다
npm install react-router-dom@6

# 또는
yarn add react-router-dom@6

 

그 다음에 인터넷에 react-router-dom 6 버전 이라고 검색해서 설명서에 적힌 설치과정을 그대로 따라해주시면 됩니다.

 

• index.js 로 가서 아래의 코드들을 추가합니다.

 

• 이러면 일단 설치와 기본설정은 완료입니다.

 

사용법

외부 라이브러리의 사용법은 필요할 때 마다 검색해서 찾아서 사용하면 됩니다.

라우터는 먼저 몇가지 import 가 필요합니다.

 

그 다음에 아래와 같이 path 별로 페이지를 나누어줍니다. ( path 에는 해당 경로를, element 에는 html 코드를 적어줍니다. )

 

Link 는 페이지를 이동하는 버튼으로 사용합니다.

 

여기서 라우터에 그냥 html 코드를 적으면 너무 보기 힘들기 때문에 component 로 분리하는 것이 좋습니다.

• App.js

 

• MainPage.js

 

• MainItems

 

• DetailPage

 

폴더 구조는?

리액트는 파일이 많아지다보면 폴더로 정리하게 되는 경우가 있습니다. 그럴때는 그냥 심플하게 비슷한 파일들끼리 ( 연관성이 있는 파일들끼리 ) 폴더로 묶어주는게 리액트의 파일들을 정리하는 방법입니다. ( 예를들어 기능별로 구분하거나, 경로별로 구분 )

 

useNavigate

‘useNavigate’ 는 페이지 이동을 도와주는 Hook(훅) 입니다. ( 리액트에서 이렇게 use 로 시작하는 것들은 Hook 입니다. Hook 이란 유용한 것들이 들어있는 함수같은 것입니다. )

일반적으로 이런 훅들은 변수에 꺼내서 쓰는것이 일반적입니다.

 

 

‘useNavigate’ 같은 경우에는 페이지 이동을 도와주는 훅이므로, a 태그를 생성해주는 Link 대신에 사용할 수 있습니다.

• bootStrap 에서 가져왔던 Nav.Link 태그에 onClick 핸들러를 이용해서 ‘useNavigate( 변수에 담았으니 navigate )’ 함수를 사용하면 페이지 이동이 가능해집니다. ( 파라미터에는 이동할 경로를 입력해줍니다.)

 

• 또한 ‘useNavigate’ 의 파라미터에 1, -1 이런식으로 정수를 넣으면 1은 앞으로 한페이지 이동, -1 은 뒤로 한페이지 이동이라는 의미입니다.

 

404 페이지 만들기( 잘못된 경로 에러처리 )

아래와 같이 path 에 * 를 적게되면 위의 페이지 이외의 모든 페이지를 의미합니다.

그래서 아래와 같이 코드를 짜게되면 위에 적힌 라우터 경로 이외의 모든 경로에는 없는페이지입니다 라는 메세지가 보이게됩니다.

 

Nested Routes

Nested 란 태그안에 태그가 들어간 것을 의미합니다. 그러므로 Nested Routes 는 Route 안에 Route 라고 생각하시면 되겠습니다.

즉, 예를 들어서 About 페이지가 있는데, About 페이지에서 경로가 더 깊이 들어갈 때 사용합니다. (ex: /about/member , /about/location 등)

 

Nested Routes 는 만약에 /about/member 에 접속을 하면 /about 에 해당하는 element 와 member 에 해당하는 element 를 둘 다 보여줍니다.

 

하지만 위의 사진처럼 코드를 짜면 About 컴포넌트의 내용만 보이게됩니다. 그 이유는 Nested Routes 인 member 라우터의 element 에는 상위 element, 즉 About 컴포넌트의 어디에 member 의 element 를 보여줄 것인지를 작성해줘야합니다. ( 즉 Nested Routes 의 element 는 상위 element 와 같이 보인다기보다 상위 element 의 내부에 보여지게 되는 것입니다. )

• 상위 컴포넌트에 ‘Outlet’ 태그를 이용해서 하위 element 를 보여줄 위치를 지정해줍니다.

 

라우터 응용하기

응용을 하기 전에 State 를 전송하기 귀찮다고 여기저기 같은 데이터의 State 를 만들면 안됩니다. 나중에 수정사항이 생기면 같은 State 를 만든 곳을 전부 다 수정해야해서 일이 커지므로 데이터는 꼭 한곳에서만 사용하도록합니다.

url 파라미터 문법

• url 파라미터 문법이란 url 뒤쪽에 콜론( : ) 을 적고 원하는 작명을 적어주면 url/어떤 값을 적었을 때 이 페이지를 보여줘라는 의미가 됩니다.

 

• url 파라미터 문법은 만약에 제품의 상세페이지를 보여줘야한다고 했을 때 제품의 갯수만큼 라우터를 만들 수 없으니까 url 에 어떤 값을 넘겨줘서 그 값에 해당하는 제품의 상세페이지를 보여주도록 설계 할 때 사용합니다.
• ‘/url/:작명’ 이렇게 넘겨준 값은 넘겨받는 component 에서 useParams 라는 훅을 사용해서 작명해준 이름으로 받을 수 있습니다.( 아래와 같이 받아서 사용합니다. )

 

정렬기능 구현( title 기준으로 오름차순 정렬 )

• 정렬할 때 map 함수의 두번째 파라미터로 들어오는 index 값으로 사진을 띄우기 설정해놔서 정렬을 시켰을 때 나머지 정보는 바뀌는데 사진이 안바뀌는 문제가 있었는데 그걸 id 값을 사용하므로써 해결했습니다.

 

만약에 메인 페이지에서 정렬을 해도 상세페이지에서는 id 값을 기준으로 제품을 보여주도록 수정했습니다. (원래는 정렬을 해서 순서를 바꾸면 바뀐 순서에 해당하는 제품이 나왔습니다. )

• map 함수로 모든 shoes 를 반복시켜서 if 문으로 url 로 들어온 id 값과 shoes 의 id 값이 같을 때만 return 을 해줘서 shoes 의 순서가 바뀐 것과 상관없이 url id 값에 해당하는 제품만 보여주도록 설계했습니다.

 

 

추가적으로 find 함수를 이용해서 찾는 것이 더 효율적일 것 같아서 아래와 같이 수정했습니다.