[TIL/React] 2023/05/22

PhoneBook Service 구현

1. InputTodo와 TodoSection 컴포넌트에 대응되는, InputPhoneNumber와 PhoneNumberSection 컴포넌트가 필요함.

2. PhoneBook Service 전용 reducer가 필요함.

3. store에 해당 reducer를 연결해서 동작하도록 해야함.

4. component, reducer 생성과 동시에, commons를 통해 스타일링을 할 필요가 있음.

TodoList Service와 유사하게 코드를 구성함.

InputTodo의 코드를 가져와서 약간의 수정을 가함.

RTK를 통해 여러 개의 reducer 결합하기(feat. createSlice, combineReducers)

1. 'createSlice' 함수를 사용하여 개별 리듀서 생성하기

2. 'combineReducers' 함수를 사용하여 생성된 모든 리듀서 결합하기

- 경로가 이상한데, 이렇게 해줘야 돌아간다. 이 부분은 다시 확인해봐야겠다.

3. store에 연결하기

4. 추가하면 info 배열에 반영되는지 체크

추가적인 기능 구현 1

reducer는 사실상 todo에서 info로만 변경, 내부적인 동작은 동일함.

컴포넌트에서 PhoneBook reducer에 맞게 수정 중.

추가적인 기능 구현 2

분명 똑같이 했는데 버튼의 작동이 정상적이지 않다.

문제 해결하기

문제 1: complete 버튼을 클릭했는데 Unnecessary Number로 넘어가지 않음. 한마디로 isDone이 true로 변화하지 않음

map을 돌려야 하는데 filter를 돌리고 있었다.

문제 2: save 버튼을 클릭하면 delete처럼 화면에서 제거된다.

후... 'up'dated다,,,

문제 3: contact에서 delete 버튼을 클릭하면 unnecessary에 있던 목록도 삭제된다.

filter를 통해 객체를 남겨야 하는데 map을 돌리고 있었다.

Redux middleware

문제 해결에 1시간 정도 소요될 것으로 예상했는데 40분만에 컷해서, middleware의 정의를 살펴봤다.

redux middleware는 일반 명사일 뿐이다. middleware 중에는 ``redux-thunk``라는 middleware가 있다.

정리가 꽤나 잘 되어있다. 링크 참고해서 공부하겠다! 저녁먹고... https://redux-advanced.vlpt.us

미들웨어란?

블로그에서 주어진 환경을 셋팅. 터미널에 다음 코드를 입력했다. (Ducks 구조가 적용되어 있는 간단한 숫자 카운터 코드)

git clone https://github.com/vlpt-playground/redux-starter-kit.git
cd redux-starter-kit
yarn

미들웨어 만들기

- src/lib/loggerMiddleware.js 파일을 생성함

이런 식으로 셋팅됨.

next가 익숙치 않은데, next는 store.dispatch와 유사한 역할을 수행함. 다만, next는 바로 reducer로 넘기거나, 혹은 미들웨어가 더 있다면 다음 미들웨어 처리가 되도록 진행된다. 이게 무슨 말이야.

미들웨어 적용하기

미들웨어는 store를 생성할 때 설정함. redux 모듈 안에 있는 'applyMiddleware'를 사용하여 설정함.

'next(action)'으로 리듀서에 액션을 전달한 것이다. 만약 또 다른 middleware가 있다면 그곳에 액션을 전달했을 것이다. 오늘은 미들웨어를, "중간에서 뭔가를 하는 역할" 정도로 이해했다.