2nd/01_Archive/2026-04-20/06_React-Clean-Code_Etiquette.md

🧹 [LEVEL 6] 리액트 클린 코드: 누구나 이해하는 코드

1. 조건부 렌더링의 품격

• condition && <Component /> 는 편하지만, condition이 0일 때 화면에 0이 찍히는 대참사가 난다.
• 가급적 condition ? <Component /> : null 을 써서 명확하게 표현하라.

2. 구조 분해 할당(Destructuring) 생활화

• props.user.name, props.user.age ... 보는 사람 숨넘어간다.
• const { name, age } = user; 로 깔끔하게 정리하고 시작하라.

3. Early Return: 코드를 날씬하게

• if (loading) return <Loading /> 처럼 실패나 예외 케이스를 먼저 쳐내라.
• 뒤로 갈수록 **'진짜 중요한 핵심 로직'**만 남아서 가독성이 폭발한다.