프론트엔드
Higher-Order Components는 여전히 유용하다
두줄요약
반복되는 URL 파라미터 검증과 조건부 렌더링을 HOC로 분리한 사례를 소개했습니다.\n유효한 값을 props로 주입해 컴포넌트 내부 조건문과 문맥 분산을 줄였습니다.
문제 상황
- URL path의
somethingId가 없을 때 렌더링을 막아야 하는 요구사항의 다수 컴포넌트 반복 - Hooks 호출 규칙과 추가 로직으로
somethingId조회·검증 코드의 물리적 분리 - 컴포넌트 내부의 반복 조건문과 유지보수성 저하 우려
해결 방법
useParams로somethingId를 조회하고 값 부재 시null을 반환하는withSomethingIdHOC 구성- 유효한
somethingId를 감싼 컴포넌트의 필수 props로 주입 - 대상 컴포넌트의 props 타입 확장과 export 시 HOC 래핑으로 공통 요구사항 적용
선택 이유
- Hooks만으로는 조건부 렌더링 책임을 컴포넌트 밖으로 분리하기 어려운 한계
somethingId관련 로직의 응집과 반복 코드 제거에 적합한 컴포넌트 생성 패턴
적용해볼 점
- Hooks·HOC·Render Props를 상호 배타적 수단이 아닌 상황별 재사용 패턴으로 선택
- 특정 필수 URL 파라미터 검증과 props 주입이 반복되는 화면에 HOC 적용
