이번에 HOC의 사용방법에 대해서 알게 되었는데 기록을 남기고 싶어
글을 올립니다.
일단 고차함수란 파라미터를 함수로 받거나 return 값이 함수일 경우
고차 함수라고 합니다.
import React, { useEffect } from 'react';
const PageNaming = (Component, title = 'NYTimes::') => {
function PageNaming(props) {
useEffect(() => {
document.title = title;
}, []);
return <Component {...props} />;
}
return PageNaming;
};
export default PageNaming;
이 코드를 보면 pageNaming은 return으로 Component라는 컴포넌트를 반환하고 있는데
Compnent자체가 함수로 되어 있으므로 고차함수로 되어있다고 봐도 됩니다.
위의 코드는 title을 붙이기 위해서 사용했는데
이 사진처럼 search에 있을때는 이렇게 search가 보이고
import { useSelector } from 'react-redux';
import PageNaming from '../hoc/PageNaming';
import NewsWrapper from '../../styles/NewsStyle';
import News from './News';
const Clip = () => {
const clipList = useSelector((state) => state.news.clipList);
return (
<NewsWrapper>
<ul>
{clipList?.map((news) => {
return <News key={news._id} news={news} />;
})}
</ul>
</NewsWrapper>
);
};
export default PageNaming(Clip, 'NYTimes::News Clip');
(clip으로 이동했을때는 이러한 사진이 보인다.)
위의 코드를 보면 export default pageNaming으로 함수를 반환하고 있는데
이렇게 반환할경우 clip이라는 컴포넌트가 값으로 들어가고 title에는 'NYTimes::News Clip'
이 값이 들어가면서 위와같은 사진으로 보이게 되는 것입니다.
이러한 방법으로 고차함수를 사용할 수 있으며 고차함수를 사용할 경우 이러한 작업을 각페이지마다
반복하지 않아도 쉽게 사용할 수 있다는 장점이 있습니다