React useState 처음 써봤을 때 — 모달, 메뉴 토글로 이해한 상태 관리

React를 처음 배울 때 가장 헷갈렸던 것 중 하나가 useState였다. 변수인데 왜 이렇게 복잡하게 쓰는 건지 처음엔 이해가 안 됐다. 포트폴리오 사이트와 모바일 웹앱을 만들면서 직접 써보고 나서야 "아, 이래서 쓰는 거구나"가 됐다.

메뉴 열고 닫기, 리스트 클릭하면 뜨는 모달 팝업 — 이런 것들이 다 useState로 만들어진다. 개념부터 실제 사용 방식까지 정리했다.

useState가 뭔가 — 변하는 값을 저장하는 것

React에서 일반 변수는 값이 바뀌어도 화면이 다시 그려지지 않는다. 클릭했을 때 뭔가 바뀌어 보이게 하려면 화면을 다시 렌더링해야 하는데, 그 역할을 하는 게 useState다.

쉽게 말하면 — "이 값이 바뀌면 화면도 같이 바꿔줘"라고 React에게 알려주는 방식이다.

// useState 기본 사용법
import { useState } from "react";

// [현재 값, 값을 바꾸는 함수] 형태로 쓴다
const [isOpen, setIsOpen] = useState(false);

// false = 초기값 (처음엔 닫혀있다)

실제로 쓴 예시 — 모달 팝업 열고 닫기

포트폴리오에서 리스트 항목을 클릭하면 상세 내용이 담긴 모달 팝업이 뜨는 기능을 만들었다. 이게 useState의 가장 흔한 사용 예시다.

// 모달 열고 닫기
const [isOpen, setIsOpen] = useState(false);

// 버튼 클릭하면 isOpen이 true로 바뀜 → 모달 표시
<button onClick={() => setIsOpen(true)}>열기</button>

// isOpen이 true일 때만 모달 렌더링
{isOpen && (
  <div className="modal">
    <button onClick={() => setIsOpen(false)}>닫기</button>
  </div>
)}

💡 isOpen, setIsOpen 이름은 자유롭게 바꿀 수 있다 useState는 [값, 값을바꾸는함수] 형태로 이름을 직접 정한다. 관례적으로 값을 바꾸는 함수는 set을 앞에 붙인다. isOpen/setIsOpen, isVisible/setIsVisible, count/setCount 등 상황에 맞게 쓰면 된다.

또 다른 예시 — 메뉴 열고 닫기

모바일 웹앱에서 햄버거 메뉴를 클릭하면 사이드 메뉴가 열리는 기능도 같은 방식이다. 클릭할 때마다 true/false가 번갈아 바뀌는 토글 방식으로 구현했다.

// 메뉴 토글 — 클릭할 때마다 열림/닫힘 전환
const [menuOpen, setMenuOpen] = useState(false);

<button onClick={() => setMenuOpen(!menuOpen)}>
  메뉴
</button>

{menuOpen && <nav>...메뉴 내용...</nav>}

💡 !menuOpen 이 뭔가? 느낌표(!)는 값을 반대로 뒤집는다. menuOpen이 false면 !menuOpen은 true, true면 false가 된다. 클릭할 때마다 열림/닫힘이 번갈아 바뀌는 토글 구현에 자주 쓰인다.

useState를 쓰는 상황 정리

• 1
  모달/팝업 열고 닫기 — isOpen true/false로 표시 여부 제어
• 2
  메뉴 토글 — 햄버거 메뉴, 드롭다운 등
• 3
  탭 전환 — 어떤 탭이 선택됐는지 저장
• 4
  폼 입력값 저장 — 사용자가 입력하는 텍스트 실시간 저장
• 5
  카운터 — 숫자가 늘어나거나 줄어드는 기능

useState는 값이 바뀔 때 화면도 같이 바꿔주는 React의 핵심 기능이다.
모달 열고 닫기, 메뉴 토글, 탭 전환처럼 클릭하면 뭔가 바뀌는 UI가 모두 useState로 만들어진다.
const [값, 값을바꾸는함수] = useState(초기값) 형태만 익혀두면 웬만한 인터랙션은 다 구현할 수 있다.