[React] useReducer

state개수를 줄여준다. 

state가 많아지면 state, setState의 쌍들이 점점 늘어나기 때문에 관리하기 힘들고, 다른 컴포넌트에 넘겨줄게 너무 많아지기 때문에 useReducer를 사용해서 하나의 state와 하나의 setState로 통일할 수 있다. 이것이 useReducer를 사용하는 목적이다.

 

 

const initialState = {

	state1: ‘0’,

	state2: ‘0’,

	state3: ‘0’,

	state4: ‘0’,

};





const UseReducerTest = () => {

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



	// const [state1, setState1] = useState('');

	// const [state2, setState2] = useState('');

	// const [state3, setState3] = useState('');

	// const [state4, setState4] = useState('');



}

 

state(initialState)가 있고 그 안에 객체 형식으로 데이터를 둔다고 가정하자. 이 state는 아무도 직접 수정할 수 없다. 클릭같은 것들을 담당하고 있는 이벤트들이 웹서비스로 부터 계속 발생하는 영역이다.

state를 아무도 수정할 수 없고 이것을 수정하고 싶으면 action을 만들고 이것을 실행(dispatch) 해야한다. 이 action을 어떻게 처리할지는 reducer에서 관리한다. 

 

요약: state가 있고 이 state는 직접 건들수가 없고 바꾸고 싶으면 이벤트가 실행될 때 action을 dispatch해서 state를 바꿔야한다. state를 어떻게 바꿔야할지는 reducer에 기록해야한다.

 

 

reducer 메커니즘