useState

정의

• React에서 정의하는 state 를 함수형 컴포넌트에서 사용하게 해주는 Hook
• *this.state 와 this.setState 를 대체*

사용법

const [value, setValue] = useState(0);

• argument : state 인 value 의 초기값 설정
• return값 : 배열
  • 첫 번째 요소 : 상태값 value
  • 두 번째 요소 : value를 변경할 수 있는 함수 ( 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

1. *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 관련하여 재할당하지 않음
   

2. 이전 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];
   	});
   };
   

3. 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,
   		}
   	});
   };