[react] 부모 라우트에서 하위 라우트로 값 전달. 상위 컴포넌트에서 라우트로 값 전달하기

내 상황 : 상위 라우트에서 하위 라우트로 값을 보내야 함

 

상위 Board 라우트에서 하위 Review와 Inquiry 로 해당 user state의 값을 보내려고 함

import React, {useEffect, useState} from "react"
import {BrowserRouter as Router, Link, Route, Switch} from "react-router-dom"
import Inquiry from "../components/board/inquiry";
import Review from "../components/board/review";
import axios from "axios";

function Board({ props, match }) {
    const [user, setUser] = useState({cid:"", name:""});
    
    useEffect( ()=>{
        axios.get('/user')
            .then(res => { setUser({cid:res.data.cid, name:res.data.name}); })
            .catch(err => console.log(err))
    },[]);

    return (
        <Router>
            <header>

                <Link to={`${match.path}/review`}>
                    <button>후기</button>
                </Link>
                <Link to={`${match.path}/inquiry`}>
                    <button>문의</button>
                </Link>
            </header>
            <Switch>
                <Route path={`/`} component={Board} />
                <Route exact path={`${match.path}/review`} render={() =>  <Review props={user}/> } />
                <Route exact path={`${match.path}/inquiry`} render={() =>  <Inquiry props={user}/> } />
            </Switch>
        </Router>
    )
}

export default Board;

user 스테이트는 해당 페이지가 로딩 될 때 axios를 통해 지금 로그인한 사람의 정보를 얻어와서 저장함

그러고나서 이 값이 필요한 곳에 값을 전달해준다. render될 때 한번만 값을 보내주려면 이렇게 해야된다고 했음

 

 // 1. props 전달해 줄 필요 없는 경우
 <Route path={`/`} component={Board} />
 
 // 2. props를 한번만 전달해줄 때
 <Route exact path={`${match.path}/review`} render={() =>  <Review props={user}/> 

1번의 경우 props가 필요없어서 component를 바로 지정해줘서 path가 일치할 때 저짝으로 감

 

우리가 필요한건 2번의 경우이다.

이 때는 component={컴포넌트 명} 이 코드를 안써야된다. 안그러면 중첩되고 그냥 component={}가 우선시 된다고 어디서 본거같은데.....(갑자기 기억이 가물가물하네요...ㅠ)

 

암튼 render={} 이걸 통해서 컴포넌트를 선언해줘야한다.

 

---

참고 : sustainable-dev.tistory.com/117

React Router로 렌더링하는 컴포넌트에 prop 전달하기