HOC를 사용할 때 가장 어려운 점은 HOC로 부터 내려받는 props가 아니라, 다른 로직을 위한 props를 받는 경우이다. (사실 HOC보다는 제네릭 사용으로 인해 생긴다고 생각한다.) 먼저, HOC를 위해 구현한 withLatestVersion.tsx를 보면서 어떻게 이 함수가 랩핑할 컴포넌트의 props를 추출하는 지 살펴보아야한다. // withLatestVersion.tsx import React, { useEffect, useState } from 'react'; import { DataState, LtsVersionType } from '../type/type'; import { useQuery } from '@apollo/client'; import { LOL_PATCH_VERSIONS..

React에 HOC 라는 컴포넌트가 실무에서 auth 용도로 사용된다는 걸 얼핏 봤었다. HOC의 구조가 특이하다보니 자료를 찾아보면서도 이렇게 쓰면 되겠다 싶은 느낌이 잘 안오기도 했지만, 언제 사용하면 좋겠다 정도의 느낌만 있었다. 이번에 프로젝트를 하면서 HOC를 써보기 좋은 구조가 나와서 직접 구현해보고 공유해보려고 한다. 1. HOC가 뭐고 언제 유용한가요? 공식 문서에는 아래와 같이 나와있다. 고차 컴포넌트(HOC, Higher Order Component)는 컴포넌트 로직을 재사용하기 위한 React의 고급 기술입니다. 고차 컴포넌트(HOC)는 React API의 일부가 아니며, React의 구성적 특성에서 나오는 패턴입니다. 구체적으로, 고차 컴포넌트는 컴포넌트를 가져와 새 컴포넌트를 반환..