10개의 미묘한 React 실수와 배운 점

카테고리

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

서브카테고리

웹 개발

대상자

초보자 및 중급 React 개발자

난이도: 중간 (일반적인 실수와 패턴 중심)

핵심 요약

• useEffect 사용 시: props 또는 state에서 직접 계산 가능한 로직은 useEffect를 사용하지 않도록 하라.
• 리스트 키 설정: 동적인 리스트에서 인덱스(index) 대신 안정적이고 유일한 키(key)를 사용해야 한다.
• 비동기 상태 업데이트: setState 이후 console.log(state)로 상태를 확인하면 비동기로 인해 오류 발생할 수 있으니, useEffect 또는 콜백을 사용해야 한다.

섹션별 세부 요약

1. `useEffect`의 잘못된 사용

• 문제: props 또는 state로부터 도출 가능한 로직을 useEffect로 처리함.
• 결과: UI glitch 발생 (예: 동적 리스트에서 키 누락).
• 해결책: useEffect 대신 props 또는 state에서 직접 계산.

2. 리스트 키 설정 오류

• 문제: index를 키로 사용하여 리스트 항목을 관리.
• 결과: 리스트 순서 변경 시 UI 오류 발생.
• 해결책: 안정적이고 유일한 키 (예: id) 사용.

3. 비동기 상태 업데이트 무시

• 문제: setState 후 즉시 console.log(state)로 상태 확인.
• 결과: 비동기로 인한 상태 값 불일치.
• 해결책: useEffect 또는 setState의 콜백 함수로 상태 변경 반응.

4. 복잡한 상태 관리

• 문제: 복잡하거나 의존적인 상태를 useState로 관리.
• 결과: 상태 관리가 어려워짐 (예: "state spaghetti").
• 해결책: useReducer 사용으로 복잡한 상태 로직 정리.

5. 성능 저하

• 문제: 비용이 많이 드는 연산을 반복적으로 수행.
• 결과: 느린 리렌더링.
• 해결책: useMemo 또는 useCallback으로 연산 최적화.

6. JSX 내 복잡한 로직

• 문제: 조건문, 배열 필터링 등을 return 내부에 직접 작성.
• 결과: JSX 가독성 저하.
• 해결책: 복잡한 로직을 return 이전에 추출하여 JSX를 선언적 유지.

7. 컴포넌트 재사용성 무시

• 문제: UI가 반복적이고 테스트/재사용 어려움.
• 결과: 파일 크기 증가 및 유지보수 어려움.
• 해결책: 재사용 가능한 로직/컴포넌트로 분리.

8. 컨텍스트 불필요한 확장

• 문제: 컨텍스트 사용으로 인한 불필요한 리렌더링 및 상태 불필요한 확장.
• 결과: 성능 저하 및 유지보수 어려움.
• 해결책: 경량 상태 관리 라이브러리(예: Zustand, Jotai, Redux Toolkit) 사용.

9. 로딩/에러 상태 무시

• 문제: 네트워크 요청 시 loading, error 상태를 처리하지 않음.
• 결과: 사용자 경험 저하 및 디버깅 어려움.
• 해결책: loading, error, success 상태를 반드시 처리.

10. 접근성 무시

• 문제: 대신 사용, 키보드/스크린 리더 지원 미비.
• 결과: 접근성 문제 발생.
• 해결책: 의미 있는 HTML 태그 사용 및 키보드 테스트.

결론

• React 개발 시 useEffect, useMemo, useCallback 등 훅을 적절히 사용하고, 리스트 키는 인덱스 대신 유일한 값을 사용해야 한다.
• 복잡한 상태는 useReducer, 불필요한 리렌더링은 useMemo/useCallback으로 최적화해야 하며, 접근성과 사용자 경험을 고려한 UI 설계**가 중요하다.