슈퍼장님의 게시글

슈퍼장

@superjang

수강평 작성수: 5
평균평점: 5.0

게시글 2

질문&답변

useSelector 과 컴포넌트 렌더링

아래는 제가 이해한 내용인데 혹시 잘 못 이해한 부분이 있으면 짚어주시면 감사하겠습니다. 예제에서 shallowEqual 를 사용하지 않은 useSelector(state => state.value3) 는 이미 레퍼런스 비교를 하기 때문에 굳이 shallowEqual 를 사용할 필요가 없음. (오히려 shallowEqual 사용시 1-depth 객체의 모든 속성을 비교하기 때문에 비효율) useMySelector(state => [state.value3]) 처럼 [] 형식으로 store 의 값을 꺼낼 경우 액션이 dispatch 될 때마다 매번 배열이 생성되고, 때문에 실제로 상태 변경이 없더라도 매번 컴포넌트가 렌더링 될 수 있는데, shallowEqual 사용해서 [] 의 1-depth 배열 아이템을 비교하도록 강제해서 변경 유무를 캐치하여 불필요한 렌더링을 하지 않도록함. 답변 감사합니다!

2020-09-21T15:36:03.950Z

좋아요수: 1
댓글수: 3
조회수: 537

질문&답변

useSelector 사용시 문제점 문의

디스트럭쳐링시 혹시 useSelector 내에서 최적화해서 꺼내주는 뭔가 있을까 싶어 문의드렸는데 확실하게 하려면 컴포넌트 내에서 store 참조시 아래 처럼 꺼내와야 불필요한 연산을 하지 않겠네요. const user = useSelector(store => store.user); const posts = useSelector(store => store.posts); 답변해 주신 내용 통해서 어떻게 쓰는게 더 성능상 좋게다는 판단은 드는데 혹시 직접 로그를 찍어본다던지 해서 확인할 수 있을까요? 요즘 디바이스, 브라우저 엔진들 다 성능이 좋아 코드 자체는 가독서 좋은 방식으로 짜는게 더 좋다고 생각은 하는데 디스트럭쳐링으로 store 참조시 실제로 어느정도 무리한 연산인지 직접 확인할 수 있으면 트레이드 오프를 좀 더 효율적으로 할 수 있을 것 같아 문의드립니다.

2020-03-29T10:13:38.803Z

좋아요수: 0
댓글수: 2
조회수: 334