useSelector 사용시 문제점 문의

Question

컴포넌트에서 user, posts 를 store 에서 꺼내올 때 매번 useSelector 를 사용하지 않고 const { user, posts } = useSelector(store => store) 위처럼 한번만 호출하여 사용하면 강의에서 class 기반에서 성능상의 이유로 reselect 사용해야 한다는 것고 동일한 이슈가 발생하는 건가요?  즉 user 만 업데이트 되어도 posts 까지 가져오는 연산을 수행하는지.. 한다면 저렇게 사용하면 안될 것 같은데 궁금하네요. 혹시 user 만 업데이트한 경우 posts 도 가져오기 위한 연산을 하는지 유무를 제가 직접 확인해볼 수 있는 방법이 있을까요?

제로초(조현영) · Answer

가져오기 위한 연산은 당연히 할수밖에 없는게 구조분해 문법이기 때문입니다. 함수 컴포넌트가 실행될 때 store객체에서 store.user와 store.post 를 꺼내올수밖에 없습니다.

슈퍼장 · Answer

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