[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)
을 작성하면 된다.
Author And Source
이 문제에 관하여([React] HOC 고차 컴포넌트 (로그인 별 Route)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@wjd489898/React-HOC-고차-컴포넌트저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)