[React] HOC 고차 컴포넌트 (로그인 별 Route)

도입배경

로그인 여부에 따라 Route별 권한을 주기 위해 당시 개발했던 서비스는 로그인한 유저만 서비스를 이용 할 수 있게 기획하였다.

HOC(Higher-Order-Component)?

• 컴포넌트를 인자로 받아서 다른 컴포넌트를 반환하는 고차함수
• HoC의 원리는 파라미터로 컴포넌트를 받고, 함수 내부에서 새 컴포넌트를 만든 다음에 해당 컴포넌트 안에서 파라미터로 받아온 컴포넌트를 렌더링 (이 설명은 해당 코드를 보면 이해하기 쉬울 것이다.)

HOC의 장점: 코드의 재사용성

도입한 프로젝트에서 HOC는 auth를 구별하는 부분에 적용하였다.

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';

export default function (SpecificComponent, option) {
  function AuthenticationCheck(props) {
    let user = useSelector(state => state.user);
    let isAuth = localStorage.getItem('token');
    console.log(isAuth === null);

    //Not Loggined in Status
    if (isAuth === null) {
      if (option) {
        props.history.push('/login');
      }
      //Loggined in Status
    } else {
      if (option === false) {
        props.history.push('/main');
      }
    }

    return <SpecificComponent {...props} user={user} />;
  }
  return AuthenticationCheck;
}

만약 localstorage에 있는 값이 null이면 로그인 하지 않았다고 판단하고 /login route로 이동한다.

...
function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <div style={{ paddingTop: '0', minHeight: 'calc(98vh - 45px)' }}>
        <NavBarPage />
        <Switch>
          <Route exact path="/" component={Auth(MainPage, true)} />
          <Route exact path="/login" component={Auth(LoginPage, false)} />
          <Route exact path="/register" component={Auth(RegisterPage, false)} />
          <Route
            exact
            path="/register/taste"
            component={Auth(RegisterTastePage, false)}
          />
...

App.js에 속한 코드 일부분이다.

• Auth() 에서 원하는 페이지를 import하고

null -> 누구나 출입이 가능한 페이지
true -> 로그인한 유저만 출입이 가능한 페이지
false -> 로그인한 유저가 account 페이지 가려고 하면 막아준다

• ex) 만약 로그인 되어있던지 되어 있지 않던지 mainpage에 접근 가능하게 하려면Auth(MainPage,null) 을 작성하면 된다.