React Router란

Router는 페이지를 새로 불러오지 않는 상황에서 각각의 선택에 따라서 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리다. 즉 하나의 페이지(SPA)안에서 필요시 각각의 데이터(페이지X)만 새로 렌더링 할 때 쓰이는 것이다. 새로운 페이지를 불러오지 않고 효율적으로 데이터를 가져다 쓸 수 있으니 쓰는 방법도 어렵지 않으니 한 번 같이 어떻게 쓰는지 알아보자. 

 

우선 라이브러리를 먼저 설치해주어야 한다.

npm install react-router-dom
yarn add react-router-dom  // yarn이 깔린 분들은 요걸룽

 

설치를 해주었다면 다음은 당연히 임포트를 해주어야 되겠다. 

 

임포트 해줄때 위의 세개를 같이 임포트 해주길 바란다. 

 

저 BrowserRouter는 html5의 history api를 사용해서 페이지의 새로고침 없이 주소를 바꿀수 있게 해준당.

Switch는 첫번째로 매칭되는 컴포넌트만 렌더링을 시켜준다. 즉 보통 메인페이지의 주소를 "/"로 해놓고 다른 컴포넌트들을 "/blabla" 식으로 해놓는데 메인을 가기위해 "/"를 입력했지만 /가 포함된 /blabla같은 다른 컴포넌트들이 렌더링 되지 않기 위해 방지해주는 역할을 해주는 컴포넌트라고 보면 된다링.

 

이제 원하는 주소에 맞춰서 작성해주면 되는데 필요한 키워드가 3개 있다. 

"component", "path", "exact" 등이 있는데 어떻게 작성되는지 한번 확인해보자.

 

이런식으로 작성해주면 된다,

 

*<BrowserRouter>는 가장 바깥에서 감싸고 있어야 한다링.

 

*exact는 메인이 될 컴포넌트에 붙여준다리. 만약 안 붙이면 경로를 제대로 인식하지 못해서 주소가 바뀌어도 해당된 컴포넌트가 제대로 렌더링 되지 않는다리.

 

 

또한  *NavLink*라는 컴포넌트도 라우터에서 꺼내 올 수 있는데 라우터로 지정한 컴포넌트들로 이동 시켜 줄 수 있는 컴포넌트이다. 즉 다른 컴포넌트 내에서도 해당된 경로를 적어주면 끝나게 된다. 

 

이런 식으로 붙여주면 되긌다.