조건부 렌더링

&&와 ? :로 보여 줄지 말지를 바꾼다

핵심 포인트

JSX의 { } 안에는 if를 쓸 수 없습니다. 대신 &&나 ? :를 사용합니다
보여 줄지 말지는 &&: {isOpen && 내용}
A와 B 중 하나를 보여 줄 때는 ? :: {isLoggedIn ? 환영합니다 : 로그인해 주세요}

직접 해 보기

import { useState } from "react"

export default function App() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <div style={{ padding: 16 }}>
      <button onClick={() => setIsOpen(!isOpen)}>
        {isOpen ? "닫기" : "열기"}
      </button>
      {isOpen && <p>열렸을 때만 여기가 표시됩니다</p>}
    </div>
  )
}

Open Sandbox

펼쳤을 때 나오는 문장을 두 줄로 늘려 보세요
접혀 있을 때만 "접힘"을 표시해 보세요 (힌트: !isOpen &&)
처음부터 펼쳐진 상태로 시작하게 해 보세요 (힌트: useState의 초깃값)

자주 하는 실수

숫자를 && 조건으로 쓰면 "0"이 표시됨

{count && …}라고 쓰면 count가 0일 때 화면에 0이 나옵니다. 숫자는 {count > 0 && …}처럼 씁니다.

!isOpen은 "isOpen의 반대"

!는 true와 false를 뒤집습니다. setIsOpen(!isOpen)은 "지금과 반대로 바꾸기"로, 펼치기/접기를 전환하는 기본 패턴입니다.