[Korean FE Article] 리액트의 개방-폐쇄 원칙: 확장 가능한 컴포넌트 만들기
소개
이 글은 SOLID 원칙 중 개방-폐쇄 원칙(Open-Closed Principle)을 리액트 컴포넌트 설계에 적용하는 방법을 다룹니다. "확장에는 열려 있고, 변경에는 닫혀 있어야 한다"는 원칙을 실제 리액트 코드로 구현하는 구체적인 예시를 제공합니다.
글은 Button 컴포넌트에서 새로운 variant를 추가할 때마다 기존 코드를 수정해야 하는 안티패턴을 먼저 보여줍니다. 이어서 ButtonBase라는 기본 컴포넌트를 만들고 이를 확장하여 다양한 버튼 변형을 생성하는 방식으로 리팩터링하는 과정을 설명합니다.
또한 컴포넌트 합성 패턴을 활용한 Card 컴포넌트와 고차 컴포넌트(HOC)를 통한 확장 방법도 소개합니다. 이러한 원칙들을 무조건적으로 적용하라는 것이 아니라, 고전적인 소프트웨어 엔지니어링 원칙과 현대 개발 실무 사이의 간극을 좁히려는 시도라고 겸손하게 밝히고 있습니다.
리액트 컴포넌트의 재사용성과 확장성을 높이고 싶은 개발자들에게 유용한 내용입니다.
목차
소개
폐쇄적인 컴포넌트의 문제점
개방적인 컴포넌트 만들기
컴포넌트 합성 패턴
확장을 위한 고차 컴포넌트
개방-폐쇄 원칙을 따르는 커스텀 훅
테스트에서의 이점
핵심 요약
개방-폐쇄 원칙과 “상속보다 합성”
결론
업데이트: 친근한 안내 및 알림