14 lines
746 B
Markdown
14 lines
746 B
Markdown
# 🧹 [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 />` 처럼 실패나 예외 케이스를 먼저 쳐내라.
|
|
- 뒤로 갈수록 **'진짜 중요한 핵심 로직'**만 남아서 가독성이 폭발한다.
|