React Router v4로 Async(비동기) 인증하기

React Router v4에서 비동기 인증 처리의 어려움

React Router v4는 React 애플리케이션에 강력한 라우팅 솔루션을 제공합니다. 많은 애플리케이션에서 일반적으로 필요한 요구 사항 중 하나는 일부 경로를 무단 접근으로부터 보호하는 것입니다. React Router에서는 PrivateRoute 컴포넌트를 사용하여 사용자가 인증되었는지 확인한 후 보호된 경로를 렌더링하는 것이 가능합니다.

동기 인증 처리의 문제점

기본적으로 PrivateRoute 컴포넌트에서의 인증 확인은 동기적으로 이루어지며, isAuthenticated 변수의 값에 따라 보호된 경로를 렌더링하거나 로그인 페이지로 리디렉션합니다. 그러나 일부 경우에는 사용자의 인증 여부를 확인하기 위해 비동기 요청을 수행해야 할 수 있습니다.

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    isAuthenticated ? (
      <Component {...props}/>
    ) : (
      <Redirect to={{
        pathname: '/login',
        state: { from: props.location }
      }}/>
    )
  )}/>
);

비동기 인증은 사용자의 자격 증명을 확인하기 위해 API 요청을 수행하는 것을 의미합니다. 그러나 비동기 코드의 특성으로 인해 응답을 받기 전에 리디렉션이 발생하므로 잘못된 동작이 발생할 수 있습니다.

상태를 사용하여 비동기 인증 처리하기

다행히도 이 문제에 대한 해결책이 있습니다. 비동기 인증 프로세스를 처리하기 위해 상태 관리를 사용하면 비동기 호출이 완료될 때까지 보호된 경로를 렌더링하거나 로그인 페이지로 리디렉션하는 데 필요한 적절한 대기를 할 수 있습니다.

Redux나 다른 상태 관리 패턴을 사용하지 않는 경우에는 React의 내장 상태와 라이프사이클 메서드를 활용할 수 있습니다. 다음은 클래스 기반 컴포넌트와 상태를 사용하여 PrivateRoute 컴포넌트를 구현한 예시입니다:

class PrivateRoute extends React.Component {
  state = {
    loading: true,
    isAuthenticated: false,
  }

  componentDidMount() {
    asyncCall().then((isAuthenticated) => {
      this.setState({
        loading: false,
        isAuthenticated,
      });
    });
  }

  render() {
    const { component: Component, ...rest } = this.props;
    if (this.state.loading) {
      return <div>LOADING</div>;
    } else {
      return (
        <Route {...rest} render={props => (
          <div>
            {!this.state.isAuthenticated && 
              <Redirect to={{ 
                pathname: '/login',
                state: { from: this.props.location }
              }} />
            }
            <Component {...this.props} />
          </div>
        )} />
      )
    }
  }
}

이 구현에서는 컴포넌트 상태를 loading: true 및 isAuthenticated: false로 초기화합니다. componentDidMount 메서드 내에서 사용자 인증을 위한 비동기 호출을 수행합니다. 응답을 수신한 후 상태를 업데이트합니다. 비동기 호출이 진행 중일 때에는 로딩 인디케이터를 표시합니다.

React Hooks를 사용한 대체 해결책

함수형 컴포넌트와 React Hooks를 사용하는 경우, 다음은 PrivateRoute 컴포넌트의 대체 구현 방법입니다:

export const PrivateRoute = (props) => {
  const [loading, setLoading] = useState(true);
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  const { component: Component, ...rest } = props;

  useEffect(() => {
    const fetchData = async () => {
        const result = await asyncCall();
        setIsAuthenticated(result);
        setLoading(false);
    };
    fetchData();
  }, []);

  return (
    <Route
      {...rest}
      render={() =>
        isAuthenticated ? (
          <Component {...props} />
        ) : loading ? (
          <div>LOADING...</div>
        ) : (
          <Redirect
            to={{
              pathname: "/login",
              state: { from: props.location },
            }}
          />
        )
      }
    />
  );
};

이 구현에서는 useState 훅을 사용하여 컴포넌트 상태를 관리하고, useEffect 훅을 사용하여 컴포넌트가 마운트될 때 비동기 인증 호출을 트리거합니다. 한 번 더 말씀드리지만, 비동기 호출이 진행 중일 때에는 로딩 인디케이터를 표시합니다.

결론

상태 관리를 활용하여 인증 프로세스를 비동기로 처리하면, 인증 호출이 완료된 후에만 보호된 경로가 렌더링되도록 할 수 있습니다. 클래스 기반 컴포넌트 접근법이나 함수형 컴포넌트와 Hooks를 사용하는 접근법 중에서 선택하여 기존 코드베이스에 가장 적합한 솔루션을 선택하고 React Router v4를 사용하여 인증된 비동기 라우팅의 이점을 누리세요.

참고 자료 :

https://stackoverflow.com/questions/46162278/authenticate-async-with-react-router-v4

같은 카테고리의 다른 글 보기 :

reactjs