hook이론4. useReducer

목차

1. useReducer()
2. useReducer 사용하여 state 변경
3. state 초기화(명시, 지연)

 

 

1. useReducer() 메서드란?

• useState()의 대체 메서드
• state의 하위값이 다수 존재하는 등의 복잡한 정적 로직 만드는 경우 또는 새로운 state가 이전의 state에 의존적인 경우 useReducer 사용
• 상태를 바꾸는 코드를 한 공간에 밀어넣기 위해서 Reducer를 씀
• (=즉, useReducer() 메서드는 상태를 만들고 상태를 변경할 수 있는 메서드임)

 

2. useReducer 사용하여 상태 변경

2-1. 가져오기

import React,{useReducer} from 'react'

 

 

 

 

2-2 hook 호출

const [state, dispatch] = useReducer(함수, initialState)

 

(1) 매개변수

• 첫번째 매개변수: reducer 함수
• 첫번째 매개변수: 초기 state

 

(2) 반환

• 현재 state
• dispatch - state 바꾸기 위해 사용됨

 

dispatch 실행 시, useReducer의 첫번재 매개변수(콜백함수)가 실행됨

 

 

 

 

2-3 dispatch() 호출

• dispatch() 호출 시 state 중 어떤 데이터를 변경할 지 객체 형태로 인자값 줘야 함

 

dispatch({type:'CHANGE_ID'})

 

 

2-4. reducer 호출

const reducer = (state,action) => {
    console.log(state,action)
    return state;
}

 

(1) 매개변수

• 첫번째 매개변수: 이전의 state 값
• 두번째 매개변수 action: dispatch() 메서드의 인자값

(2) 반환

• 새로운 state

 

 

<중요> 코드 실행 순서
(1) useReducer()호출하고 반환값을 state와 dispatch에 담음
(2) 디스패치() 메서드 호출 시,
(3) useReducer의 첫번째 인자값인 함수 reducer 실행
(4) reducer는 state와 action을 매개변수로 받고
(5) 새로운 state를 반환

 

 

 

3. state 초기화

3-1. 초기화 명시 - useReducer()의 두번째 인자로 전달

const [state, dispatch ] = useReducer(
	reducer, {count: initialCount
    })

 

3-2. state 초기화 지연-useReducer()의 세번째 인자로 init 함수 전달