상태로 토글하기

Coddy React 여정의 기초 (Fundamentals) 섹션에 포함된 레슨 — 42개 중 25번째.

State는 숫자뿐만이 아닙니다. boolean state는 무언가를 보여주거나 숨기기 위한 표준 스위치 역할을 합니다:

const [isOpen, setIsOpen] = useState(false);

<button onClick={() => setIsOpen(!isOpen)}>Menu</button>
{isOpen ? <p>I am visible!</p> : null}

두 가지 트릭이 함께 작동합니다:

setIsOpen(!isOpen): !가 불리언 값을 반전시키므로, 하나의 버튼으로 열고 닫는 것이 모두 가능합니다
{condition ? jsx : null}: null을 렌더링하면 아무것도 렌더링되지 않습니다. 엘리먼트가 숨겨지는 것이 아니라 존재하지 않게 됩니다

챌린지

중급

스포일러 숨김 해제 기능을 작성하세요.

false로 시작하는 불리언 상태 revealed를 추가하세요.
버튼(id="toggle")을 클릭할 때마다 상태가 반전됩니다.
숨김이 해제되었을 때(revealed가 true일 때), id="secret" 및 The cake is real 텍스트를 가진 <p>를 표시하고, 그렇지 않으면 null을 렌더링하세요.

직접 해보기

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>