useState란?

Heesu·2024년 5월 23일

React useState

상황 설명

당신의 집에는 빛을 켜고 끄는 스위치가 있습니다. 이 스위치는 두 가지 상태를 가집니다: 켜짐(on)과 꺼짐(off). 이제 이 스위치를 useState를 사용하여 설명해보겠습니다.

상태(state)란 무엇인가?

상태는 어떤 것의 현재 상황이나 조건을 나타냅니다. 예를 들어, 스위치의 상태는 "켜짐" 또는 "꺼짐"일 수 있습니다.

`useState`가 무엇인가?

useState는 이 상태를 관리하고 변경할 수 있게 해주는 도구입니다. React에서는 웹 페이지나 애플리케이션의 상태를 관리하기 위해 *useState를 사용합니다.

`useState` 사용 예시

상태를 선언하기
스위치의 상태를 선언합니다. 초기 상태는 "꺼짐"으로 설정합니다.

```jsx
const [switchState, setSwitchState] = useState('off');

```

여기서:

- *`switchState`*는 스위치의 현재 상태입니다. 초기값은 'off'입니다.
- *`setSwitchState`*는 스위치의 상태를 변경할 수 있는 함수입니다.

상태를 변경하기
스위치를 켜거나 끄는 함수입니다. 스위치를 누르면 상태가 변경됩니다.

```jsx
function toggleSwitch() {
  if (switchState === 'off') {
    setSwitchState('on');
  } else {
    setSwitchState('off');
  }
}

```

이 함수는 스위치가 꺼져있으면 켜고, 켜져있으면 끄는 역할을 합니다.

상태를 사용하기
상태를 사용하여 스위치의 상태를 표시합니다.

```jsx
javascript코드 복사
return (
  <div>
    <p>Switch is {switchState}</p>
    <button onClick={toggleSwitch}>Toggle Switch</button>
  </div>
);

```

여기서:

- *`Switch is {switchState}`*는 현재 스위치의 상태를 화면에 보여줍니다.
- **`Toggle Switch`** 버튼을 클릭하면 **`toggleSwitch`** 함수가 호출되어 스위치의 상태가 변경됩니다.

종합 예시

이제 위의 모든 것을 합쳐보겠습니다.

javascript코드 복사
import React, { useState } from 'react';

function LightSwitch() {
  const [switchState, setSwitchState] = useState('off');

  function toggleSwitch() {
    if (switchState === 'off') {
      setSwitchState('on');
    } else {
      setSwitchState('off');
    }
  }

  return (
    <div>
      <p>Switch is {switchState}</p>
      <button onClick={toggleSwitch}>Toggle Switch</button>
    </div>
  );
}

export default LightSwitch;