여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. React - Hooks - useState 훅
React – Hooks – useState 훅
4개월전 작성
5개월전 수정

React

useState

React useStateHook을 사용하면 함수 구성 요소의 상태를 추적할 수 있다.

상태는 일반적으로 애플리케이션에서 추적해야 하는 데이터 또는 속성을 나타낸다.

가져오기

useState 훅을 사용하려면 먼저 구성 요소로 가져올 필요가 있다..

예제

구성 요소의 맨 위에서 useState 훅을 사용하여 가져온다.

import { useState } from "react";

초기화

함수 구성 요소에서 useState를 호출하여 상태를 초기화한다.

useState는 초기 상태를 받아들이고 두 가지 값을 반환한다.

  • 현재 상태.
  • 상태를 업데이트하는 기능.
예제

함수 구성요소 상단의 상태를 초기화한다.

import { useState } from "react";

function FavoriteColor() {
  const [color, setColor] = useState("");
}

읽기 상태

이제 구성 요소의 어느 곳에나 상태를 포함할 수 있다.

예제

렌더링된 구성 요소에서 상태 변수를 사용한다.

import { useState } from "react";
import ReactDOM from "react-dom/client";

function FavoriteColor() {
  const [color, setColor] = useState("red");

  return 

My favorite color is {color}!

} const root = ReactDOM.createRoot(document.getElementById('root')); root.render();
기본 예시
예제 보기

상태 업데이트

상태를 업데이트하려면 상태 업데이트 기능을 사용한다.

예제

버튼을 사용하여 상태를 업데이트한다.

import { useState } from "react";
import ReactDOM from "react-dom/client";

function FavoriteColor() {
  const [color, setColor] = useState("red");

  return (
    <>
      <h1>My favorite color is {color}!</h1>
      <button
        type="button"
        onClick={() => setColor("blue")}
      >Blue</button>
    </>
  )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<FavoriteColor />);
기본 예시
예제 보기

상태 유지가 가능한 것

useState 훅을 사용하면 문자열, 숫자, 부울, 배열, 객체 및 이들의 조합을 추적할 수 있다.

개별 값을 추적하기 위해 여러 상태 훅을 생성할 수 있다.

예제

여러 상태 훅을 생성한다.

import { useState } from "react";
import ReactDOM from "react-dom/client";

function Car() {
  const [brand, setBrand] = useState("Ford");
  const [model, setModel] = useState("Mustang");
  const [year, setYear] = useState("1964");
  const [color, setColor] = useState("red");

  return (
    <>
      <h1>My {brand}</h1>
      <p>
        It is a {color} {model} from {year}.
      </p>
    </>
  )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);
기본 예시
예제 보기
예제

객체를 보유하는 단일 훅을 만든다.

import { useState } from "react";
import ReactDOM from "react-dom/client";

function Car() {
  const [car, setCar] = useState({
    brand: "Ford",
    model: "Mustang",
    year: "1964",
    color: "red"
  });

  return (
    <>
      <h1>My {car.brand}</h1>
      <p>
        It is a {car.color} {car.model} from {car.year}.
      </p>
    </>
  )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);
기본 예시
예제 보기

상태의 개체 및 배열 업데이트

상태가 업데이트되면 전체 상태가 덮어쓴다.

차의 색상만 업데이트하고 싶다면 어떻게 할까?

만약 우리가 setCar({color: “blue”})만 부른다면, 이것은 우리의 주에서 브랜드, 모델 및 연식을 제거할 것이다.

우리는 자바스크립트 확산 연산자를 사용하여 우리를 도울 수 있다.

예제

자동차 색상만 업데이트하려면 JavaScript 스프레드 연산자를 사용하자.

import { useState } from "react";
import ReactDOM from "react-dom/client";

function Car() {
  const [car, setCar] = useState({
    brand: "Ford",
    model: "Mustang",
    year: "1964",
    color: "red"
  });

  const updateColor = () => {
    setCar(previousState => {
      return { ...previousState, color: "blue" }
    });
  }

  return (
    <>
      <h1>My {car.brand}</h1>
      <p>
        It is a {car.color} {car.model} from {car.year}.
      </p>
      <button
        type="button"
        onClick={updateColor}
      >Blue</button>
    </>
  )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);
기본 예시
예제 보기
참고
Mingg`s Diary
밍구
공부 목적 블로그