React – HOC (Higher Order Components) : 코드 재사용하기

HOC란?

A higher-order component (HOC) is an advanced technique in React for reusing component logic. 

– React 홈페이지(https://ko.reactjs.org/docs/higher-order-components.html)

React홈페이지에도 있는 것처럼 HOC는 컴포넌트 로직의 재사용을 위해 사용하는 기술로, argument로 받은 컴포넌트를 특정 기능을 실행한 후 결과에 따라 리턴하는 함수이다.

사실 이름만 들었을 때는 고차원 컴포넌트가 이해가 안갔는데 예시 하나를 따라하고 나니 이해가 갔다.

HOC 이해하기

먼저 HOC를 배제하고, Client에서 라우팅을 하는 경우를 생각해보자.(react-router)

메인, 로그인, 글쓰기 컴포넌트 등이 있을 거고, 권한에 따라서 라우팅을 허용할 경우와 다시 되돌리는 경우가 있을 것이다.

만약 client가 로그인을 한 경우엔 로그인 페이지로 이동하려해도 다시 메인 페이지로 돌아와야 한다.

로그인을 하지 않은 경우엔 글쓰기 페이지로 이동하려 할때 로그인 페이지를 거쳐서 가야할 것이다.

그렇다면 그 권한을 확인하기 위해선 개발의 방식에 따라 cookie나 session등에 저장한 정보를 계속해서 불러와 확인하는 로직을 계속해서 구현할텐데

해당 로직을 HOC로 두게 되면, 개발의 중복을 막고 재사용을 할 수 있는 것이다!

이 외에도 HOC는 굉장히 자주 쓰인다.

HOC 코드 예시

import React, {useEffect} from 'react'
import {auth_user} from '../_actions/actions'
import {useSelector, useDispatch} from 'react-redux'

export default function (Component, isLogin) {
    
    function Authentication(props){
        let user = useSelector(state => state.user);
        //user state 사용
        const dispatch = useDispatch();

        useEffect(() => {
            dispatch(auth_user())
                .then(res => {
                    if(!res.payload.id) {
                        if(isLogin) { 
                            props.history.push("/login")
                        }
                    }
                    else {
                        if(isLogin=== false) {
                            props.history.push("/")
                        }
                    }
                })
        }, [])

        return (
            <Component {...props} user={user} />
        )
    }
    return Authentication
}

위에서 얘기한 로직을 코드로 구현하였다.

user에 관한 state를 가져와서, authentication 정보를 확인한다.

만약 로그인이 안된 경우(state에 id가 없을 경우) 로그인이 필요한 페이지로는 갈 수 없다. 반대의 경우도 마찬가지!

<Switch>
      <Route exact path="/" component={Auth(Main, null)} />
      <Route exact path="/login" component={Auth(Login, false)}/>

      <Route exact path="/upload" component={Auth(UploadForm, true)} />
</Switch>

구현한 HOC는 routing할 때 이렇게 사용할 수 있다.