클릭하면 state 바뀌게 하는거 다시 연습해보기
아래 코드를 살펴보자
import React from "react"
export default function App() {
const [isGoingOut, setIsGoingOut] = React.useState(true)
/**
* Challenge:
* - Initialize state for `isGoingOut` as a boolean
* - Make it so clicking the div.state--value flips that
* boolean value (true -> false, false -> true)
* - Display "Yes" if `isGoingOut` is `true`, "No" otherwise
*/
function changeMind() {
setIsGoingOut(prevState => !prevState)
}
return (
<div className="state">
<h1 className="state--title">Do I feel like going out tonight?</h1>
<div onClick={changeMind} className="state--value">
<h1>{isGoingOut ? "Yes" : "No"}</h1>
</div>
</div>
)
}
혼자 해봤을 때
<h1>{isGoingOut ? "Yes" : "No"}</h1>
이 부분 바꾸는걸 깜빡해서 왜 안되지 이러고 있었음 ㅠㅠ
그리고 맨 처음에는 반대로 나오는거 구현할때 어떻게 할지
멍때리고 있다가 나중에 강의 듣고 나서 간단하게
setIsGoingOut(prevState => !prevState)
이렇게 해주면 된다는걸 깨달음 ㅠㅠ 왜 봐야지만 이게 떠오르는거지 하하하