인프런 커뮤니티 질문&답변

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

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

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

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

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