리액트 디자인 패턴 - Higher-Order Component Pattern

📘들어가며..

지난 번의 Container and Presentational Components Pattern에 이어서 Higher-Order Component Pattern에 대해서 알아보자. 

HOC는 들어본 사람도 있겠지만 우리 말로 고차컴포넌트라고 한다.

고차(Higher-Order)라는 단어는 고차함수를 공부하면서 많이 들어봤을 것이다.

 

그럼 고차 함수는 무엇인가?

고차 함수(Higher order function)는 함수를 인자로 전달받거나 함수를 결과로 반환하는 함수를 말한다.
다시 말해, 고차 함수는 인자로 받은 함수를 필요한 시점에 호출하거나 클로저를 생성하여 반환한다.
자바스크립트의 함수는 일급 객체이므로 값처럼 인자로 전달할 수 있으며 반환할 수도 있다.

 

그럼 이제 HOC에 대해서 어떻게 활용하는 지 알아보자

 

 

📖Higher-Order Component Pattern이란?

고차 컴포넌트(Higher Order Component)는 컴포넌트를 반환하는 '함수'이다.

컴포넌트를 인자로 받아 그것을 반환하기도 한다.

 

고차 컴포넌트를 사용하는 기본적인 이유는 추상화이다.

특정 기능이 여러 컴포넌트에 중복되어 나타날 경우

그것을 고차 컴포넌트로 한번 wrapping하면 추상화 계층을 제공할 수 있다.

 

예를 들어 유저가 페이지에 접근할 때 해당 유저가 로그인 중인지 여부, 혹은 특정 게시글이나 댓글의 작성자인지 확인하는 작업의 해결책 중 하나로 고차 컴포넌트를 사용할 수 있다.

 

👨‍💻HOC의 예시

먼저 아래 코드를 보자

이 코드의 문제점을 아시겠나요?

두 개의 컴포넌트를 봤을 때  중복된 로직이 반복되고 있는 것을 볼 수 있다.

 

이때 사용하는 것이 Higher-Order Component Pattern 이다!

 

👨‍💻동일 로직을 여러 컴포넌트에 제공하기

그럼 HOC 패턴을 적용한 코드를 보여주도록 하겠다.

간단하게 과정을 설명하면 아래와 같다.

1. withAuth 함수는 두 개의 인수를 받는다
   1. Component: 감싸고자 하는 원본 컴포넌트.
   2. needToLogin: 로그인 필요 여부를 결정하는 불리언 값 (기본값은 false).
2. withAuth 함수는 새로운 함수 컴포넌트를 반환한다. 이 반환된 함수 컴포넌트는 props를 매개변수로 받는다.
3. 반환된 함수 컴포넌트 내부에서 useAuth 훅을 호출하여 현재 로그인 상태(isLoggedIn)를 가져온다.
4. needToLogin이 true이고 isLoggedIn이 false인 경우, 로그인 필요 메시지를 렌더링한다.
5. 그렇지 않으면, 전달받은 props를 원본 Component에 전달하여 렌더링한다.

 

🤔궁금할 수도..?

여기서 나는 살짝 이해를 못한 부분이 있었다.

  return (props)=>{ ... }

저 props 매개변수는 어디서 가져왔으며 어떤 props를 의미하는 것일까? 였다.

어찌보면 당연히 알아야 하는 부분이지만 누가 설명하라고 한다면 잘 설명할 수 없을 것 같아 찾아보았다.

 

일단 알기쉽게 설명하기 위해 위 HOC 패턴 코드를 풀어서  작성하면 아래와 같다.

일단 withAuth함수는 WithAuthComponent라는 함수를 반환한다.

WithAuthComponent 함수는 props라는 인자를 받는다.

WithAuthComponent 함수 내부에서는 공통된 로직을 수행한다.

WithAuthComponent 함수는 함수형 컴포넌트를 반환한다.

그리고 아래와 같이 사용한다.

그럼 SecretPage는 WithAuthComponent 함수이다.

SecretPage는 props를 인수 넣어줄 수 있다.

SecretPage를 선언할 당시의 withAuth의 SomeComponent와 true값은 클로저로 인해 기억되고 있다.

SecretPage는 아래와 같이 사용하게 된다.

message가 포함되어있는 props는 원본 컴포넌트인 SomeComponent의 props로 들어가게 되는 것이다.

 

그림으로는 아래와 같다.

 

 

 

 

📘마무리하며..

HOC의 특징을 정리하면 아래와 같다.

• 고차 컴포넌트(HOC)는 조합하여 활용할 수 있다.

• 앱의 요구사항이 비슷하면서 여러 컴포넌트에 필요한 경우 사용하면 좋다.

• 컴포넌트의 추가적인 로직 구성 없이 원하는 프로세스를 넣을 수 있다.

• Hooks는 컴포넌트의 내부에서 동작을 추가하지만 HOC는 외부에서 기능을 제공한다.

• 컴포넌트 트리가 깊어지는 HOC를 Hooks로 일부분 대체하여 줄일 수 있다

 

이렇게 HOC를 배워보았다.

일단 공통된 로직이 있다면 HOC를 사용해서 중복을 줄일 수 있다는 것을 잘 기억해야할 것 같았다.

 

그리고 가끔 이런 패턴이나 기능을 만들 때 클로저가 간혹 나올 때가 있다.

클로저를 알면서도 잘 사용하지 않으니까 이렇게 사용 예시를 보면 처음에 이해하기가 어려운 상황도 있다.

이렇게 다양한 패턴이나 기능을 보면서 클로저와 같이 기본적인 원리 또한 공부해야겠다고 생각됐다