React Router에서 render와 component 차이

React에서는 Route를 사용하여 라우팅을 하는 것이 가능합니다. react-router에서 컴포넌트를 렌더링 하는 방법은 3가지가 있습니다.

자식으로 렌더링 하기

import React from "react";
import { BrowserRouter, Link, Route } from "react-router-dom";
import PageOne from "./components/PageOne";
import PageTwo from "./components/PageTwo";

function App() {
  return (
    <BrowserRouter>
        <Route path="/pageone">
          <PageOne />
        </Route>
        <Route path="/pagetwo">
          <PageTwo />
        </Route>
    </BrowserRouter>
  );
}

export default App;

component 사용

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

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

export default App;

<Route>의 자식으로 렌더링 하거나 <Route component>를 활용하여 렌더링 하는 방법 모두 간편하게 이용할 수 있지만 두 방법 모두 props를 사용할 수 없다는 단점이 있고, component를 사용하는 경우는 React.createElement 사용해서 새로운 요소를 계속 만들기 때문에 비효율적입니다. 그래서 최종적으로 가장 권장되는 방법이 바로 아래의 render를 사용하는 방법이라고 할 수 있습니다.

render 사용

import React from "react";
import { BrowserRouter, Link, Route } from "react-router-dom";
import PageOne from "./components/PageOne";
import PageTwo from "./components/PageTwo";

function App() {
  return (
    <BrowserRouter>
       <Route path="/pageone" render={() => <PageOne />} />
       <Route path="/pagetwo" render={() => <PageTwo />} />
    </BrowserRouter>
  );
}

export default App;

위와 같이 사용하면 불필요한 컴포넌트 재마운트 없이 쉽게 렌더링 할 수 있습니다.

<Route 
  path="/pageone" 
  render={props => <PageOne {...props} isAuthed="{true}" />} />

props를 전달하고 싶은 경우에는 위 방식으로 사용할 수 있습니다 :)

✔️ 참고 사이트

• https://nyang-in.tistory.com/228

🔔포스팅 공지
개인 공부 기록용 블로그 입니다.
잘못된 부분이 있을 시 메일이나 댓글로 지적해주시면 감사드리겠습니다 :)