렌더링 성능 최적화

    React에서 렌더링이 발생하는 조건과 렌더링 성능 최적화 방법

    React에서 렌더링이 발생하는 조건과 렌더링 성능 최적화 방법

    🧐 렌더링이 발생하는 조건1. 컴포넌트의 state가 변경되었을 때2. 컴포넌트가 상속받은 props가 변경되었을 때 3. 부모 컴포넌트가 리렌더링이 된 경우 자식 컴포넌트는 모두 리렌더링🧐렌더링 성능 최적화 방법1. hook (useMemo, useCallback)useMemo - 계산의 재실행을 방지useCallback - 함수의 재생성을 방지2. ContextAPI, 기타 상태 관리툴ContextAPI - 컴포넌트 간에 값을 공유, 주로 전역적으로 필요한 값을 다룰 때 사용- 해당 값이 필요한 컴포넌트에만 전달하여 리렌더링 시키고 다른 컴포넌트는 리렌더링 되지 않게 하기recoil - 전역 상태를 관리하기 위한 상태 관리 라이브러리3. windowning - 현재 화면에 보이는 항목만 렌더링 하..