flipping state back and forth 연습

Juyeon Lee·2022년 5월 3일
0

REACT 리액트

목록 보기
21/65

클릭하면 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)

이렇게 해주면 된다는걸 깨달음 ㅠㅠ 왜 봐야지만 이게 떠오르는거지 하하하

0개의 댓글