state
를 함수형 컴포넌트에서 사용하게 해주는 Hook*this.state
와 this.setState
를 대체*const [value, setValue] = useState(0);
this.setState()
와 유사 )*useState
의 setState
는 이전 state값을 인자로 받아오는 callback 함수를 통해 인자값을 활용할 수 있다. 이렇게 함수형 업데이트를 활용하면 여러 최적화 되는 방법이 존재한다.*
const [state, setState] = useState();
setState((prev) => prev + 1); // number
setState((prev) => {...prev, newID: newValue}) // object
setState((prev) => [...prev, newValue]) // array
*useCallback
, useMemo
에서 두번째 인자로 들어가는 dependency array의 요소를 줄일 수 있다.*
const [user, setUser] = useState(null);
const onChange = useCallback((e) => {
const {name, value} = e.target;
setUser({
...user,
[name]: value,
});
}, [user]); // 반드시 두번째 인자로 user를 넘겨줘야한다.
const [user, setUser] = useState(null);
const onChange = useCallback((e) => {
const {name, value} = e.target;
setUser((prev) => {
...prev,
[name]: value,
});
}, []); // 더이상 user 관련하여 재할당하지 않음
이전 state 값을 가져오는 것을 항상 보장할 수 있다.
const [name, setName] = useState(null);
const onChangeName = (event) => {
const newName = event.currentTarget.value;
setName(newName);
};
const [name, setName] = useState(null);
const onChangeName = (event) => {
setName((prev) => {
const newName = event.currentTarget.value;
return [...prev, newName];
});
};
setState 관련 로직이 좀 더 깔끔해진다.
새로운 state 와 관련된 모든 로직을 callback 함수안에 넣기 때문에
const [user, setUser] = useState(null);
const onClick = () => {
const newId = 3;
const newMessage = "Hello";
setUser({
...user,
newID: newId,
newMS: newMessage,
});
};
const [user, setUser] = useState(null);
const onClick = () => {
setUser((prev) => {
const newId = 3;
const newMessage = "Hello";
return {
...prev,
newID: newId,
newMS: newMessage,
}
});
};