useReducer 리액트 상태관리를 돕는 리액트 훅이다
사용하면 상태변화 로직을 분리할 수 있기 때문에 컴포넌트를 간결하게 작성 가능하다
컴포넌트 바깥에서 작성하며 switch 케이스 문법 사용한다
사용법
0번째 인덱스인 count = 스테이트다 (useState에서 사용했던 것 처럼 {count} 이렇게 사용 가능)
첫번째 인덱스인 dispatch = 상태를 변화시키는 액션을 발생시키는 함수이다
useReducer 함수 호출 시 reducer 꼭 전달해야함!!
(dispatch 되어 액션이 발생한 것을 reducer 함수가 처리해준다)
두번째로 전달하는 인자 (여기서 1)는 counter 스테이트의 초기값이다
정리
useReducer을 이용해서 counter 스테이트를 만들고
초기값(여기서는 1)이 할당된다
초기값을 바꿔주고 싶으면 상태변화 함수인 dispatch를 호출한다
상태변화 처리 함수인 reducer가 액션 타입에 따른 처리를 한다 -> counter 스테이트 업데이트
dispatch 함수 호출 시 객체(액션 객체, type 프로퍼티가 들어있다)를 리듀서 함수에 전달됨
reducer 함수
첫번째 인자 = 현재 가장 최신의 인자
두번째 인자 = dispatch 호출할때 전달되었던 액션 객체를 전달받는다
전달받은 액션타입을 토대로 케이스에 따른 스테이트가 바뀐다
보통 가장 복잡한 상태 로직을 갖고 있는 것 = 부모 컴포넌트 (여기서는 Simple.js)이다
[simple.js]
const [data, dispatch] = useReducer(reducer, [])
위처럼 작성하여 useReducer을 사용해보자
우선 simple.js 에서 데이터 스테이트에 어떠한 액션이 존재할 수 있는지 탐색해야한다
그리고 setData가 했었던 역할을 reducer / dispatch로 나눠주자
getData 함수에서 initData를 setData에 넘겨주었다
dispatch({type:"INIT"}) -> 액션 타입은 'INIT' -> 데이터 초기화하는 작업, data:initData
reducer는 액션 객체를 받는다 -> tpye:'INIT' -> 필요한 데이터는 initData다
이제 reducer 함수에서 INIT 타입 액션을 받았을 때 스테이트 변화 시켜주는 코드를 작성하자
왜 Action.data를 반환해줄까?
getData 함수에서 dispatch를 일으켰을때 타입 : init이고 초기화 : data:initData로 했기 때문에
reducer에서 받았을 때 액션 객체에서 data 프로퍼티를 꺼내서 그 값을 반환해주어 새로운 스테이트가 된다
onCreate
바로 dispatch를 작성해보자
dispatch({
type: "CREATE",
data: {
author,
content,
emotion,
id: dataId.current,
},
});원래 있던 작성날짜는 reducer 함수에서 만들어줄것
case "CREATE":{
const created_date = new Date().getTime();
const newItem = {
...action.data,
created_date
}
return [newItem, ...state]
}
onRemove
targetId 만 전달해주어 reducer 함수가 삭제해서 새로운 스테이트를 반환하도록 해주자
onEdit
edit 타입의 액션이 발생했을 때 targetId + newContent를 전달받는다
기존 스테이트에서 map을 통해 targetId와 일치하는 요소를 찾아주어 content : newContent로 수정해주고 나머지 요소는 그대로 돌려준다
reducer 함수
출처
한입리액트
