1. useReducer를 통한 refactoring
기존의 상태 관리 함수 onCreate, onUpdate, onDelete를 useReducer를 통해 refactoring 해본다.
useState -> useReducer(state, dispatch)로 바꿔주고, 외부에 매개변수가 state, action인 reducer 함수를 작성해서 진행한다.
onCreate
onCreate 함수에 매개변수로 content를 넣어주고, dispatch의 type을 "CREATE", data를 객체형태로 넣어준다.
data의 content는 매개변수로 들어오는 content를 넣어주고 App component밖에서 reducer 함수를 action.type이 "CREATE"일 때 [action.data, ...state]를 설정해주면 추가기능을 구현할 수 있다.
onUpdate
onUpdate 함수에 매개변수로 targetId를 넣어주고, dispatch의 type을 "UPDATE", targetId를 targetId를 넣어준다.
reducer 함수를 action.type이 "UPDATE"일 때, 기존에 작성했던 코드를 적어주면 된다.
onDelete
onDelete 함수에 매개변수로 targetId를 넣어주고, dispatch의 type을 "DELETE", targetId를 targetId를 넣어준다.
reducer 함수를 action.type이 "DELETE"일 때, 기존에 작성했던 코드를 넣어준다.
이처럼 useState를 사용한 코드는 상태 관리 함수들이 길어지는데 반해, useReducer를 사용하면 가독성을 높일 수 있다.
꾸준🐢