React에서 오래 걸린 개념 이해하기

카테고리

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

서브카테고리

웹 개발

대상자

• React 개발자 (초보자 및 중급자)
• 난이도 관점: 중간 (구체적인 개념 이해에 시간이 필요)

핵심 요약

• useEffect 의존성 배열 문제 – 잘못된 의존성 설정으로 인한 무한 루프 또는 업데이트 누락
• 상태 공유(상태 레이핑) – 부모 컴포넌트로 상태를 올리는 과정에서 데이터 흐름 복잡성 증가
• 리렌더링 성능 최적화 – 대규모 컴포넌트에서 불필요한 리렌더링으로 인한 성능 저하

섹션별 세부 요약

1. **`useEffect` 의존성 문제**

• 의존성 배열 누락 – useEffect 내부에서 변경되는 변수가 배열에 포함되지 않으면 예상치 못한 동작 발생
• 불필요한 의존성 추가 – useEffect가 매번 실행되도록 하는 문제를 유발
• 정답 예시: useEffect(() => { ... }, [dependency])에서 dependency는 실제로 변경되는 값만 포함

2. **상태 레이핑(Lifting State Up)**

• 부모-자식 컴포넌트 간 상태 공유 – 자식 컴포넌트에서 상태를 변경할 때 부모 컴포넌트의 상태를 관리해야 함
• 데이터 흐름 복잡성 – 중간 컴포넌트가 존재할 경우 상태를 전달하는 과정에서 코드가 지저분해질 수 있음
• 해결 방법: Context API 또는 상태 관리 라이브러리(예: Redux) 사용

3. **리렌더링 성능 최적화**

• 대규모 컴포넌트의 리렌더링 – 부모 컴포넌트의 상태 변경 시 자식 컴포넌트가 모두 리렌더링 되는 문제
• 성능 최적화 기법 – React.memo, useMemo, useCallback 사용으로 불필요한 리렌더링 방지
• 예시: React.memo로 컴포넌트를 감싸면 props가 변경되지 않으면 리렌더링 방지

결론

• useEffect 의존성 배열은 정확하게 설정하고, 상태 공유는 Context API 또는 상태 관리 라이브러리로 처리하며, 리렌더링 성능은 React.memo와 useMemo로 최적화해야 한다.