이전 프로젝트에서 상태 관리 라이브러리의 필요성을 뼈저리게 느끼고 redux toolkit을 이용하여 todo service를 재구현해 봤다.
개념과 주요 함수를 이해하고 난 후에는 비교적 쉽고 재미있게 구현을 했다.
redux toolkit 덕분에 잃어버렸던 태그 컬러도 찾고 마음의 평안도 얻었다. 😇써보면서 느낀 상태관리 라이브러리의 좋은점
- 하나의 store에서 상태를 관리하여 로직을 파악하기 쉬웠다.
(이전) state&props로 상태를 관리할때는 하나의 상태를 두개의 컴포넌트가 변경하여 의도치 않은 필터링이 걸리는 경우가 있었다.
→ (문제상황) selectedTag 상태를 사이드바와 모달에서 사용하였는데, 이로인해 모달에서 태그를 선택하면 의도치 않게 사이드바의 태그 필터링이 활성화되었다. 이를 해결하기 위해 상태를 나눠야했다.
→ (해결) 상태관리 라이브러리에서는 add 버튼을 누를 때 필터링을 해제하도록 하여 문제를 방지했다. 즉 상태가 아니라 액션을 나누어 문제를 해결했다.- 각 기능을 독립적으로 구현가능하다(?)
state&props로 구현할때는 하나의 기능을 구현하면, 이미 구현한 기능 하나 또는 여러개를 내어주어야했다 🥲 (꼬이고 꼬이고 꼬이는 상태들.. ) 그런데 상태관리 라이브러리를 사용하니 이런 문제가 자연스레 해결되었다.
TIL
📆 3/28(화)
- redux toolkit 핵심 컨셉을 익히고 slice, store 등의 초기 셋업을 했다.
- redux 공식 문서에서 비슷한 예제를 찾아서 예제를 중심으로 어떻게 구현해야할지 그려보았다.
📆 3/29(수)
🔫 아주 중요하게 배운점
리팩토링을 한다고 이전의 코드를 순서없이 때려 넣으면 안된다! redux toolkit 라이브러리를 사용하여 프로젝트를 진행하는 것처럼 구현 순서를 따라 생각하면서 코드를 짜야한다.
(생각없이 때려넣다가 뒤엎은자의 깨달음)
createSlice를 실제 코드에서 어떻게 사용하면될지 감을 잡았다.
📆 3/30(목)
🔫 그냥 중요하게 배운점
하나의 reducer에 여러 state 변경을 넣지말자. 쉽게 state 변경이 꼬여버리는데, 천재들은 몰라도 나는 풀줄을 몰라.. 그냥 따로 적자.
createSlice로 생성된 slice에서 정의된 state는해당 slice의 scope 안에서만 유효하다. 즉, todoSlice에서 정의된 state를 filterSlice의 initialState로 쓸 수 없다.- 쓰고싶어서(써야할 것 같아서) 많이 고민했는데 컨셉을 이해하고 나니 사실 고민할 필요가 없던 문제였다.
- 그냥 하나의 컴포넌트에 다른 slice에서 정의된 state, reducer를 모아 쓰면되는거였다. (글로 적으니 너무 당연하고 간단한데.. 오늘 제일 많은 시간을 쓴 부분이다. 🫠)
- 리덕스의 상태 불변성 유지
- 리덕스에 관리되는 상태는 직접 변경하면 안된다.
- initialState는 해당 slice의 reducer를 통해서만 업데이트 되어야한다.
// 다른 slice에서 가져온 todos state의 변경으로 현재 slice의 변경을 의도하면 안되다. 불변성에 어긋난다.
// 그리고 initialState는 "오직" slice가 처음 생성될때만 사용되어서 업데이트 자체가 안된다.
const todos = useSelector(state => state.todos);
const filterSlice = createSlice({
name: "filter",
initialState: todos,
reducers: {}})🔫 자주한 실수
- reducer를 작성할때 state를 자꾸 빼먹어 undefined 에러를 수십번 봤다. 하핫
잊지말자state.todos!
배운 내용
핵심 로직 & 주요 함수
createSlice()함수는 slice의이름과초기 상태(initial state), 그리고reducers 객체를 인자로 받는다.- slice는 상태, 리듀서, 액션을 모두 포함하는 redux store의 작은 조각이다.
name은 해당 slice(상태)의 이름을 의미한다. 보통 상태의 이름으로 설정한다.initialState는 해당 slice의 초기 상태를 정의하는 것으로 필수적인 요소이다.reducers는 해당 slice의 액션 생성 함수들을 정의한다.- 각 프로퍼티(key)는 action의 타입이 된다.
- 프로퍼티의 값은 reducer 함수이다.
- 리듀서는 state(현재 상태), action(디스패치되는 액션)을 받는다.
- 두 인자를 받아서 새로운 state(=업데이트된 state)를 반환해준다.
- 마지막으로
createSlice함수가 반환하는 객체는 store에 등록해주면 된다 → configureStore
configureStore함수는 redux 스토어 생성할때 사용하고,
combineReducers함수는 redux 스토어에 여러 리듀서를 함께 적용하고 싶을때 사용한다는데, combineReducers의 쓰임은 아직 잘 모르겠다. (그래서 안썼다)useSelector함수는 Redux 스토어에서 state를 추출할 때 사용한다.useDispatch함수로 dispatch 메서드에 접근 →액션 생성→ Redux store에서state 변경- 리듀서 함수는
(previousState, action) => newState의 형태를 가진다.- 상태(previousState)와 액션(action)을 한데 묶고 → 다음 단계(newState)를 리턴해준다.
- reducer의 두번째 인자
action의 역할 → 데이터를 전달해준다.(나에게 ! 👻) - action.type : state 변경 함수 이름을 전달해줌
action.payload : 파라미터(자료들)을 전달해줌
시연 화면
create, update
- 메인 화면의 우측 상단의 "+" 버튼을 누르면 todo 생성이 가능한 create modal을 띄운다.
- todo post의 우측 상단 "..." 버튼을 눌러 나오는 모달에서 update를 선택하면 기존의 todo 수정이 가능한 update modal을 띄운다.
delete
- todo post의 우측 상단 "..." 버튼을 눌러 나오는 모달에서 delete를 선택하면, 해당 todo post가 삭제된다.
filtering
- 좌측 사이드에서 tag를 선택하면, 선택된 tag에 해당하는 todo만 화면에 보인다.
- Hide Done Tasks 체크박스를 누르면 완료된 todo는 화면에 보이지 않는다.
darkmode
- 토글 버튼을 누르면 다크모드, 라이트모드간 전환이 발생한다.
다음은 뭐하지 ?
- 일단 서버 추가하기
CRUD의 Read는 서버에서 데이터를 읽어오는 것을 의미한다고 한다. 나는 오늘에서야 알았고...🥲 R이 빠져있는 CRUD를 먼저 채워넣어야겠다. - 할 일 포스트에 do date 추가하기
- 캘린더 페이지 만들기
- 자잘한 버그 픽스하기(라고 쓰고 제일 어렵고 오래걸릴 일이라고 읽는다...)
아자아자 화이팅 ! 🔥
