29 lines
1.7 KiB
Markdown
29 lines
1.7 KiB
Markdown
---
|
|
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]]
|