useState

정의

사용법

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

성능 최적화 (함수형 업데이트)

*useStatesetState는 이전 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,
    		}
    	});
    };