HOC
고차컴포넌트 : Higher-Order0Components
- 컴포넌트를 인자로 받아 새로운 컴포넌트로 변환해 반환하는 함수
- 컴포넌트 로직을 재사용하기 위함으로 같은 로직(데이터를 가져온다거나?)을 동일 적용해야할 때 사용하면 좋음
- Redux의 connect처럼 타 React 라이브러리에서 흔히 쓰임
- 원본 컴포넌트를 직접 변환하면 안된다
const withSubscription = (WrappedComponent) => {
const component = (props) => {
return <WrappedComponent {...props}/>
}
return component
}
/* 위의 코드를 짧게 줄여보자면
const withSubscription = (WrappedComponent) => (props) => {
return <WrappedComponent {...props}/>
}
*/
export default withSubscription;네이밍 룰은 with로 시작한다고하니 그렇게 쓰기
사용예시로..
로딩이나 접근권한도 처리할 수 있을 것 같다.
> 데이터 로딩
React18에 나온 Suspense를 함께 쓰는 예시로 써보았다 :)
const withLoading = (WrappedComponent) => {
const combinedProps = {
...props,
itemList
};
const component = (props) => {
return (
<Suspense fallback={<Loading />}>
<WrappedComponent {...combinedProps}/>
</Suspense>
)
}
}데이터를 보여주는 컴포넌트를 export default withLoading(pageComponent) 이렇게 감싸주면 끝 !
(로직만 잘 짜면 데이터를 가져오는 모든 컴포넌트에서 재활용도 가능하지 않을까 ?)
직접 컴포넌트를 변환하면 안되지만 props를 변경할 수 있어 데이터를 넣어주고 할 수는 있다.
> 권한분기
나는 로딩보단 회원/비회원 페이지접근을 위해 사용 했었었다.
const withAuth = (Component) => (props) => {
useEffect(() => {
// 로그인 유무
if(!isLogin) {
// 로그인하도록!!
}
},[])
return <Component {...props} />
}//mypage
const Mypage = () => {
return <></>
}
export default withAuth(Mypage)
물론 메뉴를 눌렀을때 회원만 접근 가능하다고 알려주지만,
주소로 바로 오는 경우 등을 생각하여 한번 더 막아줘야 하기에 사용하였다 :)
🧐 생각해볼 것
내 생각으론 어떠한 값에따라 받아온 컴포넌트를 보여주느냐 마느냐를 공통으로 사용하기에 좋은 재사용 컴포넌트 만드는 것 같다.
더 깊히 알게되면 활용할 방법이 더 있지않을까 싶고, 위 내용들또한 정확히 다 맞는지 보장은 못하니 추가로 공부가 필요한 부분인 것 같다.
공부하며 정리&기록하는 ._. 씅로그
Front-end