Antigravity Agent
3.8 KiB
3.8 KiB
📌 Brief Summary
개방-폐쇄 원칙(Open/Closed Principle, OCP)은 소프트웨어 개체(클래스, 모듈, 함수 등)가 확장에는 열려 있어야 하고, 수정에는 닫혀 있어야 한다는 설계 원칙이다. 이는 기존 소스 코드를 변경하지 않고도 시스템의 기능을 확장할 수 있어야 함을 의미하며, React에서는 컴포넌트 합성(Composition)과 주입 패턴을 통해 이를 실현한다.
📖 Core Content
- 확장성과 폐쇄성 (Open & Closed)
- 신규 기능 추가 시 기존 코드를 건드리지 않음으로써 의도치 않은 버그 발생(Side Effects)을 원천 차단한다.
- 기존 기능의 안정성을 유지하면서도 변화하는 요구사항에 유연하게 대응하는 것이 핵심 목적이다.
- React에서의 구현: 컴포넌트 합성 (Composition)
- 상속이 아닌 합성을 권장하는 React의 특성에 따라,
childrenprop을 활용하여 외부에서 렌더링 내용을 주입받는 방식으로 확장성을 확보한다. - 예: 기본 Modal 컴포넌트를 수정하지 않고, 내부 콘텐츠를
children으로 전달하여 다양한 형태의 모달로 확장.
- 상속이 아닌 합성을 권장하는 React의 특성에 따라,
- Render Props 및 Slot 패턴
- 구체적인 로직이나 UI 조각을 함수나 객체 형태로 주입받아 컴포넌트 내부 소스 코드의 수정 없이 동작을 변경한다.
- 선언적 추상화
- 조건문(
if/else)을 통해 컴포넌트 내부에서 모든 케이스를 처리하는 대신, 외부에서 주입된 컴포넌트가 각자의 책임을 다하도록 설계한다.
- 조건문(
⚖️ Trade-offs & Caveats
- 추상화 오버헤드: OCP를 엄격히 지키기 위해 모든 컴포넌트를 합성 구조로 만들면, 컴포넌트 트리가 깊어지고
props전달 경로가 복잡해지는 'Prop Drilling'이나 인지적 부하가 발생할 수 있다. - KISS 원칙과의 충돌: 단순한 기능 추가를 위해 복잡한 Render Props나 고차 컴포넌트(HOC)를 도입하는 것은 'Keep It Simple' 원칙에 어긋날 수 있으므로 적절한 균형이 필요하다.
- 초기 설계 비용: 확장을 고려한 인터페이스 설계는 초기 개발 시간을 더 많이 소요하게 만들며, 미래에 발생하지 않을 확장을 대비하는 YAGNI 위반 가능성이 존재한다.
🔗 Knowledge Connections
Related Concepts
- Component Composition: OCP를 실현하는 React의 핵심 기술 (관계: 실천 방법)
- SOLID Principles: OCP를 포함한 5대 설계 원칙 (관계: 상위 철학)
- Render Props / Children Prop: 기능 주입을 위한 구체적 API (관계: 구현 도구)
Deeper Research Questions
- 컴포넌트 합성을 통해 OCP를 준수할 때, 깊은 트리에 의한 리렌더링 성능 저하를 방지하기 위한 메모이제이션 전략은?
- 함수형 패러다임에서 'Dependency Injection' 개념이 OCP 구현에 어떻게 적용되는가?
- 수백 개의 조건부 UI가 필요한 엔터프라이즈 환경에서 OCP를 지키기 위한 'Strategy Pattern'의 프론트엔드적 해석은?
- 코드 수정 없이 확장만 허용하는 원칙이 대규모 리팩토링이나 기술 스택 교체 시에는 어떻게 유연하게 적용되어야 하는가?
- CSS-in-JS 환경에서 스타일 확장을 OCP 관점에서 설계하는 모범 사례는?
Practical Application Contexts
- UI 라이브러리 설계: 공통 버튼, 모달, 테이블 컴포넌트 제작 시 스타일과 동작을 외부에서 주입 가능하도록 설계.
- 복잡한 폼(Form) 엔진: 새로운 입력 타입이 추가되어도 메인 폼 로직을 수정할 필요 없는 플러그인 방식 구조 구축.
Adjacent Topics
- Single Responsibility Principle (SRP)
- KISS (Keep It Simple, Stupid)
- Inversion of Control (IoC)