Redux 공식 문서에선 Redux를 굳이 쓸 필요 없다고 말한다.
Redux는 상태를 관리하기에 좋은 도구이지만 여러분의 상황에 적당한지는 따져 보아야 합니다. 단지 누군가가 사용하라고 했다는 이유만으로 Redux를 사용하지는 마세요 - 시간을 들여서 잠재적인 이점과 그에 따르는 단점을 이해하세요.
특히 여기서... 누군가가 사용하라고 했다는 이유만으로 Redux를 사용하지는 마세요 -라는 부분.. 진짜 뼈를 맞아버렸다.
나는 지금까지 Redux를 항해에서 배운대로 "그냥" 써왔고, 막연하게 props drilling은 안 좋으니까! 전역 상태관리는 편하니까! (특히 get 방식을 사용할때) 라는 이유만으로 Redux를 써왔었다.
하지만 프로젝트를 진행할 수록, Redux 방식을 사용하면 만들어야하는 파일이 너무 많다는 생각이 들었다.
특히 단순히 CRUD 구현을 하는데 Redux를 쓰는건 뭔가 이상하다는 생각이 들어서 몇몇 부분은 Redux로 구현한 부분을 새로 바꾸기도 했고, Redux를 사용하지 않고 구현했다.
🧐 Redux가 정말 필요한가?
리덕스를 쓰는 이유는 주로 1) 업데이트가 자주 일어날 때, 2) 어떠한 상태값이 여러곳에서 사용될 때, 그리고 3) 컴포넌트 구성이 복잡해져서 하위 컴포넌트의 변화를 주기 위해 너무 많은 상위 컴포넌트를 거쳐야할 때, 이렇게 3가지 이유가 있다고 생각한다.
하지만 항해에서 내가 진행한 프로젝트들은 전혀 복잡하지 않은 프로젝트였기 때문에 사실은 Redux나 RTK를 굳이 사용할 필요는 없었다. 다만 배웠으니까, 이 방식이 익숙하니까! 항상 조심해야지 라고 생각했었는데, 생각 없이 리덕스를 사용버렸다.
- 다음 프로젝트는 최대한 리덕스를 쓰지 않거나 꼭 필요한 경우에만 쓸 수 있도록 생각하면서 구현해야겠다.
🧐 그냥 구현해보기!
기존에 RTK와 redux-thunk를 이용해서 구현했던 CRUD 중 일부를 다시 설정했다.
slice 파일을 이용하지 않아서 좋았던 점은, 기존 파일에선 리액트 훅을 사용할 수 없었기 때문에 window.location.href를 사용해서 페이지를 이동시켰던걸 useNavigate 훅으로 대체할 수 있다는 것이다.
방 생성하기
const onClickRoomCreate = useDebounce(async () => {
const newRoom = { gameRoomName, gameRoomPassword: '1234' };
if (gameRoomName.trim() === '') {
useToast('방 제목을 입력해야 한닭', 'warning');
} else {
await instance
.post(`/rooms`, newRoom)
.then((res) => {
sessionStorage.setItem('owner', res.data.owner);
sessionStorage.setItem('normalEnter', true);
navigate(`/gameroom/${res.data.roomId}`);
})
.catch((error) => {
if (error.response.status === 403) {
useToast(`${error.response.data.message}`, 'error');
} else {
useToast('에러가 발생했닭! 다시 시도해야한닭!', 'error');
}
});
}
}, 300);방 입장하기
function clickRoom(roomInfo) {
if (roomInfo.memberCnt >= 4) {
useToast('꽉 차서 못 들어간닭...', 'warning');
return null;
}
if (roomInfo.status === false) {
useToast('지금은 끼어들 수 없닭!', 'warning');
return null;
}
setTimeout(async function () {
await instance
.post(`/rooms/${roomInfo.id}`)
.then((res) => {
sessionStorage.setItem('owner', res.data.owner);
sessionStorage.setItem('normalEnter', true);
navigate(`/gameroom/${res.data.roomId}`);
})
.catch((error) => {
if (error.response.status === 403) {
useToast(`${error.response.data.message}`, 'error');
} else {
useToast(`${error.response.data.statusMsg}`, 'error');
}
});
}, 500);
}확실히 리덕스를 사용하지 않으니 작성하는 코드의 양이 확 줄었다. 단순 CRUD는 이제 절대로 리덕스를 쓰지 말아야지...
대체 왜 리덕스를 썼던걸까! 다음엔 꼭 생각하면서 라이브러리를 써야겠다. 배경음같은 경우엔 컴포넌트 구조가 복잡하니까 RTK가 아주 큰 도움이 됐었는데, 사용하지 않아도 될 곳까지 쓰지 않도록 주의해야겠다.
출처:
