[React] useReducer

useReducer

이전에 상태관리는 useState를 이용해서 컴포넌트 내부에서 이루어졌습니다.
하지만 useReducer를 이용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리할 수 있습니다.
또한 여러개의 상태관리를 한번에 할 수 있습니다.
자세한 설명은 React 공식문서를 참고바랍니다.
https://ko.reactjs.org/docs/hooks-reference.html#usereducer

useReducer 사용해보기

Info.js

	import React from 'react';
	const Info = ({name, age, color, onName, onIncrease, onDecrease, onColor}) => {
	return(
	<>
	<input placeholder="이름" onChange={onName}/>
	<br/>
	<button onClick={onIncrease}>+1</button>
	<button onClick={onDecrease}>-1</button>
	<br/>
	<input placeholder='색상' onChange={onColor}/>
	<p>이름: {name}</p>
	<p>나이: {age}</p>
	<p>좋아하는 색상: {color}</p>
	</>
	)
	}
	export default Info

view raw Info.js hosted with ❤ by GitHub

Input.js

	import React, {useReducer} from "react";
	import Info from "../components/Info";
	const initialState = {
	name: '',
	age: 0,
	color: '',
	}
	function reducer(state, action) {
	switch (action.type) {
	case 'NAME':
	return {...state, name: action.value};
	case 'INCREASE':
	return {...state, age: state.age + 1};
	case 'DECREASE':
	return {...state, age: state.age - 1};
	case 'COLOR':
	return {...state, color: action.value}
	}
	}
	const Input = () => {
	const [state, dispatch] = useReducer(reducer, initialState);
	const {name, age, color} = state;
	const onName = e => {
	dispatch({type: 'NAME', value: e.target.value})
	}
	const onIncrease = () => {
	dispatch({type: 'INCREASE'})
	}
	const onDecrease = () => {
	dispatch({type: 'DECREASE'})
	}
	const onColor = e => {
	dispatch({type: 'COLOR', value: e.target.value})
	}
	return (
	<Info
	name={name}
	age={age}
	color={color}
	onName={onName}
	onIncrease={onIncrease}
	onDecrease={onDecrease}
	onColor={onColor}/>
	)
	}
	export default Input;

view raw Input.js hosted with ❤ by GitHub

Input.js에서 상태관리를 하고 Info.js로 전달해주는 소스코드를 볼 수 있습니다.
위에 설명한대로 컴포넌트에서 상태관리 로직을 분리시키고 따로 상태관리를 하였습니다.
이름, 나이, 색상 모두 Input.js에서 관리를하고 Info로 전달을 시켜줍니다.

App.js

	import React from "react";
	import Input from "./containers/Input";
	const App = () => {
	return (
	<Input/>
	)
	}
	export default App;

view raw App.js hosted with ❤ by GitHub

실행화면

 

전체 소스코드는 Github에서 확인 가능합니다.

https://github.com/hanhyung6376/learn-react/tree/master/use-reducer