REACT Hooks 노트 useReducer 정리

useReducer

- useState처럼 State를 생성하고 관리할 수 있는 도구이다.

- useState와 달리 여러개의 복잡한 상태관리가 필요할 때 사용하자

- 유지보수도 편하다!

 

useState를 통하는 상태 관리... 여러 핸들러를 하나의 함수로 사용할 수 있다.

 

서로 연관되어 있는 복잡한 상태들을 하나의 객체로 관리할 수 있다.
- 1개의 요소에서 여러가지 상태변화들을 관리한다면 useReducer를 사용하자
- 다른 상태값에 의존하여 상태값을 변경하는 경우에도 useReducer를 사용 하자 / 리덕스를 사용하자

---

const [state, dispatch] = useReducer(reducer, initialState);

const [state, dispatch] = useReducer(reducer, initialState, [initFn]);

state

- 업데이트된 상태값 (최신 상태값)

- reducer(useReducer의 첫번째 인자 함수)로만 업데이트 가능

- state를 수정할때마다 dispatch를 호출한다.

 

 

initialState

- 초기 상태값 === 초기 state값

 

 

initFn

- 세번째 인수로 전달하게 되면 초기 상태를 계산하는 함수로 옵션을 전달할 수 있다.

---

dispatch(action)

- 업데이트를 해야할 요구사항( state에 대해서 수정, (데이터 추가, 제거, 수정) 등등을 도와주는 함수 )

- useReducer가 만들어준 함수이다.

- dispatch를 사용하면 reducer함수가 호출되고 그 인자로 state와 action이 전달 된다.

dispatch({type: "", payload: value})

- 요소에 dispatch를 콜백함수 안에 넣어서 사용

- dispatch type에는 "요구사항이름", payload는 보여질 "변경된 상태값"

 

action

- 요구할 내용

- 여러 요구사항들을 진행

- dispatch가 불리면 reducer가 호출되고 그 인자로 action이 전달된다.)

 

---

reducer

- State를 업데이트 해주는 역할

const reducer = (state, action) => {
	switch(action.type) {
    	case "요구사항이름" :
        	return state ... 반환할 값
        ...
        ...
        default:
        	return state
}

- if 또는 switch문을 사용

- action.type을 확인하여 요구사항에 맞는 값을 반환

- 요구사항이름과 맞는 type이 없으면 state기본 값 반환

 

---

사용 예시 1

 

- 1개의 input에서 값을 입력받아 추가 및 제거를 실행하려고 한다.

- 예금, 출금을 통해서 type을 설정하고 dispatch로 action, payload를 넘겨주어 상태를 확인한다.

- 이렇게 여러개의 요구사항들을 action을 통해서 넘겨주어 사용할 수 있다.

 

 

사용 예시 2

 

- input의 입력값을 받아서 추가하고 요소를 클릭하면 이름에 체크라인을 하도록 한다.

- 삭제도 가능하며, 총 학생 수도 계산한다.

- 3가지 action.type을 통해서 추가, 제거, 체크를 할 수 있다.

- count, students, isHere 3가지 값을 가진 객체지만 더 많은 값들을 가지고 복잡한 상태관리를 해야한다면 더 효율적이게 사용할 수 있을 것 같다.

 

 

---

- useState는 가벼운 상태관리에서만 사용하고 useReducer는 더 복잡한 상태관리에 있어서 사용해야할 것 같다.

- 리덕스를 사용하게되면 useReducer는 사용할일이 없을것 같다..

그러나 아직 정확하게 실행되는 로직을 이해하지 못해서 이해하고자 작성했다.

dispatch, 초기값, action, reducer함수 등 로직에 대해서 이해가 되었다..

todoList를 만들면서 리덕스를 사용하여 적용시켜보도록 해야겠다..!