[React] State 사용법

useState는 함수를 다시 실행해주는 역할을 하여 변경된 값이 html에 자동으로 반영되도록 합니다. 다시 말해 변경해주어야 하는 부분은 변수가 아닌 state에 담으면 됩니다!

예를 들면, 버튼을 클릭 시 값을 변경하려고 할 때 useState를 사용합니다.

 

useState를 사용하는 방법은

1. 상단에 useState를 import 한다.

2. 필요한 컴포넌트 함수 안에서 아래와 같이 useState를 선언한다.

let [mode, setMode] = useState("Welcome"); //destructing 문법

//배열도 가능
let [text, setText] = useState(["Hi", "I'm", "Olly"]); 
text[0] // Hi

3. useState의 0번째 값: 상태의 값을 읽을 때 변수처럼 사용 / 1번째 값: 상태의 값을 변경할 때 함수로 쓰인다. 원하는 곳에 아래와 같이 변경할 값을 입력한다.

setMode("Read");

//mode의 값: Read

Test.js

import React from "react";
import "./App.css";
import { useState } from "react";

function Header(props) {
  return (
    <header>
      <h1>
        <a
          href="/"
          onClick={(e) => {
            e.preventDefault();
            props.onChangeMode();
          }}
        >
          {props.title}
        </a>
      </h1>
    </header>
  );
}

function Nav(props) {
  let arr = [];
  for (let i = 0; i < props.topics.length; i++) {
    let t = props.topics[i];
    arr.push(
      <li key={t.id}>
        <a
          id={t.id}
          href={"/read/" + t.id}
          onClick={(e) => {
            e.preventDefault();
            props.onChangeMode(e.target.id);
          }}
        >
          {t.title}
        </a>
      </li>
    );
  }
  return (
    <nav>
      <ol>{arr}</ol>
    </nav>
  );
}

function Article(props) {
  return (
    <article>
      <h2>{props.title}</h2>
      {props.body}
    </article>
  );
}

function Test() {
  let [mode, setMode] = useState("Welcome");
  let [id, setId] = useState(null);
  const topics = [
    { id: 1, title: "html", body: "html is ..." },
    { id: 2, title: "css", body: "css is ..." },
    { id: 3, title: "js", body: "js is ..." },
  ];
  let content;
  if (mode === "Welcome") {
    content = <Article title="Welcome" body="Hello, React!"></Article>;
  } else if (mode === "Read") {
    for (let i in topics) {
      if (topics[i].id === Number(id)) {
        content = (
          <Article title={topics[i].title} body={topics[i].body}></Article>
        );
      }
    }
  }
  return (
    <div className="Test">
      <Header title="React" onChangeMode={() => setMode("Welcome")}></Header>
      <Nav
        topics={topics}
        onChangeMode={(_id) => {
          setMode("Read");
          setId(_id);
        }}
      ></Nav>
      {content}
    </div>
  );
}

export default Test;

*주의할 점

useState를 이용해 값을 변경하고자 할 때 타입에 신경쓰자!