React에서 State, Props, 리렌더링 발생 조건 및 성능 최적화

React 애플리케이션에서 State와 Props를 사용하여 컴포넌트를 관리하며, 불필요한 리렌더링을 최소화하기 위해 다양한 최적화 전략을 사용할 수 있다. 렌더링 발생 조건을 이해하고 적절한 최적화 기법을 적용함으로써 애플리케이션의 성능을 개선할 수 있다.

1. State
   컴포넌트의 동적 데이터 관리를 위한 객체
   클래스 컴포넌트에서는 this.state를 사용하며, 함수형 컴포넌트에서는 useState 훅을 사용
   상태 변경 시 setState 메서드나 useState의 setter 함수를 사용하여 변경
2. Props
   부모 컴포넌트로부터 전달받은 속성
   컴포넌트 간의 데이터 전달과 상호작용을 위해 사용
   읽기 전용으로, 자식 컴포넌트에서 직접 수정할 수 없음
3. 리렌더링 발생 조건
   State의 변경: 컴포넌트의 내부 상태가 변경되면 리렌더링 발생
   Props의 변경: 부모 컴포넌트로부터 전달받은 속성이 변경되면 리렌더링 발생
   forceUpdate 호출: 강제로 컴포넌트를 리렌더링하도록 요청
4. 성능 최적화 기법
   1. React.memo: 함수형 컴포넌트에서 props 변경을 감지해 불필요한 리렌더링 방지
   2. PureComponent: 클래스 컴포넌트에서 props 및 state의 얕은 비교를 통해 리렌더링 방지
   3. shouldComponentUpdate: 클래스 컴포넌트에서 리렌더링 여부를 결정하는 라이프사이클 메서드
   4. useMemo: 계산 비용이 높은 함수의 결과값을 캐싱해 성능 향상
   5. useCallback: 함수형 컴포넌트에서 함수를 메모이제이션하여 리렌더링 최소화
   6. React.lazy와 Suspense: 코드 스플리팅을이용해 컴포넌트 레이지 로드 및 로딩 상태 처리
   7.React.Profiler: 성능 측정 및 최적화를 위한 개발 도구 사용
5. 리스트와 키(Key): 리스트 렌더링 시 고유한 키를 할당해 DOM 업데이트 효율화
6. 컴포넌트 분리: 큰 컴포넌트를 작은 컴포넌트로 분리해 독립적인 리렌더링 가능
7. 서드파티 라이브러리 사용에 주의: 무거운 라이브러리 사용 시 성능 저하 가능성 고려
8. 개발 모드와 프로덕션 모드: 프로덕션 모드로 빌드하여 최적화 적용 및 경고 메시지 제거
9. 성능 최적화 접근 방식
   1. 성능 분석: 애플리케이션의 성능 문제 분석 및 병목 현상 발견
   2. 최적화 전략 수립: 문제 원인 및 해결 방법을 명확하게 이해하고 각 최적화 기법의 효과와 부작용을 평가
   3. 최적화 적용 및 테스트: 선택한 최적화 전략을 적용한 후, 애플리케이션의 성능 변화를 테스트
   4. 지속적인 모니터링: 애플리케이션의 기능 변경이나 새로운 문제 발견 시 지속적으로 성능 모니터링 및 개선