[TIL] Redux 개념부터 다시 공부하기

이전 상태

부트캠프 세션을 통해서 하루동안 redux의 개념을 배우고 또 하루 동안 예제를 통해 실습을 했다.

그런데 당시에는 react를 배운 지도 얼마 안 돼서 props의 오르내림에 대한 개념도 오락가락 하는 상태였다.

그 위에서 redux를 배우고 있자니 어디까지가 react의 기능이고 어디까지가 redux의 기능이며

그 기능 뒤에서 어떤 함수가 작동하고 있는지도 파악이 너무 어려웠다..! (울고 싶었음)

 

'내가 지금 당장 이해하기에는 복잡한 기능이다'라는 생각에 한동안 손을 떼고 있었는데,

얼마전에 todolist 만들면서 기능 추가할 때마다 어마어마한 props 이동이 필요한 걸 보고 겁이 났다.

아.. 이대로 프로젝트 만들면 props 수정하다가 토하겠다..

상태 관리가 필요할 수밖에 없는 것이었다는 것을 깨달음.

 

후보로 redux 외에 recoil도 있었는데, recoil이 너무 매력적이었지만 결정적으로 redux를 고른 이유는 이미 많은 코드들이 redux를 사용해 쓰여졌을 것이라는 예상이었다.

레거시가 vue+redux 조합일 수도 있고, 그럴 때 vue만 새로 배워 건드릴 수 있도록 어려워도 redux를 미리 배워 두자는 생각이 들었다.

 

학습자료

부트캠프에서 배운 걸 복습하면서 깨달은 한 가지는, '전체를 한 번 조망한 뒤 세부를 읽어야 한다'는 것이었다.

코드스테이츠 컨텐츠는 기본적으로 세부를 설명하는 글 위주라 머릿속에 그림을 그리기가 쉽지 않다.

이걸 한창 학습할 때 생각해봤어야 했는데..

 

시작은 redux가 필요한 이유

* React 입문자들이 알아야할 Redux 쉽게설명 (8분컷) https://youtu.be/QZcYz2NrDIs

진짜 진주와도 같은 영상이다.. redux 입문자들이 '리덕스 기초'나 '리덕스 개념'을 검색하면 보고 싶은 것은 바로 이런 설명이다. 일단 여기서 store와 reducer가 서버-api같은 역할을 한다는 느낌을 받고 무릎을 탁 침.

 

그 다음은 생활코딩 WEB2 Redux https://opentutorials.org/course/4901

취향이 아니라고 생각하면서도 계속 찾게 되는 강의다. 어쩔 수 없다. 그냥 1.25배 맞춰놓고 듣는다.

처음엔 redux-react로 들어갔는데 바닐라js + redux부터 들으래서 그렇게 했다.

잘 한 선택인 것 같다. 전에는 처음부터 react에 redux를 얹어서 들었는데 모든 개념이 너무 헷갈렸다.

이번에도 subscribe 들으면서 'useEffect로 의존성 설정해 놓으면 안 되나..?' 했다가 지금 바닐라라는 걸 깨달았다.

그러고 나니 '엄청 유용하잖아..? 그냥 복잡해보였는데 합리적으로 분리해서 돌아가는 거네' 싶었다.

 

• createStore (함수) : store를 만드는 함수
• store (객체) : createSotre 값을 받아 만든 저장소
• action (객체) : state 를 변화시키기 위한 정보 묶음
• getState (함수) : store에 저장되어 있는 state를 읽어오는 함수
• dispatch (함수) : action 객체를 reducer에 전달
• reducer (함수) : store의 값을 type에 따라 변화시키는 API
• subscribe (함수) : store 변화 시 추적해 재실행시킬 함수를 등록

 

또 그 다음은 생활코딩 WEB2 React - Redux 2022 개정판 https://youtu.be/yjuwpf7VH74

이전 것만큼 자세하지는 않지만 대략 알아들을 만하다.

 

• Provider(컴포넌트)로 store를 내려줄 범위를 감싸주고 (props로 state 내려주면 Provider 스코프 내 어디서든 접근 가능)
• getState 대신 useSelector를 사용해 store에서 사용하고 싶은 값을 선택해 읽어오고
• dispatch 대신 useDispatch를 사용해 변경한다.

 

또 그 다음은 CRA에 비길 만하다는 Redux Toolkit  https://youtu.be/9wrHxqI6zuM

+) 코딩알려주는 누나 redux toolkit https://youtu.be/UKnLwVm9suY

바닐라로 redux 들을 때부터 'state가 많아지면 그 중에 하나가 변화할 때마다 subscribe한 함수들도 전부 리렌더시키는 거 너무 낭비 아닌가'라고 생각했는데, 바로 여기서 slice라는 개념으로 store를 쪼갤 수 있다.

또 액션 생성함수를 제공해서, 매번 액션을 새로 생성하고 immutable하게 관리하기 위해 spread로 뿌려주는 과정을 없애준다!

 

• createSlice로 slice를 만들고
• configureSlice(name : "prefix", initialState, reducers : {reducer1, reducer2, reducer3 } ) 함수에 초기 상태, 리듀서, 액션 타입을 객체 형태로 전달해 한 번에 지정할 수 있다.
• actions을 만들 때는 dispatch 없이 sliceName.actions.reducer3(payload) 형태의 메소드로 액션을 자동생성/전달할 수 있다.

 

회고

뭔가 자꾸 얹어지고 기워지면서 새 개념들이 많아지기는 하는데, 아주 기초 개념에서부터 차근차근 밟아 올라가니 이해 못할 것도 없다. 또, 확실히 뒤로 가면서 더 단순하고 가볍게 작성할 수 있게 되는 걸 보니 리소스를 엄청 잡아먹는 게 아니라면 안 쓸 이유도 없어 보인다.

주중에 이전에 작성한 자료 확인하면서 보충할 건 보충하고 수정할 건 수정하고, 투두리스트 만든 거에 적용하면서 손에 익혀야겠다. 여유가 좀 있으면 다른 거 먼저 공부하고 노마드코더에서는 redux 어떻게 쓰고 있는지도 보러 가야지.