• 카테고리

    질문 & 답변
  • 세부 분야

    풀스택

  • 해결 여부

    해결됨

useSelector의 적절한 사용법에 대해 궁금합니다.

23.03.02 21:23 작성 23.03.02 21:55 수정 조회수 571

1

안녕하세요 제로초님. 강의 내용과는 다를 수 있지만... 확실한 대답을 얻기가 어려워서 질문 드립니다 ㅜㅜ

리덕스 툴킷 + useSelector에 대해 질문이 있습니다.

기존에는 다음과 같이 구조 분해 할당을 사용해왔습니다.

const { id, name } = useSelector((state:RootState) => state.user)

하지만 최근에 이 방법이 굉장한 안티 패턴이라는 것을 알게 되었고 다른 방법을 찾고 있습니다.

공식 문서에 기반하면 총 3개 정도의 방법이 있는 것 같아요.

  1. state를 하나씩 불러오도록 useSelector를 여러번 사용.

    const id = useSelector((state: RootState) => state.user.id)
    const name = useSelector((state: RootState) => state.user.name)

  2. 구조 분해 할당 + equalityFn 사용 (shallowEqual 등)

  3. RTK에서 제공하는 createSelector 사용.

 

공식 문서를 읽어보니 1번을 제일 추천하는 뉘앙스로 느꼈습니다. 저도 1번이 가장 심플하면서도 정확한 방법 같아요. 하지만 걱정되는게 한 컴포넌트에서 불러와야 할 상태가 많다면 useSelector가 굉장히 많아져서 가독성을 해지지 않을까 고민입니다.

하나의 슬라이스에 상태가 많은 경우도 있어서요.

(많이 사용할수록 전체적인 코드의 볼륨이 더 커질 수도 있을 것 같구요..)

 

2번은 경우에 따라 shallowEqual이 중첩된 객체는 검사하지 못한다는 점, equalityFn을 일일이 설정해줘야한다는 점에서 오히려 공수가 더 많이 들지 않을까 고민입니다.

 

3번은 단순히 값만 불러오는 것 보다 불러오는 동시에 복잡한 연산이 있을 때 권장되는 방법으로 느껴졌습니다. 메모이제이션이 갖고 있는 트레이드 오프도 있구요. 각 스토어 슬라이스마다 또는 각 컴포넌트마다 사용한다면 너무 과하게 사용하는 것이 아닌가 고민입니다.

 

어떤 방법을 사용하는 것이 가장 괜찮은 방법일까요?

아니면 따로 추천하시는 방법이 있으신가요?

 

열심히 구글을 돌아다녔지만 딱 명확한 대답을 얻기가 힘들어서 부득이하게 질문 드립니다...

 

답변 1

답변을 작성해보세요.

0

저는 1번 3번만 씁니다. 3번은 말씀하신대로 연산이 많을 경우에 메모이제이션 용도로 사용하고요. 1번의 경우 줄 수가 늘어나는 건 그냥 감수하고 사용하고 있습니다.

highJoon님의 프로필

highJoon

질문자

2023.03.02

빠른 답변 감사합니다. 그럼 복잡한 연산이 있을 경우에는 3번을 고려하고, 그 외에 단순히 값만 가져오는 경우에는 1번이 제일 적절한 방법이라고 이해해도 괜찮을까요?

네 그렇습니다. 제일인지는 잘 모르겠네요. 혹시나 다른 방법도 있을 수 있으니까요

highJoon님의 프로필

highJoon

질문자

2023.03.02

아 그렇군요! 좋은 답변 감사합니다 ~