단일 책임 원칙 위반 React 컴포넌트가 다수의 상태와 로직을 혼합하여 렌더링 성능 저하 및 유지보수 난이도가 증가함

Context

React의 유연성과 선언적 특성으로 인해 편리하게 컴포넌트에 로직을 추가하지만, 이로 인해 단일 책임 원칙이 반복적으로 위반됨. UserProfile 컴포넌트 예시에서 데이터 페칭, 디스플레이, 편집 폼, 에러 처리, 로딩 상태가 하나의 컴포넌트에 300줄 규모로 집약되어 있음.

Technical Solution

• Custom Hook 추출: 데이터 페칭 로직을 useUserData 같은 커스텀 훅으로 분리하여 컴포넌트와 데이터 로딩 로직을 분리함
• Pure Component 분리: DisplayProfile과 EditProfile 같은 순수 디스플레이 컴포넌트로 분리하여 렌더링 책임과 편집 로직을 분리함
• 상태 관리 분리: 지역 상태(useState)와 전역 상태(Context/Redux)를 명확히 구분하여 불필요한 상태 공유를 방지함
• React.memo 적용: 순수 컴포넌트에서 동일 props로 자주 렌더링되는 경우에 메모이제이션을 적용함
• useCallback/useMemo 활용: memoized 자식 컴포넌트에 전달되는 함수 레퍼런스 안정화와 의존성 배열 최적화에 활용함

Impact

(수치 없음)

Key Takeaway

React 앱의 성능과 유지보수성은 컴포넌트 단위의 단일 책임 원칙 적용과 상태 관리 분리에 의해 결정됨. 불필요한 렌더링 방지를 위한 메모이제이션은 실제 병목 지점을 프로파일링한 후 전략적으로 적용해야 함.