React-Router에서 onEnter 호출 안됨 문제 해결

제목: React-Router에서 onEnter가 호출되지 않는 문제 해결

이 블로그 글에서는 React-Router에서 onEnter 메소드가 호출되지 않는 문제를 다루고 이 문제를 해결하기 위한 해결책을 제공합니다. 이 문제를 겪고 있고 왜 발생하는지 확실하지 않은 경우 해결 방법을 찾아보세요.

문제 설명

React-Router를 사용할 때, onEnter 메소드가 예상대로 작동하지 않을 수 있습니다. 이는 특히 인증 또는 중요한 기능을 위해 이 메소드에 의존하는 경우에는 답답할 수 있습니다.

function requireAuth(nextState, replace){
  console.log("called"); // 전혀 호출되지 않음
  if (!isLoggedIn()) {
    replace({
      pathname: '/front'
    })
  }
}

해결책 1: React-Router v4

React-Router 버전 4부터 onEnter 메소드가 삭제되었습니다. 대신, <Route render={ ... } /> 접근 방식을 사용하여 필요한 기능을 구현할 수 있습니다. 다음은 예시입니다:

<Route exact path="/home" render={() => (
  isLoggedIn() ? (
    <Redirect to="/front"/>
  ) : (
    <Home />
  )
)}/>

해결책 2: React-Router v3

React-Router 버전 3을 사용하는 경우, onEnter 메소드를 사용할 수 있습니다. 하지만, React-Router v4부터는 <Route>로 렌더링되는 컴포넌트의 라이프사이클 메소드를 사용하는 것이 권장됩니다. 예를 들면 다음과 같습니다:

<Route path="/home" component={Home} onEnter={requireAuth} />

이 경우, onEnter 메소드를 componentDidMount 또는 componentWillMount 라이프사이클 메소드로 대체할 수 있습니다.

해결책 3: React-Router v6

React-Router 버전 6에서는 Redirect 컴포넌트가 Navigate로 대체되었습니다. 다음은 예시입니다:

<Route path="/protectedRoute" element={userState ? <ProtectedComponent /> : <Navigate to="/login" />} />

이 경우, userState는 사용자가 로그인했는지 여부를 나타내는 Redux 스토어의 상태일 수 있습니다.

결론

React-Router에서 onEnter 메소드가 작동하지 않는 문제가 발생한다면 사용 중인 React-Router 버전을 고려하는 것이 중요합니다. React-Router v4는 <Route render={ ... } /> 접근 방식을 요구하고, v3은 onEnter를 사용할 수 있지만(라이프사이클 메소드로의 이전이 권장됨), v6에서는 Redirect를 Navigate로 대체합니다. 해당 버전에 대해 권장되는 해결책을 따르면 onEnter 기능이 예상대로 작동함을 보장할 수 있습니다. 즐거운 코딩하세요!

참고 자료 : 

reactjs