useReducer
– useState와 마찬가지로 State를 생성하고 관리할 수 있는 도구입니다.
– 다중 복합 상태 관리가 필요한 경우 useState와 반대로 사용
– 유지보수도 간편!
useState를 통한 상태 관리… 여러 개의 핸들러를 하나의 함수로 사용할 수 있습니다.
서로 연관되어 있는 복잡한 상태들을 하나의 객체로 관리할 수 있다.
- 1개의 요소에서 여러가지 상태변화들을 관리한다면 useReducer를 사용하자
- 다른 상태값에 의존하여 상태값을 변경하는 경우에도 useReducer를 사용 하자 / 리덕스를 사용하자const (state, dispatch) = useReducer(reducer, initialState);
const (state, dispatch) = useReducer(reducer, initialState, (initFn));상태
– 업데이트된 상태 값(최신 상태 값)
– 감속기로만 업데이트 가능(useReducer의 첫 번째 인수 함수)
– 상태가 변경될 때마다 배송하다경제적 지원
초기 상태
– 초기 상태 값 === 초기 상태 값
초기화Fn
– 세 번째 인자로 전달하면 초기 상태를 계산하는 함수에 옵션을 전달할 수 있습니다.
배송(작업)
– 업데이트 요청(상태 변경을 도와주는 기능(데이터 추가, 제거, 변경) 등)
– useReducer로 만든 함수입니다.
– 디스패치를 사용하면 리듀서 함수가 호출되어 상태와 행동전달될 것입니다
dispatch({type: "", payload: value})– 요소에서 배송하다콜백 함수에 사용
– 디스패치 유형에 대한 “요구 사항 이름”, 페이로드에 대한 “변경된 상태 값”
행동
– 물어볼 것
– 다수의 요청을 진행
– Dispatch가 호출되면 Reducer가 호출되고 action이 인자로 전달된다.
)
감속기
– 상태를 업데이트하는 역할
const reducer = (state, action) => {
switch(action.type) {
case "요구사항이름" :
return state ... 반환할 값
...
...
default:
return state
}– if 또는 switch 문을 사용하십시오.
– action.type을 확인하고 필요에 맞는 값을 반환합니다.
– 요구사항 이름과 일치하는 유형이 없으면 상태 기본값 반환
예 1
– 입력에서 값을 받아 추가 및 제거를 시도합니다.
– 입출금 종류를 설정하고 배송을 통해 액션과 페이로드를 보내 상태를 확인합니다.
– 하나의 액션을 통해 라우팅하여 여러 요청을 사용할 수 있습니다.
적용예 2
– 입력에서 입력값을 가져와서 추가하면 해당 항목을 클릭 성체크라인을 엽니다.
– 삭제가 가능하며, 전체 수강생 수를 합산합니다.
– 세 가지 유형의 작업을 추가, 제거 및 검토할 수 있습니다.
– count 값이 3개(students, isHere) 있는 객체인데, 더 많은 값을 가진 복잡한 상태 관리가 필요할 때 사용하는 것이 더 효율적일 것 같습니다.
– useState는 가벼운 상태 관리에만 사용해야 하며 useReducer는 더 복잡한 상태 관리에 사용해야 합니다.
– Redux 사용시 useReducer는 사용하지 않는 것 같습니다.
하지만 여전히 제대로 돌아가는 로직을 이해하지 못해서 이해하려고 썼습니다.
배송, 초기값, 액션, 리듀스 기능 같은 로직을 이해합니다.
todoList를 만들때 Redux로 적용해보도록 하겠습니다.
.!