# [[SOLID Principles in React]]

## 📌 Brief Summary
SOLID 원칙은 단일 책임(SRP), 개방-폐쇄(OCP), 리스코프 치환(LSP), 인터페이스 분리(ISP), 의존성 역전(DIP)의 다섯 가지 설계 원칙을 의미하는 약어입니다 [1, 2]. 본래 객체 지향 프로그래밍(OOP)을 위해 고안되었지만, 함수형 프로그래밍이 주도하는 현대 React 생태계에서도 컴포넌트의 유지보수성, 가독성, 확장성을 높이는 데 필수적으로 적용됩니다 [2, 3]. 이 원칙은 주로 명확한 구조와 확장성이 요구되는 크고 복잡한 애플리케이션을 개발할 때 효과적으로 사용됩니다 [4].

## 📖 Core 대Content
*   **단일 책임 원칙 (SRP, Single Responsibility Principle)**
    React 컴포넌트나 훅은 단 하나의 명확한 목적을 가져야 하며, 변경되어야 하는 이유도 단 하나여야 합니다 [5, 6]. 예를 들어, 300줄이 넘어가는 컴포넌트는 상태 관리, 데이터 페칭, 복잡한 JSX 렌더링 등 너무 많은 작업을 수행하고 있을 가능성이 높습니다 [5]. 이를 더 작고 한 가지 역할만 하는 컴포넌트나 커스텀 훅으로 분리하면 코드의 명확성과 테스트 가능성이 크게 향상됩니다 [2, 5].

*   **개방-폐쇄 원칙 (OCP, Open/Closed Principle)**
    소프트웨어 엔티티는 확장을 위해서는 열려 있어야 하지만 수정을 위해서는 닫혀 있어야 합니다 [2]. React에서는 기존 컴포넌트의 내부 코드를 직접 수정하는 대신, 컴포넌트 합성(composition), `children` prop, 또는 렌더 프롭스(render props)를 사용하여 새로운 기능을 유연하게 확장하는 방식으로 구현됩니다 [2, 6, 7].

*   **리스코프 치환 원칙 (LSP, Liskov Substitution Principle)**
    하위(자식) 타입의 객체가 상위(부모) 타입의 객체를 코드를 깨뜨리지 않고 완벽하게 대체할 수 있어야 한다는 원칙입니다 [2, 8]. React에서는 하위 컴포넌트가 기본 컴포넌트를 원활하게 대체할 수 있도록 설계해야 함을 의미합니다 [6].

*   **인터페이스 분리 원칙 (ISP, Interface Segregation Principle)**
    클라이언트는 자신이 사용하지 않는 인터페이스나 데이터에 의존해서는 안 됩니다 [2]. React에서는 컴포넌트가 자신이 사용하지 않는 불필요한 props를 받지 않아야 하며, 책임을 명확히 분리하여 전달해야 합니다 [6]. 예를 들어, 단지 `username` 문자열 하나만 필요한 하위 컴포넌트에 거대한 `user` 객체 전체를 전달하면 불필요한 결합이 발생하므로 특정 데이터만 넘겨주는 것이 바람직합니다 [2, 7].

*   **의존성 역전 원칙 (DIP, Dependency Inversion Principle)**
    구체적인 구현 클래스가 아닌 추상화나 인터페이스에 의존해야 한다는 원칙입니다 [2, 9]. React 애플리케이션에서는 컴포넌트가 다른 컴포넌트에 직접적으로 강하게 의존하게 만드는 대신, props를 통해 의존성을 주입(inject)하거나 Context API 같은 공통 추상화를 활용하여 의존성을 관리해야 합니다 [2, 6].

## 🔗 Knowledge Connections
- **Related Topics:** [[Clean Code]], [[DRY Principle]], [[KISS Principle]], [[YAGNI Principle]], [[Component Composition]], [[Custom Hooks]]
- **Projects/Contexts:** [[Large-scale Application Architecture]], [[Refactoring Legacy React Codebases]]
- **Contradictions/Notes:** 소스 간에 리스코프 치환 원칙(LSP)의 React 적용 가능성에 대한 작은 관점 차이가 있습니다. 한 소스는 서브 컴포넌트가 베이스 컴포넌트를 원활히 대체하는 방식으로 LSP를 적용할 수 있다고 설명하지만 [6], 다른 소스는 현대 React에서 클래스 상속을 거의 사용하지 않는 함수형 접근 방식을 취하기 때문에 이 원칙이 실제로 적용되는 경우는 드물다고 지적합니다 [2].

---
*Last updated: 2026-04-26*