해결된 질문
23.03.02 21:23 작성
·
748
·
수정됨
1
안녕하세요 제로초님. 강의 내용과는 다를 수 있지만... 확실한 대답을 얻기가 어려워서 질문 드립니다 ㅜㅜ
리덕스 툴킷 + useSelector에 대해 질문이 있습니다.
기존에는 다음과 같이 구조 분해 할당을 사용해왔습니다.
const { id, name } = useSelector((state:RootState) => state.user)
하지만 최근에 이 방법이 굉장한 안티 패턴이라는 것을 알게 되었고 다른 방법을 찾고 있습니다.
공식 문서에 기반하면 총 3개 정도의 방법이 있는 것 같아요.
state를 하나씩 불러오도록 useSelector를 여러번 사용.
const id = useSelector((state: RootState) => state.user.id)
const name = useSelector((state: RootState) => state.user.name)
구조 분해 할당 + equalityFn 사용 (shallowEqual
등)
RTK에서 제공하는 createSelector
사용.
공식 문서를 읽어보니 1번을 제일 추천하는 뉘앙스로 느꼈습니다. 저도 1번이 가장 심플하면서도 정확한 방법 같아요. 하지만 걱정되는게 한 컴포넌트에서 불러와야 할 상태가 많다면 useSelector가 굉장히 많아져서 가독성을 해지지 않을까 고민입니다.
하나의 슬라이스에 상태가 많은 경우도 있어서요.
(많이 사용할수록 전체적인 코드의 볼륨이 더 커질 수도 있을 것 같구요..)
2번은 경우에 따라 shallowEqual이 중첩된 객체는 검사하지 못한다는 점, equalityFn을 일일이 설정해줘야한다는 점에서 오히려 공수가 더 많이 들지 않을까 고민입니다.
3번은 단순히 값만 불러오는 것 보다 불러오는 동시에 복잡한 연산이 있을 때 권장되는 방법으로 느껴졌습니다. 메모이제이션이 갖고 있는 트레이드 오프도 있구요. 각 스토어 슬라이스마다 또는 각 컴포넌트마다 사용한다면 너무 과하게 사용하는 것이 아닌가 고민입니다.
어떤 방법을 사용하는 것이 가장 괜찮은 방법일까요?
아니면 따로 추천하시는 방법이 있으신가요?
열심히 구글을 돌아다녔지만 딱 명확한 대답을 얻기가 힘들어서 부득이하게 질문 드립니다...
2023. 03. 02. 22:52
빠른 답변 감사합니다. 그럼 복잡한 연산이 있을 경우에는 3번을 고려하고, 그 외에 단순히 값만 가져오는 경우에는 1번이 제일 적절한 방법이라고 이해해도 괜찮을까요?