[React] setState - prevState (prev 인자)

prevState

---

setState를 이용해서 isOpen이라는 state값을 true/false로 바꾸는 함수를 구현해보자.

// isOpen이라는 state를 true/false로 스위칭한다.

const [ isOpen, setIsOpen ] = useState(false);
const onClickButton = () => {
	if (isOpen === false) {
    	setIsOpen(true)
    } else if (isOpen === true) {
    	setIsOpen(false)
    }
}

setState의 prev라는 인자를 이용하면 이 코드를 더 간단하게 줄일 수 있다.

const [ isOpen, setIsOpen ] = useState(false);
const onClickButton = () => {
    setIsOpen(prev => !prev)
}

setState 내부에 들어가는 prev라는 인자는 해당 state의 직전 값을 반환한다.

이 prev와 화살표 함수를 이용해 이전의 state값이 true였다면 false로, false였다면 true로 바뀌는 함수를 쉽게 구현할 수 있다.