HOC, HOF
1.HOC(High Order Component)
HOC, 고차 컴포넌트는 컴포넌트 로직을 재사용하기위한 로직으로 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수이다. Redux같은 라이브러리에서 흔히 보인다. 클로저 함수로부터 확장된 개념이다.
권한분기 개념을 이 HOC를 이용해 적용할 수 있다.
import { useRouter } from "next/router";
import { useEffect } from "react";
export const withAuth = (Component) => (props) => {
const router = useRouter();
useEffect(() => {
if (!localStorage.getItem("accessToken")) {
alert("로그인 후 이용 가능합니다.");
router.push("/login");
}
}, []);
return <Component {...props} />;
};
accessToken
의 상태로 로그인 여부를 확인하는 withAuth 컴포넌트이다.(연습용으로 만든 코드라 localStorage를 이용했다.)
import { withAuth } from "../../src/components/commons/hocs/withAuth";
import BoardList from "../../src/components/units/board/list/list.container";
function BoardListPage() {
return <BoardList />;
}
export default withAuth(BoardListPage);
그리고 그 withAuth컴포넌트를 게시글 목록 페이지에 감싸주어 게시글 목록 페이지에 들어갔을 때 로그인이 되어있지 않다면 로그인페이지(/login)로 가도록 하였다.
2. HOF(High Order Function)
HOC와 마찬가지로 클로저 함수에서 확장된 개념이다. 이름에 F가 있는 것에서 알 수 있듯이 return
값이 컴포넌트가 아니라 함수이다.
export default function HofTest() {
const cats = ["푸딩", "애옹", "춘식"];
const onClickButton = (el) => (event) => {
console.log(el);
};
return (
<div>
{cats.map((el) => (
<button key={el} onClick={onClickButton(el)}>
{el}
</button>
))}
</div>
);
}
HOF 기능을 시험해보기 위해 만든 코드이다.
브라우저에서 실행해보면 각 버튼을 눌렀을 때의 el
값이 console에 찍힌다.
Author And Source
이 문제에 관하여(HOC, HOF), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ssjjyy/HOC-HOF저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)