react-router-dom 에서 props 를 넘겨주고 싶을 때

Jacob You·2020년 6월 30일
1

react-router-dom

보통은 SSR 과 코드 스플리팅의 이슈로 next.js 를 많이 사용하는데 이번엔 간단하게(?) 가고 SSR도 필요없고 SEO도 필요없는 그런 서비스를 하나 만들어야 한다. 그래서 CRA를 사용하였는데 route 부분에서 next.js의 직관적인 부분과 좀 다른 부분이 있어서(그냥 내 머리가 나쁜거다.) 이에 대한 내용을 자꾸 까먹기 전에 적어놓고자 한다. 요즘 구글이 있다보니 뭔가 문제를 해결하면서 머리 속에 남기보다 또 문제에 봉착하면 구글에서 찾으면 되지 하는 안일함이 자꾸 나를 성장하지 못하게 하는 것 같다.

이해

next.js는 그냥 요구된 조건에 맞게 디렉토리 구조를 맞추면 그게 곧 라우팅이다. 그리고 getInitialProps 라는 엄청 편리한 기능이 있어서 location 에서 여러 값들을 뽑기도 좋다. 하지만 react-router-dom 은 약간 개념이 다른 것 같다.

import React from 'react';
import {BrowserRouter as Router, Route} from 'react-router-dom';
// 컴포넌트를 import 하는 구문도 필요함.
import Login from './pages/auth/Login.js';
// 중략

const App = () => {
	return (
    	<Router>
        	<Route path="/Login" component={Lgoin} />
        </Router>
    )
}

이런 식의 구성이 기본이다. 지금은 예제코드를 짧게 작성하느라 하나의 컴포넌트만 있지만 저렇게 Route 라는 컴포넌트에 그려넣을 페이지를 쫙 넣어놓고 시작하는 거라고 이해했다. 물론 복잡한 구조라면 그 자식의 컴포넌트들에서 또 Route 를 가지고 그리면 될 것 같긴하지만 먼저 next.js의 그 심플함을 맛본 상태라 이해하는데 시간이 걸린다. 즉, Route 가 위치한 곳에 주소가 일치하면 해당되는 컴포넌트를 그린다고 이해했다.

커스텀 props 전달

오늘의 메인주제이다. react 하면 props 와 state 가 절반이상이라고 해도 과언이 아닌 것 같다. 보통 컴포넌트를 그릴 때, 부모에서 자식에게 내려주는 방법은

<Login authState={false} />

이런 식으로 줄 수 있다. 근데 Route의 경우엔 저런 내용을 끼워넣을 곳이 잘 안보인다. 그래서 조금 찾아보니 아래와 같은 방법이 있었다.

<Router>
	<Route path="/login" render={(props) => (<Login authState={false} {...props} />)} />
</Router>

이런 식의 구성이 가능해진다.

profile
야매로 먹고사는 프론트엔드 개발자

0개의 댓글