📌 컴포넌트 렌더링 성능 이슈 & 해결 방법
- 컴포넌트의 잦은 리-렌더링 이슈 해결 & 렌더링을 효과적으로 관리하기 위한 방법
[React] useCallback(): 컴포넌트 리렌더링 시 불필요한 함수 생성 방지
📌 useCallback(): 컴포넌트가 리렌더링될 때, 함수가 불필요하게 다시 생성되는 것을 방지하기 위해 사용 함수의 메모이제이션(기억화)을 위해 사용하위 컴포넌트에 전달하는 속성 타입이 함수인
tensdiary.tistory.com
[React] useEffect() : 렌더링 시 발생하는 사이드 이펙트 처리
📌 useEffect(): 리액트 컴포넌트와 외부 시스템을 동기화할 때 사용렌더링 자체에 의해 발생하는 부수 효과를 특정하는 것특정 이벤트가 아닌 렌더링에 의해 직접 발생한다.(어떤 상호작용
tensdiary.tistory.com
3. 커스텀 훅(Custom Hook) 내부의 함수 최적화하기
[React] 커스텀 훅(Custom Hook): 컴포넌트에서 재사용할 수 있는 로직을 함수로 정의
📌 커스텀 훅(Custom Hook): 여러 컴포넌트에서 재사용할 수 있는 로직을 추출해 하나의 함수로 정의한 것 코드의 재사용성을 높이고, 코드의 가독성을 개선할 수 있다. ☑️ 빌트인 훅 함수: 리
tensdiary.tistory.com
[React] memo(): props가 변경되지 않으면 컴포넌트 리렌더링❌
📌 memo(): 컴포넌트의 props가 변경되지 않은 경우, 컴포넌트 리렌더링을 건너뛸 수 있는 훅성능 최적화를 위한 함수형 컴포넌트를 위한 기능컴포넌트가 불필요하게 리렌더링되는 것을 방지하는
tensdiary.tistory.com
5. useMemo()
[React] useMemo(): 종속성 배열 값이 변경되지 않으면 재계산❌
📌 useMemo(): 계산된 값을 메모이제이션하여, 종속성 배열 값이 변경되지 않는 한 불필요한 재계산을 방지하는 훅 값의 메모이제이션(값의 캐싱)을 통해 성능 최적화를 위해 사용 종속성 배열에
tensdiary.tistory.com