React Router 오류 / TypeScript VFC FC 차이

프로젝트를 하던 중에 react-router-dom 5.2.0 버전이랑 6.3.0 버전이랑 Router 사용하는 방법이 달라서 

Error: useRoutes() may be used only in the context of a <Router> component.

이런 에러가 났다. 

 

찾아보니 버전이 업그레이드 되면서 사용 방법이 달라졌더라,, 

Route를 Routes로만 감싸서 사용을 했었는데

Route를 Routes로 감싸고 또 얘네를 Router로 감싸야지 에러가 해결되었다. 

<Router>

  <Routes>

    <Route path="/" element={<Home/>}/>

    <Route

      path="/routine"

      element={

        <DailyRoutine />

      }

    />

  </Routes>

</Router>

이런식으로 감싸줘야한다. 

 

---

이번에 TypeScript를 처음 배워보면서 사용해보았는데 컴포넌트의 타입을 설정해주다가

React.VFC 그리고 React.FC 를 알게되었다.

 

VFC와 FC는 각각

VoidFunctionComponent

FunctionComponent

 

약자이다. 

 

이 둘의 차이점은 props로 children을 사용하는지 안하는지..!

children을 사용한다면 FC => 렌더링할 자식을 가져오는 컴포넌트들은 FC

children을 사용하지 않는다면 VFC => 단순하게 custom button 이나 custom card 등의 컴포넌트인 경우에는 VFC