어떻게 깨끗한 React 코드를 작성할 수 있는가
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- React 개발자, 특히 중급 이상의 개발자*
- 난이도: 중급 (React의 핵심 개념과 패턴을 설명)*
핵심 요약
- 프로젝트 구조:
/components
와/pages
폴더로 분리하여 확장성 확보 - 함수형 컴포넌트 & Hooks:
useState
,useEffect
등으로 상태 관리 및 사이드 이펙트 처리 - 컴포넌트 분리: 단일 책임 원칙 준수,
useToggle
과 같은 커스텀 훅으로 재사용 가능 - useEffect 정리:
clearInterval
,clearTimeout
등으로 메모리 누수 방지
섹션별 세부 요약
1. 프로젝트 구조 정리
- 모든 파일을 단일 폴더에 모으는 대신
/components
와/pages
로 분리 - 예시:
```bash
/src
├── /components
│ ├── Navbar.jsx
│ └── Button.jsx
└── /pages
├── Home.jsx
└── App.jsx
```
2. 함수형 컴포넌트와 Hooks 사용
- 클래스 컴포넌트 대신
function Welcome({ name })
과 같은 함수형 컴포넌트 사용 useState
,useEffect
등 React Hooks로 상태 및 사이드 이펙트 관리
3. 컴포넌트 분리 및 재사용성
- 하나의 컴포넌트가 여러 역할을 수행할 경우
UserList
,StatsPanel
과 같은 작은 컴포넌트로 분리 - 재사용 가능한 로직은
useToggle
과 같은 커스텀 훅으로 추출
4. useEffect 정리
useEffect
내부에서 생성된 리소스(예:setInterval
)는return () => clearInterval(interval)
로 명시적 정리- 메모리 누수 방지 및 성능 최적화
5. 커스텀 훅 작성
- 반복적인 로직은
useToggle.js
와 같은 커스텀 훅으로 추출 - 예시:
```javascript
export function useToggle(initialValue = false) {
const [state, setState] = useState(initialValue);
const toggle = () => setState(prev => !prev);
return [state, toggle];
}
```
결론
- 핵심 팁: 컴포넌트 분리, 커스텀 훅 사용,
useEffect
정리 - 실무 적용: 코드 가독성과 유지보수성을 위해 점진적으로 개선
- 결론: 깨끗한 React 코드는 테스트, 재사용, 확장성이 뛰어나며, 개발자 협업을 용이하게 만든다.