순수 리덕스에서 툴킷을 도입한 이유
저는 발란 기업 과제에서 리덕스 설정과 컴포넌트와 리덕스를 연동하는 부분을 맡았습니다.
다뤄야 할 데이터의 형태는 다음과 같았습니다.
[
...,
{
"productId": 97,
"userId": "abcd1234",
"date": "2021-12-11 00:08:00",
"image": ["https://i.balaan.io/review/RV0000014358-1_800.webp"],
"like": 1,
"rating": 5,
"reviewTitle": " 럭셔리도 참 쉽게! 프랑스에서 5일만에 도착한 #레페토 #마이클 #발란 #발라니어 #balaan ",
"comments": [
{
"userId": "qwerty123",
"content": "발 편하신가요!?",
"date": "1주",
"recomment": [
{
"userId": "tempUser",
"content": "사이즈 조금 크게 사시면 괜찮을 것 같기는 한데 워낙 바닥에 쿠션감이 없어서 고려해서 구입하세요. :)",
"date": "3주"
}
]
},
}
...
]리덕스는 기본적으로 불변성을 유지하기 위하여 순수 함수를 사용하여야 합니다.
그렇기 때문에 댓글과 대댓글 관련된 동작이 발생할 때에 불변성을 유지하려면 배열 안에 객체 안에 배열 안의 객체 안의 배열 안의 객체의 프로퍼티를 변경하여야 했습니다.
spread 연산자와 함께 불변성 유지를 위해 헤쳐나가보려 하였지만 depth가 점점 깊어질수록 어려움이 발생하였습니다.
그래서, 리덕스 툴킷을 도입하였습니다!
리덕스 툴킷 도입하고 나니 타입, 액션, 리듀서를 하나의 함수로 할 수 있어서 코드가 간결해지고 mutable하게 작성하여도 툴킷이 알아서 immutable하게 상태를 변경해주었습니다.
아래는 툴킷을 도입하고 난 후의 리듀서의 일부입니다.
recomment: (state, action) => {
const pickedReview = state.data.find(
(review) => review.productId === action.payload.productId
)
pickedReview.comments[action.payload.idx].recomment.push(
action.payload.recomment
)
},따로 마지막에 새로운 상태를 반환하지 않고 push만 하고 끝나도 어플리케이션은 정상적으로 작동합니다.
느낀 점
리덕스와 리덕스 툴킷을 이번에 처음 사용하는 것은 아니지만 사용했던 프로젝트에서 공유해야 할 상태가 그리 복잡한 형태가 아니어서 리덕스 툴킷을 굳이 도입하지 않아도 되었습니다.
하지만, 이번에 상태의 구조가 조금만 복잡해지더라도 이를 불변성을 유지하면서 로직을 짠다는 것이 얼마나 힘든 일인지 느낄 수 있었고 mutable하게 작성하는 것의 편리함 또한 체감하였습니다.
공유되는 상태는 여러 팀원들과의 협업이 필요한 부분이므로 상태의 인터페이스와 상태 변경을 어떤 식으로 할 것인지도 미리 약속하고 개발하니 팀원들이 쓸 상태와 동작을 정의하는 데에는 큰 어려움이 없었습니다.
