[React] react-router에서 render 이용해서 컴포넌트 보여주기

react-router에서 해당하는 경로에 맞는 컴포넌트를 렌더하는 방법은 3가지가 있다.

 

1. <Route>의 자식으로 렌더하는 방법

import React from "react";
import { BrowserRouter, Link, Route} from "react-router-dom";
import "./app.css";
import Home from "./components/home";
import Profile from "./components/profile";

function App() {
  return (
    <BrowserRouter>
       <Route path="/home">
          <Home />
        </Route>
        <Route path="/profile">
          <Profile />
        </Route>
    </BrowserRouter>
  );
}

export default App;

하지만 위와 같이 쓰면 route 관련 props인 location, history, match를 받아올 수 없다.

 

2. <Route component>를 이용하여 렌더하는 방법

import React from "react";
import { BrowserRouter, Route} from "react-router-dom";
import Profile from "./components/profile";

function App() {
  return (
    <BrowserRouter>
       <Route path="/profile" component={Profile}/>
    </BrowserRouter>
  );
}

export default App;

이 경우 해당하는 경로에 Home 컴포넌트를 렌더하겠다는 것이다.

BrowserRouter는 Router의 종류이다.

 

🚨🚨🚨그러나 이 방법은 권장되지는 않는다.🚨🚨🚨

컴포넌트를 render나 Route의 자식으로 쓰는게 아니라 그냥 위와 같이 인라인으로 component를 쓰게 되면
라우터는 React.createElement를 사용해서 새 React 요소를 만든다.
즉, 인라인으로 prop으로서 component를 넣게 되면 렌더링 할때마다 새로운 컴포넌트를 만들게 된다는 것이다.
이것은 기존에 있는 컴포넌트를 업데이트하는게 아니라 기존의 컴포넌트를 언마운트하고 새 컴포넌트를 마운트한다.
그래서 render를 사용하거나 children prop을 사용하는 것이 권장된다.

 

3.  <Route render>를 사용하는 방법⭐⭐⭐ 

render를 사용하면 위에서 설명한 원치 않는 재마운팅 없이 편리하게 인라인 렌더링이 가능하다.
render를 사용하면 경로가 일치할 때 호출할 함수를 전달할 수 있다.
render prop함수도 history, location, match와 같은 동일한 route props를 받아올 수 있다.

import React from "react";
import { BrowserRouter, Link, Route} from "react-router-dom";
import "./app.css";
import Home from "./components/home";
import Profile from "./components/profile";

function App() {
  return (
    <BrowserRouter>
       <Route path="/home" render={() => <Home />} />
       <Route path="/profile" render={() => <Profile />} />
    </BrowserRouter>
  );
}

export default App;

단, 위처럼 render 함수에 아무것도 전달하지 않으면 route 관련 props를 받을 수 없다.
그러므로 props를 받아와서 복사해서 전달해야한다.
라우팅 되는 컴포넌트에 전달할 다른 prop이 있다면 여기에서 전달하면 된다. (이전 글에 포스팅했었음)

import React from "react";
import { BrowserRouter, Link, Route} from "react-router-dom";
import "./app.css";
import Home from "./components/home";
import Profile from "./components/profile";

function App() {
  return (
    <BrowserRouter>
       <Route path="/home" render={(props) => <Home {...props}/>} />
       <Route path="/profile" render={(props) => <Profile {...props}/>} />
    </BrowserRouter>
  );
}

export default App;

 

 

---

출처

https://reactrouter.com/web/api/Route/route-render-methods