HOC(고차함수 사용 예시)

이번에 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'
이 값이 들어가면서 위와같은 사진으로 보이게 되는 것입니다.

이러한 방법으로 고차함수를 사용할 수 있으며 고차함수를 사용할 경우 이러한 작업을 각페이지마다
반복하지 않아도 쉽게 사용할 수 있다는 장점이 있습니다