[오늘개발] 리액트 이전상태를 가지고 state 업데이트하기

같은 컴포넌트안에서도 여러 개의 상태를 가질수 있고 하나의 상태를 가질수 있다.

 

상태를 여러개를 만들수도 있고

상태를 객체로 하나로 만들수도 있다.

 

 

여러개의 상태를 하나의 객체로 관리하는 예시

const Exam = () => {
	const [userInput, setUserInput] = useState({
    		title: '',
            amount: ''    
    });
    
    const titleChangeHandler = (event) => {
    	setUserInput({
        	...userInput,
            title: event.target.value
        });
    }
    
    // preState 사용
    const titleChangeHandler = (event) => {
    	setUserInput((prevState) => {
        	return {...prevState, title: event.target.value}
        })
    }
    
    ......
    이하 생략
}

생각해 볼 거리

이전상태에 의존 기존값을 복사한뒤 새값으로 오버라이드 함 ㅋ

리액트는 상태 업데이트를 예약 한다.

그래서 다수의 상태 업데이트를 동시에 예약할 경우 오래됐거나 잘못된 상태 스냅샷에

의존하게 될수도 있음.

최신 상태 스냅샷이 되도록 보장해준다. 예약된 모든 상태 업데이트를 기억하고

최신상태의 스냅샷을 가지고 업데이트 해줄수 있는 안전한 방법이다.

 

그래서 이전 상태에 의존해서 업데이트 할 때는 꼭 이 함수 문법을 사용해야한다!

 

 

---

공용 핸들러 함수를 만들 수도 있다.

이벤트에 화살표 함수를 사용해 함수를 호출한다.