2nd/00_Raw/Clean Code.md

Clean Code

📌 Brief Summary

클린 코드(Clean Code)는 소프트웨어를 작성할 때 누구나 읽기 쉽고 유지보수하기 편하도록 코드를 명확하고 단순하게 작성하는 방법론입니다 [1]. 프론트엔드 및 리액트(React) 생태계에서 애플리케이션의 규모가 커질 때 코드의 복잡성을 관리하고 예측 가능성을 높이기 위한 필수적인 기반 역할을 합니다 [2]. 이를 위해 개발자들은 간결하고 의미 있는 이름을 사용하며 깊게 중첩된 구조를 피해야 하고, 단일 프로젝트에 국한되지 않고 가독성을 보장하기 위해 모든 프로젝트에 적용해야 합니다 [3].

📖 Core Content

• 클린 코드의 기본 적용 방식:

  • 클린 코드는 명확성과 단순성을 최우선으로 합니다 [1]. React 컴포넌트를 작성할 때는 코드를 간결하게 유지하고, 목적이 명확히 드러나는 이름을 사용하며, 로직이 과도하게 깊게 중첩되는 구조를 피하는 것이 핵심입니다 [3].

• SOLID 원칙을 통한 React 코드의 구조화:

  • SRP (단일 책임 원칙): 컴포넌트나 훅은 오직 하나의 명확한 목적만 가져야 합니다 [4]. 만약 컴포넌트가 300줄을 넘어선다면, 이는 상태 관리, 데이터 페칭, 렌더링 등 너무 많은 역할을 짊어지고 있다는 신호이므로 더 작고 집중된 컴포넌트로 분리해야 합니다 [5].
  • OCP (개방/폐쇄 원칙): 기존 컴포넌트의 소스 코드를 직접 수정하는 대신, 컴포넌트 합성(composition)이나 children, render props 패턴을 사용하여 새로운 기능을 확장할 수 있어야 합니다 [4, 6].
  • ISP (인터페이스 분리 원칙): 컴포넌트는 자신이 사용하지 않는 props에 의존해서는 안 됩니다 [6, 7]. 큰 객체를 통째로 전달하기보다는 컴포넌트가 필요로 하는 명확하게 분리된 특정 데이터만 전달해야 결합도를 낮출 수 있습니다 [4, 6].
  • DIP (의존성 역전 원칙): 하나의 컴포넌트가 다른 컴포넌트에 직접적으로 의존하는 것을 피하고, props나 context를 통해 의존성을 주입받도록 설계해야 합니다 [4, 7].

• DRY, KISS, YAGNI 원칙과 균형:

  • DRY (Don't Repeat Yourself): 반복되는 코드를 피하고 재사용성을 높이기 위해, 공통 로직을 커스텀 훅이나 고차 컴포넌트(HOC)로 추출해야 합니다 [1, 3, 8, 9].
  • KISS (Keep It Simple, Stupid): 복잡성보다 단순함을 선택해야 합니다 [1]. 디버깅과 이해가 쉽도록 코드를 단순하게 유지해야 하며, 너무 이른 최적화를 피해야 합니다 [3, 9].
  • YAGNI (You Aren't Gonna Need It): 미래에 발생할지도 모르는 요구사항을 위해 복잡한 기능을 미리 구축해서는 안 됩니다 [10, 11]. 현재의 요구사항과 오늘 필요한 것들만 구현하여 추후의 데드 코드 발생을 최소화해야 합니다 [1, 3, 10].

🔗 Knowledge Connections

• Related Topics: SOLID Principles, React Architecture, Refactoring
• Projects/Contexts: Frontend Scalability, Large-scale React Systems
• Contradictions/Notes: 너무 철저하게 DRY 원칙을 지키려다 보면 불필요하고 복잡한 추상화를 낳게 되어, 오히려 코드를 단순하게 유지하라는 KISS 원칙을 위반할 위험이 있습니다. 소스는 이러한 문제를 방지하기 위해 특정 패턴이 최소 3번 반복될 때까지 기다렸다가 추상화하는 방식을 권장합니다 [8, 12].

---

Last updated: 2026-04-26