useState 리액트

예) 조명을 켜고 끌 수 있지? 이 조명의 상태는 "켜짐on" 또는 "꺼짐off"이 될 수 있어.

useState는 이런 상태를 기억하고, 바꿔주는 역할을 한다 

 

초기 상태 설정: 처음에 조명을 켜져 있을지, 꺼져 있을지를 정해.

상태 변경: 버튼을 누르면 조명의 상태를 바꿀 수 있다. 켜져 있으면 꺼지고, 꺼져 있으면 켜지도록 한다 

useState는 기억해주는 도구: 웹페이지나 앱이 어떤 상태인지 기억해줌.

상태를 바꿀 수 있음: 버튼을 누르면 상태를 바꿀 수 있다

 

import React, { useState } from 'react';

function Lamp() {
  // useState(초기값): 여기서는 '꺼짐'이 초기값
  const [light, setLight] = useState('꺼짐');

  // 버튼을 클릭하면 상태를 바꿔주는 함수
  const toggleLight = () => {
    setLight(light === '꺼짐' ? '켜짐' : '꺼짐');
  };

  return (
    <div>
      <p>조명이 지금: {light}</p>
      <button onClick={toggleLight}>조명 바꾸기</button>
    </div>
  );
}

export default Lamp;