---
title: 리액트 클린 코드 및 개발 에티켓
category: Software Architecture
tags: [Clean Code, Etiquette, Best Practice, Readable Code]
created: 2026-04-20
---

# [[React_Clean_Code_Best_Practices]] (리액트 클린 코드)

## 📌 한 줄 통찰 (The Karpathy Summary)
> 가독성 좋은 코드는 '컴퓨터'가 이해하는 코드가 아니라, '나중에 이 코드를 고칠 동료(혹은 미래의 나)'가 숨 쉬듯 읽어내려갈 수 있는 코드다.

## 📖 구조화된 지식 (Synthesized Content)
- **Early Return 패턴**: 
    - 중첩된 `if-else`는 지옥이다. 예외 상황(Loading, Error)을 먼저 `return`으로 쳐내면, 함수의 본체는 항상 가장 중요한 로직만 남게 된다.
- **Props Destructuring (구조 분해 할당)**:
    - `props.user.name` 처럼 경로를 길게 쓰는 대신, 함수의 인자 단계에서 `{ user: { name } }` 처럼 분해하라. 코드가 숨을 쉬기 시작한다.
- **Explicit Naming (명시적 네이밍)**:
    - 핸들러 함수는 `handle[Action]` (예: `handleSearch`), 비즈니스 함수는 `on[Action]` (예: `onSearchSubmit`)으로 구분하여 책임 소재를 명확히 한다.
- **조건부 렌더링 에티켓**:
    - `&&` 연산자 대신 삼항 연산자(`? :`)를 권장한다. 특히 `0 && <Component />` 시 화면에 숫자 0이 출력되는 대참사를 방지하기 위함이다.

## ⚠️ 모순 및 업데이트 (RL Update)
- 과도한 추상화는 오히려 독이다. 코드가 3줄인데 함수 5개로 쪼개는 것은 가독성을 해친다. '직관성'이 '분리'보다 우선할 때가 있음을 명심하라.

## 🔗 지식 연결 (Graph)
- Related: [[Collaboration_Governance]] , [[System_Debugging_Protocol]]
- Foundation: [[React_Mental_Model]]