React(61) React Toolkit - createSelector 사용하기

 

 

 

리액트 툴킷에는 createSeletor 라는 기능이 있다.

직접 사용해보면서 느끼기엔 useSelector 안에서 구구절절 이게 뭔지 어쩌고 저쩌고 정의하던 시절에서 벗어나

깔끔하게 "열려랏 참깨!" 라고 간단하게 명령해주면 되는 느낌을 받았다.

 

(추가 장점 updated)

useSelector 가 실행될 때마다 그 안에 정의된 함수는 매번 새로운 배열을 반환하게 되면서 이전에 참조하고 있던 객체 주소가 현재 주소와의 차이를 발생시키게 된다. 그리고는 re-rendering 을 발생시키는데 이때 재계산이 필요한 상태 트리의 사이즈나 계산 비용이 크다면 성능 문제로 이어질 수 있습니다.

ref: http://blog.hwahae.co.kr/all/tech/tech-tech/6946/

 

 

 

자, 이제 이게 뭔지 감잡았다면 직접 보면서 이해하러 가보자

---

React(61) React Toolkit - createSelector 사용하기

기존에는 

- 컴포넌트에서 useSelector 로 그 안에서 필요한 데이터를 직접 정의해서 소환하여 사용하였다면

 

여기서 핵심은

- 리덕스에서 어떤 데이터를 select 해서 컴포넌트에 가져다 쓸건지를 createSelector 로 정의하고 

- 컴포넌트에서 useSelector 로 그 셀렉터 이름만 소환하면 되는 것이다.

 

redux/Reply.ts

여기서는 기존 리덕스 파일에  + createSelector 로 셀렉터들을 추가만 해줄 것이다.

import { createSelector } from '@reduxjs/toolkit'; // 임포트 꼭 해주기
import { rootState } from 'redux';
import { Reply } from 'model/Reply';

 

const initialState: Reply = { // 여기 초기값이 선언되어있다. 
  id = 0;
  comment = '';
  count = 0;
};

... 생략

export const countSelector = (state: rootState): number =>   // 카운트를 저장
  state.reply.count || initialState.count;   // 값이 있으면 사용하고 아니면 초기값을 가져다 쓴다

export const commentSelector = (state: rootState): string => // 코멘트를 저장
  state.reply.comment || initialState.comment;

export const replySelector = createSelector( // 위에서 저장한 데이터를 찐 셀렉터로 만들어주자
  countSelector,			     // 각각의 셀렉터들을 넣고
  commentSelector,
  (count, comment) => ({ 	 // 마지막 인자로 함수를 넣는데 state 자체를 인자로 넣고, 
  	count, comment 		 // 리턴받을 데이터를 넣어준다 (filter나 계산식 등으로 가공해도 된다)
  }) 
);

 

component/Review.tsx

컴포넌트에서는 심플하다. 그냥 코드를 보자

import { replySelector } from 'redux/Reply'; // 사용할 셀렉터임포트

 

 const { count, reply } = useSelector(replySelector); // 선언하여 바로 사용한다