React_Clean_Code_Best_Practices (리액트 클린 코드)

📌 한 줄 통찰 (The Karpathy Summary)

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

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이 출력되는 대참사를 방지하기 위함이다.

과도한 추상화는 오히려 독이다. 코드가 3줄인데 함수 5개로 쪼개는 것은 가독성을 해친다. '직관성'이 '분리'보다 우선할 때가 있음을 명심하라.