리액트로 개발하던 시절 react redux를 사용해 데이터 관리를 한 적이 있다.
그때는 redux를 왜쓰는지, 이게 어떤 라이브러리인지도 모르고 급하게 급하게 기존 코드를 보면서 아 이렇게 쓰는거구나 하고 사용했던 경험이 있다.
누가 Redux 는 왜 쓰는거야? 하면
"data 관리하려고" 라고 뭉뚱그려 말할수밖에 없었던 시절이다.
이번에 회사에서 그룹단위 사이드 프로젝트의 React 구현부를 맡게 되었다. 거의 2년 반만에 다시 React를 사용하게 된 만큼, 감각을 되살리기 위해서 간단한 인터넷 강의를 수강할 것을 추천받았고 그 중에 Redux가 보였다.
이번 기회에 Redux가 무엇을 위해 사용하는 라이브러리인지 이해해보기로 했다.
들어가기에 앞서 Redux 에 대해 착각하고 있던 사실중 하나는
Redux가 React 라이브러리와는 종속관계가 없다는 것이다.
맨날 React-Redux만 사용하고, 구글에 나오는 사용 예시들도 거의 모두 React에서 Redux 를 사용하고 있어서 당연히 종속관계인줄 알았다. 참고한 강의에서는 이걸 설명하기 위해 Vanilla JS 에서 Redux를 사용하는 예시를 보여준다.
Redux 사용이유
redux를 쓰지 않으면 데이터가 여기저기서 변경될 수 있고, 변경 후에는 무조건 html의 data를 갱신해주는 작업을 매번 해야함.
const updateText = () => {
number.innerText = count;
};
const handleAdd = () => {
count = count + 1;
updateText();
};
const handleMinus = () => {
count = count - 1;
updateText();
};
데이터 관리의 정형화
prop drilling 없이 데이터가 필요한 component에서 직접 redux와 연결해 데이터 접근, 수정 가능.
뭔가 동시성? 에 문제가 생기는 케이스는 없을까?
1. store
데이터를 보관하는 장소.
2. reducer
createStore할때 arg로 넣어주는 함수.
오직 이 함수를 통해서만 data 변경이 가능
인자로 현재 data의 state와 action을 받음.
여러 action을 switch로 나눠 데이터 변경. + mutate 금지 (대신 새 객체를 return 해야함.)
이 reducer의 return값이 최종 data가 되는거임.
3. action, dispatch
Redux외부에서는 직접 reducer를 호출해 데이터를 수정하지 않음.
store.dispatch() 메서드를 action 객체를 arg로 넣어서 호출하면
dispatch 내에서 reducer(currentState, action 객체) 를 호출해주는 방식임.
정의된 action을 dispatch 하는 과정을 통해서만 data를 변경할 수 있는 것임. state를 dispatch action이외 다른방법으로 변경 불가
action은 무조건 type을 가진 객체여야함
action creater 라는 action 객체를 반환하는 함수만 따로 만들어서 책임을 분리하는게 더 common 함
플러스 알파
- [ ] Redux 사용이 적절한 경우와 아닌 경우 (조사가 필요할 걸)
- [ ] Redux 에서 mutate가 금지된 이유
실제로 프로젝트에서 사용하게 되었을 때 내용 더 추가하기