[React] 고차 컴포넌트

고차 컴포넌트 (HOC, higher-order component)는 컴포넌트 로직을 재사용하기 위한 React의 고급 기술이다. 고차 컴포넌트는 그 자체로는 React API가 아니다. 고차 컴포넌트는 React의 컴포넌트적 성격에서 나타나는 패턴이다.

 

구체적으로 고차 컴포넌트는 컴포넌트를 취하여 새로운 컴포넌트를 반환하는 함수이다.

 

컴포넌트가 UI를 props로 변환하는 반면, 고차 컴포넌트는 컴포넌트를 다른 컴포넌트로 변환한다.

다시 말해서 컴포넌트들의 부모가 되는 컴포넌트이다.

아래 컴포넌드처럼 props를 반환하여 리덕스를 보다 효율적이게 사용할 수 있다.

 

/* eslint-disable react-hooks/exhaustive-deps */
import React, { useEffect } from 'react';
import { auth } from '../_actions/user_actions';
import { useSelector, useDispatch } from "react-redux";

export default function (SpecificComponent, option, adminRoute = null) {
    function AuthenticationCheck(props) {

        let user = useSelector(state => state.user);
        const dispatch = useDispatch();

        useEffect(() => {
            //To know my current status, send Auth request 
            dispatch(auth()).then(response => {
                //Not Loggined in Status 
                if (!response.payload.isAuth) {
                    if (option) {
                        props.history.push('/login')
                    }
                    //Loggined in Status 
                } else {
                    //supposed to be Admin page, but not admin person wants to go inside
                    if (adminRoute && !response.payload.isAdmin) {
                        props.history.push('/')
                    }
                    //Logged in Status, but Try to go into log in page 
                    else {
                        if (option === false) {
                            props.history.push('/')
                        }
                    }
                }
            })

        }, [])

        return (
            <SpecificComponent {...props} user={user} />
        )
    }
    return AuthenticationCheck
}

• 위 컴포넌트는 컴포넌트를 인자로 받고 user props가 담긴 컴포넌트를 다시 반환해주는 컴포넌트이다(고차 컴포넌트)
• dispatch(auth())는 로그인한 사용자의 Info를 콜백한다.(userId, email, isAuth 등)
• return의 SpecificComponent는 user props 담긴 컴포넌트가 반환된다.
• 그리고 APP.JS에서 컴포넌트를 라우트할때 Auth에서 리턴해준 컴포넌트를 설정해준다.

이걸로 얻을 수 있는 장점은 Auth로 반환된 컴포넌트는 props가 담긴채로 반환되기 때문에 모든 컴포넌트에서 쓰이는 state를 일일이 Redux의 connect가 필요없이 조회하여 사용할 수 있게된다.