3.2 사용자 정의 훅과 고차 컴포넌트 중 무엇을 써야 할까?
자바스크립트에서 재사용 로직을 작성하는 방식 외에도 리액트에서는 재사용할 수 있는 로직을 관리할 수 있는 두가지 방법이 있다. 사용자 정의 훅과 고차 컴포넌트이다. 어느 상황에서 어떤 것을 선택해야 하는지 살펴보자.
사용자 정의 훅
서로 다른 컴포넌트 내부에서 같은 로직을 공유하고자 할 때 주요 사용된다.
훅의 이름은 use로 시작한다는 규칙이 있으며, 개발 시 해당 함수가 리액트 훅이라는 것을 바로 인식할 수 있다는 장점도 있다.
고차 컴포넌트
컴포넌트 자체의 로직을 재사용하기 위한 방법이다. 사용자 정의 훅은 리액트 훅을 기반으로 하므로 리액트에서만 사용할 수있는 기술이지만 고차 컴포넌트는 리액트 뿐만 아니라 자바스트립트 환경에서 널리 쓰일 수 있다.
리액트에서 가장 유명한 고차 컴포넌트는 리액트에서 제공하는 API 중 하나인 React.memo이다.
React.memo란?
리액트 컴포넌트의 렌더링 조건 중 하나로 부모 컴포넌트가 렌더링 될 때 자식 컴포넌트도 렌더링 되는 경우가 있다. 이는 자식 props 변경 여부와 상관없이 발생한다.
이런 불필요한 렌더링을 방지하기 위해 만들어진 고차 컴포넌트가 React.memo이다. 렌더링 하기에 앞서 props를 비교해 이전과 props가 같다면 렌더링 자체를 생략하고 이전에 기억해 둔 컴포넌트를 반환한다.
고차 함수 만들어보기
고차 함수의 사전적인 정의는 "함수를 인수로 받거나 결과로 반환하는 함수"이다.
가장 대표적인 예로 Array.prototype.map을 들 수 있다.
function add(a) {
return function(b){
return a +b
}
}
const result = add(1); // result는 앞서 반환한 함수를 가리킨다.
const result2 = result(2); // 비로소 a와 b를 더한 3이 반환된다.다음은 직접 고차함수를 정의해보았다.
useState의 원리와 비슷하게, a=1이라는 정보가 담긴 클로저가 result에 포함됐고, result(2)를 호출하면서 이 클로저에 담긴 a=1인 정보를 활용해 1+2의 결과를 반환할 수 있게 됐다.
고차 함수를 활용한 리액트 고차 컴포넌트 만들어보기
고차 컴포넌트는 컴포넌트 전체를 감쌀 수 있다는 점에서 사용자 정의 훅보다 더욱 큰 영향력을 컴포넌트에 미칠 수 있다. 단순히 값을 반환하거나 부수 효과를 실행하는 사용자 정의 훅과는 다르게, 고차 컴포넌트는 컴포넌트의 결과물에 영향을 미칠 수 있는 다른 공통된 작업을 처리할 수 있다.
다음과 같은 주의사항이 존재한다.
- with로 시작하는 이름을 사용해야 한다.
- 부수효과를 최소화해야 한다.
- 여러 개의 고차컴포넌트로 컴포넌트를 감싸는 상황을 최소화해야 한다.
사용자 정의 훅과 고차 컴포넌트 중 무엇을 써야 할까?
둘의 공통점은 어떠한 로직을 공통화해 별도로 관리할 수 있다는 것에 있다. 다음은 차이점에 대해 알아보자.
사용자 정의 훅이 필요한 경우
단순히 useEffect, useState와 같이 리액트에서 제공하는 훅으로만 공통 로직을 격리할 수 있다면 사용자 정의 훅을 사용하는 것이 좋다.
그 자체로는 렌더링에 영향을 미치지 못하기 때문에 사용이 제한적이므로 반환하는 값을 바탕으로 무엇을 할지는 개발자에게 달려 있다. 따라서 컴포넌트 내부에 미치는 영향을 최소화해 개발자가 훅을 원하는 방향으로만 사용할 수 있다는 장점이 있다.
고차 컴포넌트는 어떤 결과물을 반환할지는 고차 컴포넌트를 직접 보거나 실행하기 전까지는 알 수 없다. 대부분의 고차 컴포는트는 렌더링에 영향을 미치는 로직이 존재하므로 사용자 정의 훅에 예측하기가 어렵다.
고차 컴포넌트를 사용해야 하는 경우
함수 컴포넌트의 반환 값, 렌더링의 결과물에도 영향을 미치는 공통 로직이라면 고차 컴포넌트를 사용하여 공통화된 렌더링 로직을 처리하는 것이 좋다.
