[React] Router

 안녕하세요.

 이번엔 router를 알아보겠습니다.

 차례

 0. Router

 1. 시작하기

 2. Routing

 3. Link

 4. URL 파라미터

 5. 프로젝트

 

 0. Router

 보통 router라 하면, 여러 네트워크를 연결하면서, A 지점에서 B 지점으로 가는 가장 최적의 경로를 찾아주는 장치를 의미합니다.

 마찬가지로 웹에선, url을 이동하는 방식 중 하나로, react에서는 페이지를 불러오지 않고 데이터에 따라 페이지를 렌더링 해주는 역할을 합니다. react에서 특별히 router를 쓰는 이유는 a href로 페이지를 이동하면 불러오면서 데이터를 잃기 때문입니다.

 react에서 component와 props를 통해 데이터를 넘길 수 있는데, 이를 활용해 페이지 사이로 데이터를 연결시킬 수 있습니다.

 

 react에서 router를 쓰기 위해서 react-router-dom을 다운받아야 합니다.

npm install react-router-dom

 

 1. 시작하기

 먼저 router를 만들기 위해선 컴포넌트를 몇 개 만들어둬야 합니다. 이전에 했던건 실용적이지 않으니 다 치우고 새로 만들어봅시다.

이미지 출처 : 게임 '벽람항로'

 전과 달리 App() 안에 컴포넌트만 남아 있는데, 그 이유는 뒤에 나옵니다.

 

 2. Routing

 먼저 구조를 구상해봅시다.

 

 - main

 - characters

 -- 캐릭터 1

 -- 캐릭터 2

 ...

 - equipments

 -- 장비 1

 -- 장비 2

 ..

 

 같은 구조가 될겁니다.

 

 다음으로 코드로 만들어 봅시다.

 쓰인 것은 BrowserRouter/Routes/Route 입니다.

 - BrowserRouter : html5의 history API를 활용해 UI를 업데이트

 -- HashRouter : url의 hash를 활용해 UI를 업데이트. 정적인 페이지에 적합.

 - Routes : 여러 route를 매핑.

 -- Switch : Routes와 같은 역할. react-router-dom v6로 업데이트 되면서 사용 불가.

 - Route : 각 루트를 만들 url과 표시할 컴포넌트.

 

 첫 줄은 가장 기본 페이지에 표시될 컴포넌트를, 마지막 줄은 위 키워드에 하나도 해당하지 않을 때 표시될 컴포넌트를 의미합니다.

 중요한 것은 route를 찾을 때, 위에서부터 순서대로 대조하기 때문에 필요한 경우 순서를 고려해야 합니다.

 

 url에 직접 위 키워드를 입력하면 페이지가 이동하면서 컴포넌트 내용이 나옵니다.

url을 잘 보세요.

 

 근데 위 코드를 그대로 router로 만들면, 이미지가 안 보이는 경우가 생기는데, 이때 디렉토리에서 제일 처음에 찍힌 점을 빼야 합니다.

이건 어디서 안 알려주드라.

 3. Link

  이제 페이지들을 연결시켜 봅시다. 그런데 위에서 언급했듯, a href로 연결하면 react를 쓰는 의미가 없으니, 다른 방식을 써야 합니다. (크게 다르지는 않습니다.)

 

 먼저 맨 위에 Link 모듈을 불러와야 합니다.

import {Link} from 'react-router-dom'

 

 이제 main에 링크들을 추가해보겠습니다.

 a가 Link로, href가 to로 바뀌었습니다. 마찬가지로 개발자 도구로 보면 a태그로 만들어진 걸 볼 수 있습니다. 그리고 당연한 말이지만, 오타가 나면 안됩니당.

 

 4. URL 파라미터

 URL 파라미터는 url을 통해 같은 형식을 사용하는 페이지를 만들어주기 위해 url에 파라미터를 넣는 것입니다.

 파라미터를 넣어주기 위해 App()의 Route를 수정한 후, useParams를 불러와야 합니다.

 

 맨 위에 useParams 모듈을 추가합니다.

import {useParams} from 'react-router-dom'

 

 다음으로 파라미터를 넣기 위해 코드를 수정합니다.

 여기서 중요한 것은, 파라미터와 컴포넌트에서 만든 변수의 이름이 같아야 합니다.

 만약, 다른 이름으로 변수를 만들기 위해서 다음과 같이 사용할 수 있습니다.

 

let 변수 = useParams().name

 

 결과는 다음과 같습니다. 파라미터에 한글도 가능합니다.

 

 5. 프로젝트

 이제 처음 구상한 대로 (간단하게) 만들어 보겠습니다.

데충 데이터 / map을 이용한 리스트 만들기

결과

데이터는 이렇게 / 받기는 이렇게

 링크를 누르면 상세 페이지로 이동합니다.

 

 

 지금까지 제가 프로젝트를 만들면서 배운 내용을 정리한 것입니다. 도움이 되길 바랍니다. 감사합니당.

 

 <이미지 출처 : 게임 '벽람항로'>

 <special thanks to 갓대희>