useState를 중심으로 상태 변화 화면 변경 Tailwind 스타일

✅ 핵심 키워드: useState

✔️ 정의

useState는 React 컴포넌트 내부에서 값을 저장하고,
그 값이 바뀌면 자동으로 해당 컴포넌트가 다시 렌더링되는 메커니즘입니다.

---

🧠 상태 변화 흐름 정리

① 상태 정의

const [flag, setFlag] = useState(false);

항목	의미
flag	현재 상태값 (true/false 같은 정보 저장)
setFlag	상태를 변경하는 함수 (flag가 바뀌면 화면 자동 갱신)

 

---

② 사용자 이벤트로 상태 변경

const handleToggle = () => {
  setFlag(!flag);
}

• 사용자가 버튼 클릭 시 handleToggle 함수 실행
• flag가 true ↔ false로 변경됨

---

③ 상태 변경 → 화면 다시 렌더링

<div className={`... ${flag && bg[color]}`}>

• 상태가 바뀌면 컴포넌트 전체가 다시 실행됨
• flag가 true일 경우 bg[color] 클래스가 적용됨 → 배경색 변경

---

🎨 Tailwind 클래스 분기 처리 (bg[] 활용)

✅ 색상별 클래스 정의

const bg = {
  blue: "bg-blue-400",
  orange: "bg-orange-400",
  lime: "bg-lime-400",
};

• 색상 키(blue, orange, lime)에 따라 Tailwind의 배경색 클래스를 연결
• 동적으로 클래스명을 선택하려고 객체 구조를 사용

---

✅ 조건부 클래스 적용 예시

<div className={`w-full h-60 ${flag && bg[color]}`}>

조건	결과
flag = false	아무 배경색 없음
flag = true	bg[color] → "bg-blue-400" 같은 Tailwind 클래스 적용

 

---

✅ 추가: 텍스트 색상도 상태에 따라 변경

<div className={`text-lg font-bold ${flag ? "text-white" : "text-black"}`}>
  {color}
</div>

• flag = true → 글자색 흰색
• flag = false → 글자색 검정

---

 

---

✅ 요약

개념	설명
useState	컴포넌트 내에서 값을 기억하는 훅
상태 변화	setFlag(...) 호출 시 자동으로 화면 갱신
조건부 렌더링	${flag && bg[color]} 또는 ${flag ? A : B}
스타일 동적 처리	객체(bg)로 Tailwind 클래스 분기
컴포넌트 재사용성	color를 props로 받아 여러 색상 대응 가능