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

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기