제목: 매개변수와 함께 Reselect 셀렉터 사용하기
이 블로그 포스트에서는 리덕스 응용 프로그램에서 reselect 라이브러리를 사용하여 매개변수가 있는 셀렉터를 만드는 방법에 대해 알아보겠습니다. 셀렉터는 리덕스 아키텍처의 중요한 부분으로, 스토어의 상태에서 계산된 데이터를 메모이제이션되고 효율적으로 추출할 수 있도록 합니다. 그러나 reselect는 기본적으로 셀렉터에 추가 매개변수를 전달하는 기능을 지원하지 않습니다. 이런 제한을 극복하고 맞춤형 매개변수를 받을 수 있는 셀렉터를 만드는 다양한 접근법을 알아보겠습니다.
접근법 1: Reselect 4.1 업데이트하기
Reselect 4.1 이상을 사용하는 경우, 셀렉터가 추가 매개변수를 받을 수 있는 새로운 기능을 활용할 수 있습니다. createSelector 함수를 사용하여 셀렉터를 정의하고 입력 셀렉터의 배열과 선택된 값 및 추가 매개변수를 받는 함수를 전달할 수 있습니다. 아래 예시를 살펴보겠습니다:
// selector.js
const selectItemsByCategory = createSelector(
[
state => state.items,
(state, category) => category
],
(items, category) => items.filter(item => item.category === category)
);
// App.js에서 사용법
const items = selectItemsByCategory(state, 'javascript');
이 접근법을 통해 카테고리와 같은 맞춤형 매개변수를 셀렉터에 전달하여 해당 매개변수에 기반한 아이템을 필터링할 수 있습니다. 깔끔하고 효율적인 해결책을 제공합니다.
접근법 2: 고차 셀렉터 생성하기
Reselect의 이전 버전을 사용하거나 다른 접근법을 선호하는 경우, 맞춤형 매개변수를 받고 새로운 셀렉터를 반환하는 고차 셀렉터를 생성할 수 있습니다. 이는 셀렉터에서 매개변수를 인수로 사용하는 함수를 반환함으로써 구현할 수 있습니다. 아래 예시를 살펴보겠습니다:
// selector.js
export const selectWithValue = (customParameter) => createSelector(
selectAllDataFiltered,
(data) => {
console.log(customParameter);
return data[customParameter];
}
);
// App.js에서 사용법
const data = selectWithValue('myValue')(myState);
이 접근법은 selectWithValue라는 고차 셀렉터를 생성하는데, 이는 맞춤형 매개변수를 받고 새로운 셀렉터를 반환합니다. 이를 통해 매개변수에 기반한 필터링된 데이터에서 값을 동적으로 추출할 수 있게 됩니다.
결론
이 블로그 포스트에서는 reselect 라이브러리에서 셀렉터에 추가 매개변수를 전달하는 제한을 극복하기 위한 다양한 접근법을 알아보았습니다. Reselect 4.1에서 소개된 새로운 기능을 사용하는 방법과 맞춤형 매개변수를 받는 함수를 반환하는 고차 셀렉터의 개념을 살펴보았습니다. 두 가지 접근법 모두 매개변수를 사용하여 유연한 셀렉터를 만들 수 있으며, Redux 응용 프로그램에서 효율적으로 계산된 데이터를 생성할 수 있게 해줍니다.
reselect 셀렉터에 매개변수를 사용해 본 경험이 있나요? 아래 댓글에서 여러분의 생각과 통찰을 공유해주세요!
참고 자료 :
https://stackoverflow.com/questions/40291084/use-reselect-selector-with-parameters
같은 카테고리의 다른 글 보기 :
