Usestate

The React useState Hook은 함수 컴포넌트에서 상태(state)를 추적할 수 있게 해줍니다.
useState는 기능성 컴포넌트가 데이터(상태)를 저장하고 업데이트할 수 있도록 하는 React Hook입니다. 상태가 변경될 때마다, React는 자동으로 컴포넌트를 다시 렌더링하여 업데이트된 UI를 표시합니다.

구문 (Syntax)

const [state, setState] = useState(initialValue);

• state: 현재 값입니다.
• setState: 상태를 업데이트하는 데 사용되는 함수입니다.
• initialValue: 상태의 초기값입니다.

useState 가져오기 (Import useState)

useState Hook을 사용하려면, 먼저 컴포넌트로 이를 가져와야 합니다.

import { useState } from "react";

우리가 react에서 named export로 useState를 구조 분해 할당(destructuring)하는 것을 알 수 있습니다.

useState 초기화 (Initialize usestate)

함수 컴포넌트 내에서 useState를 호출하여 상태를 초기화합니다.

useState는 초기 상태를 받아서 두 가지 값을 반환합니다:

1. 현재 상태(The current state).
2. 상태를 업데이트하는 함수(A function that updates the state).

import { useState } from "react";

function FavoriteColor() {
...

다시 한번, 우리는 반환된 값들을 useState에서 구조 분해 할당하고 있음을 알 수 있습니다.

첫 번째 값인 color는 현재 상태입니다.

두 번째 값인 setColor는 우리의 상태를 업데이트하는 데 사용되는 함수입니다.

마지막으로, 초기 상태를 "red"로 설정합니다: useState("red")

상태 읽기 (Read State)

이제 우리는 컴포넌트의 어느 곳에서든 우리의 상태를 포함할 수 있습니다.

import { useState } from 'react';
import { createRoot } from 'react-dom/client';

...

상태 업데이트하기 (Update State)

상태를 업데이트하려면, 우리의 상태 업데이트 함수를 사용합니다.

<button
  type="button"
  onClick={() => setColor("blue")}
...

예시 (EXample)

import { useState } from 'react';
import { createRoot } from 'react-dom/client';

...

참고 자료 (Reference)

https://www.w3schools.com/react/react_usestate.asp