📌 배경
- 서비스 개발을 하던 중에, 유저가 페이지에 접근할 때 로그인이 되어 있는 상태로만 접근할 수 있는 페이지가 있고, 로그인이 되어 있지 않으면 특정 페이지를 접근하지 못하게 하고, login 하는 화면으로 리다이렉트 시켜야하는 상황이었다.
📌 고차 컴포넌트 (HOC)
- 고차 컴포넌트 (HOC, Higher-Order Component)는 컴포넌트 로직을 재사용하기 위해 사용되고 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수이다.
- 컴포넌트를 인자로 받아서 어떤 로직을 거쳐서 다시 반환하는 함수이다.
- 하이오더 컴포넌트(HOC)라고 많이 불린다.
- 로그인이 필요한 서비스가 필요한 페이지(컴포넌트)를 리턴하기 전에 로그인을 했는지 확인할 수 있는 고차 컴포넌트를 생성하여 로그인을 하지 않았으면 로그인 페이지를 리턴하고, 로그인을 했으면 기존 로그인 필요한 서비스가 필요한 페이지를 리턴한다.
로그인을 필수로하는
Profile컴포넌트를 리턴하기 전에requiredAuth라는 고차 컴포넌트가 로그인 여부를 판단하는 로직을 거쳐 로그인을 했으면 그대로Profile컴포넌트를 리턴하고, 로그인을 하지 않았으면Login컴포넌트를 리턴한다.
📌 주의 사항
- 컴포넌트의
return안에서 고차 컴포넌트를 사용하면 안된다. - 정적 메서드는 반드시 따로 복사해야 한다.
- ref는 전달되지 않는다.
- React.forwardRef API 사용
📌 구현
📄 로그인 상태를 체크하는 함수 구현
export const isLoggedIn = () => {
/// 세션, 쿠키, 로컬 스토리지 등을 사용하여 로그인 상태를 확인
/// 로그인한 생태인 경우 true, 로그인하지 않은 상태일 경우 false
};📄 페이지 접근 제어를 위한 고차 컴포넌트(HOC) 구현
- 로그인 상태 체크를 전역으로 관리되는 Recoil의 Atom의 AccessToken으로 판단했고, 고차 컴포넌트 내에 구현하였다.
// requiredAuth.js
import { useRecoilState } from "recoil";
import { accessTokenAtom } from "../recoil/auth";
import LoginPage from "../page/Login/LoginPage";
const requiredAuth = (Component) => {
return (props) => {
const [isLoggedIn, setIsLoggedIn] = useRecoilState(accessTokenAtom);
if (!isLoggedIn) {
return <LoginPage />;
}
return <Component {...props} />;
};
};
export default requiredAuth;
📄 접근 제어가 필요한 컴포넌트를 고차 컴포넌트로 감싼다
- 예를 들어 프로필 페이지에 접근할 떄 로그인 여부를 파악해야 한다면,
// Profile.jsx
import React from 'react';
import requiredAuth from './requireAuth';
const ProfilePage = () => {
return (
<div>
{/* 페이지 컨텐츠 */}
</div>
);
};
export default requiredAuth(ProfilePage);- 로그인을 하지 않고
Profile페이지에 접근하게 되면 로그인 페이지로 리다이렉트하게 된다.
📌 HOC vs Hook
- HOC는 특정 컴포넌트들을 한 데에 묶어 해당 컴포넌트에 일회성으로 발생할 수 있는 로직을 재사용하여 적용할 것이다.
- Custom Hook은 각 개별 컴포넌트에서 각각 적용되어야 하는 hook이다.
- 따라서, HOC는 정적인, Props가 많이 필요하지 않고 변경될 가능성이 적은 일회성 로직이 여러가지 컴포넌트에 겹쳐서 사용되고 있을 때 사용하면 좋을 것이다.
- Custom Hook은 각 개별 컴포넌트에 따라 동작이 달라질 때, Props가 여러 개이거나 한 경우에 사용하면 좋을 것이다.
- HOC와 Hook을 경우에 맞게 사용하면 될 것 같다.
📌 참고
https://ko.legacy.reactjs.org/docs/higher-order-components.html
https://velog.io/@leitmotif/React%EC%97%90%EC%84%9C%EC%9D%98-%EA%B3%A0%EC%B0%A8-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8
Frontend Developer