useReducer
useReducer는 useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해 주고 싶을 때 사용하는 Hook이다.
Reducer는 현재 상태, 업데이트를 위해 필요한 정보를 담은 액션값을 전달받아 새로운 상태를 반환하는 함수다. 리듀서 함수에서 새로운 상태를 만들 때는 반드시 불변성을 지켜주어야 한다.
function reducer(state,action){
return { ... }; //불변성을 지키면서 업데이트한 새로운 상태를 반환
}액션 값은 주로 다음과 같은 형태로 이루어 져 있다.
{
type:"INCREMENT"
//다른 값들이 필요하다면 추가로 들어감
}useReducer에서 사용하는 액션 객체는 반드시 type을 지니고 있을 필요는 없다. 심지어 객체가 아니라 문자열이나 숫자여도 상관없다.
useReducer로 카운터 구현하기
function reducer(state,action){
switch(action.type){
case 'INCREMENT':
return { value: state.value + 1};
case 'DECREMENT':
return { value: state.value - 1};
default:
return state;
}
}
const useReducer = () => {
const [state,dispatch] = useReducer(reducer, {value: 0})
return (
<div>
<p>현재 카운터 값은 <b>{state.value}</b>입니다.</p>
<button onClick={() => dispatch({type: 'INCREMENT'})}>+1</button>
<button onClick={() => dispatch({type: 'DECREMENT'})}>-1</button>
</div>
);
};
export default useReducer;useReducer의 첫 번째 파라미터에는 리듀서 함수를 넣고 두 번째 파라미터에는 해당 리듀서의 기본값을 넣어 준다. 이 Hook을 사용하면 state 값과 dispatch 함수를 받아 온다. 여기서 state는 현재 가리키고 있는 상태고, dispatch는 액션을 발생시키는 함수다. dispatch(action)과 같은 형태로, 함수 안에 파라미터로 액션 값을 넣어주면 리듀서 함수가 호출되는 구조이다.
useReducer를 사용했을 때 가장 큰 장점은 컴포넌트 업데이트 로직을 컴포넌트 바깥으로 빼낼 수 있다는 것이다.
useReducer로 인풋 상태 관리하기
지난번에 작성한 Info에는 인풋이 여러 개여서 useState를 여러번 사용하였다. 만약 useReducer를 사용한다면 기존에 클래스형 컴포넌트에서 input 태그에 name 값을 할당하고, e.target.name을 참조하여 setState를 해준 것과 유사한 방식으로 작업을 처리할 수 있다.
import React, { useReducer } from 'react';
function reducer(state,action){
return{
...state,
[action.name]: action.value
};
}
const ReducerInfo = () => {
const [state,dispatch] = useReducer(reducer,{
name:'',
nickname: '',
phone: ''
})
const {name, nickname,phone,address,email} = state;
const onChange = e => {
dispatch(e.target);
}
return (
<div>
<form action="">
<input name="name" value={name} onChange={onChange} type="text" />
<input name="nickname" value={nickname} onChange={onChange} type="text" />
<input name="phone" value={phone} onChange={onChange} type="number" />
<input name="address" value={address} onChange={onChange} type="address" />
<input name="email" value={email} onChange={onChange} type="email" />
</form>
<div>
<b>이름</b>: {name}
<b>닉네임</b>: {nickname}
<b>핸드폰번호</b>: {phone}
<b>주소</b>: {address}
<b>이메일</b>: {email}
</div>
</div>
);
};
export default ReducerInfo;useReducer에서의 액션은 그 어떤 값도 사용 가능하다. 그래서 이벤트 객체가 지니고 있는 e.target값 자체를 action의 값으로 사용하였다. 이런식으로 인풋을 관리하면 인풋의 개수가 많아져도 코드를 짧고 깔끔하게 유지할 수 있다.
useMemo
useMemo를 사용하면 함수 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다. 먼저 리스트에 숫자를 추가하면 추가된 숫자들의 평균을 보여 주는 함수 컴포넌트를 작성해보자
import React, { useState } from 'react';
const getAverage = numbers => {
console.log('평균값 계산중..');
if(numbers.length === 0) return 0
const sum = numbers.reduce((a,b) => a+ b)
return sum / numbers.length
}
const Average = () => {
const [list,setList] = useState([]);
const [number,setNumber] = useState('');
const onChange = e => {
setNumber(e.target.value);
};
const onInsert = e =>{
const nextList = list.concat(parseInt(number));
setList(nextList);
setNumber('');
}
return (
<div>
<input value={number} onChange={onChange}/>
<button onClick={onInsert}>등록</button>
<ul>
{list.map((value,index) =>(<li key={index}>{value}</li>))}
</ul>
<div>
<b>평균값:</b>{getAverage(list)}
</div>
</div>
);
};
export default Average;위 코드처럼 작성한 뒤 콘솔창을 보면, 인풋 안에 숫자를 입력할 때마다 계속 getAverage 함수가 호출되는것을 확인할 수 있다. 인풋 내용이 바뀔 때는 평균값을 다시 계산할 필요가 없으므로 작업 최적화를 위해 useMemo를 사용할 수 있다.
useMemo는 렌더링하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하고 원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 사용하는 방식이다.
import React, { useState } from 'react';
const getAverage = numbers => {
console.log('평균값 계산중..');
if(numbers.length === 0) return 0
const sum = numbers.reduce((a,b) => a+ b)
return sum / numbers.length
}
const Average = () => {
const [list,setList] = useState([]);
const [number,setNumber] = useState('');
const onChange = e => {
setNumber(e.target.value);
};
const onInsert = e =>{
const nextList = list.concat(parseInt(number));
setList(nextList);
setNumber('');
}
const avg = useMemo(() => getAverage(list), [list]);
return (
<div>
<input value={number} onChange={onChange}/>
<button onClick={onInsert}>등록</button>
<ul>
{list.map((value,index) =>(<li key={index}>{value}</li>))}
</ul>
<div>
<b>평균값:</b>{avg}
</div>
</div>
);
};
export default Average;useCallback
useCallback은 useMemo와 상당히 비슷한 함수이다. 주로 렌더링 성능을 최적화해야 하는 상황에서 사용한다. 이 Hook을 사용하면 만들어 놨던 함수를 재사용 할 수 있다.
방금 구현한 Average 컴포넌트를 보면 onChange와 onInsert 함수를 선언하였는데, 이렇게 선언하면 컴포넌트가 리 렌더링될 때마다 새로 만들어진 함수를 사용하게 된다. 대부분의 경우 이러한 방식은 문제가 없지만, 컴포넌트의 렌더링이 자주 발생하거나 렌더링해야 할 컴포넌트의 갯수가 많아지면 이 부분을 최적화해 주는 것이 좋다.
const Average = () => {
const [list,setList] = useState([]);
const [number,setNumber] = useState('');
//onChange함수는 컴포넌트가 처음 랜더링 될 때만 함수를 생성하고 이후는 재활용
const onChange = useCallback(e => {
setNumber(e.target.value);
},[])
//onInsert 함수는 number 또는 list가 바뀔때만 함수 생성
const onInsert = useCallback(e =>{
const nextList = list.concat(parseInt(number));
setList(nextList);
setNumber('');
},[number,list])
const avg = useMemo(() => getAverage(list),[list])
return (
<div>
<input value={number} onChange={onChange}/>
<button onClick={onInsert}>등록</button>
<ul>
{list.map((value,index) =>(<li key={index}>{value}</li>))}
</ul>
<div>
<b>평균값:</b>{avg}
</div>
</div>
);
};
export default Average;