좋은 상태란 무엇일까?

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• *프론트엔드 개발자** (리액트 상태 관리 기초 이해 및 실무 적용을 위한 중급 이상 수준)

핵심 요약

• 리액트의 상태는 컴포넌트의 동작과 UI를 결정하는 핵심 데이터이며, useState, useReducer, useContext를 통해 관리 가능
• 상태 분리 원칙을 통해 UI 상태, 데이터 상태, 폼 입력 상태를 별도로 관리해야 가독성과 유지보수성 향상
• SSoT(단일 진리의 원천) 원칙 준수로 데이터 일관성과 예측 가능한 상태 변화 보장

섹션별 세부 요약

1. 리액트 상태 정의

• 상태는 변화에 따라 반응하는 데이터로, 컴포넌트의 UI 렌더링에 직접 영향
• 예시: Closet 컴포넌트의 shirts, pants 상태로 옷장 구성 가능
• 상태는 현실 세계의 상태와 유사하게 시간에 따라 변화하는 정보로 모델링 가능

2. 상태 관리 Hook 활용

• useState: 단일 값, 간단한 상태 업데이트에 적합 (예: const [state, setState] = useState(initialState))
• useReducer: 복잡한 상태 로직, 상태 간 연관성이 많은 경우 활용 (예: const [state, dispatch] = useReducer(reducer, initialArg))
• useContext: 전역 상태 공유에 사용되나, 중첩 Provider 및 불필요한 리렌더링 문제 주의

3. 전역 상태 관리 고려사항

• 결합도 최소화: 전역 상태 과도한 사용은 컴포넌트 재사용성 저하
• 성능 최적화: Context 값 변경 시 전체 리렌더링 가능성
• 상태 책임 분리: 역할별 상태 분리 (예: posts, isLoading, searchTerm 별도 관리)

4. 좋은 상태의 원칙

• 상태는 사용 컴포넌트 근처에 배치 (Martin Fowler의 "데이터 사용 코드와 가까운 곳에 데이터 배치" 원칙 준수)
• 필수적 값만 상태로 관리 (파생 가능한 데이터는 별도로 관리)
• SSoT 원칙 준수: 단일 출처에서 데이터 관리로 일관성 유지

결론

• 상태 분리와 역할별 관리를 통해 가독성과 유지보수성 향상
• useState는 간단한 로직, useReducer는 복잡한 상태 관리에 적합
• SSoT 원칙을 통해 데이터 일관성과 예측 가능한 상태 변화 구현
• 예시: Keemsebin 컴포넌트에서 currentLocation, mood, isHungry 상태를 별도로 관리하며 시간에 따른 변화를 모델링 가능