useSelector

렌더링 성능 최적화 - Redux

Redux의 useSelector 렌더링 문제 해결 문제점 Redux의 useSelector로 특정 데이터를 구독하는 컴포넌트는, 리덕스 스토어에서 특정 데이터(구독하지 않은 것일 수도 있음)가 변경되는 경우 알림을 받는다. 새로운 상태와 현 상태를 비교해 값이 다르면 리렌더링한다. 보통 useSelector(state => ({a: state.a, b: state.b})) 이 selector에 전달한 콜백의 리턴 값을 기준으로 비교한다. 위의 예시는 매번 새로운 객체가 생성되기 때문에 값이 다른 것으로 판단하고 리렌더링한다. (구독하는 데이터가 변경되지 않았음에도 불필요한 리렌더링) 해결 Object를 새로 만들지 않도록 State 쪼개기 // 변경 전 const { modalVisible, bgCol..