[React] React의 state란?

state란?

• 일반적으로 컴포넌트의 내부에서 변경 가능한 데이터를 관리해야할 때에 사용 한다. 
• 값을 저장하거나 변경할 수 있는 객체로 보통 이벤트와 함께 사용된다. 
• 컴포넌트에서 동적인 값을 상태(state)라고 부르며, 동적인 데이터를 다룰 때 사용된다 볼 수 있다.

 

props와 state의 차이점은?

(리액트 페이지에 나와있는 내용이다. 자세하게 알고 싶다면 아래 링크)

https://ko.reactjs.org/docs/faq-state.html

컴포넌트 State – React

 

사용방법

const [state, setState] = useState(initialState);
const [ 데이터, 데이터변경함수 ] = useState(초기값(생략가능));

예제를 통해 사용방법을 알아보자.

(지금까지 해오고 있던 내용 ↓ )

https://conquer-it.tistory.com/187

 

우리는 아래 사진처럼 state를 통해 해당 링크를 클릭했을 때 

그곳에 해당하는 제목과 내용이 나오게 할 것이다.

(만약, css를 클릭했다면 css에 해당하는 제목과 내용이 출력되게 하겠다.)

※ import문 작성하기

state를 사용하려면 App.js 맨 위에 import문을 작성해야 한다.

import { useState } from "react";

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

function Article(props) {
  return (
    <article>
      <h2>{props.title}</h2>
      {props.body}
    </article>
  );
}
function Header(props) {
  return (
    <header>
      <h1>
        <a
          href="/"
          onClick={(event) => {
            event.preventDefault();
            props.onChangeMode();
          }}
        >
          {props.title}
        </a>
      </h1>
    </header>
  );
}
function Nav(props) {
  const lis = [];
  for (let i = 0; i < props.topics.length; i++) {
    let t = props.topics[i];
    lis.push(
      <li key={t.id}>
        <a
          id={t.id}
          href={"/read/" + t.id}
          onClick={(event) => {
            event.preventDefault();
            props.onChangeMode(Number(event.target.id));
          }}
        >
          {t.title}
        </a>
      </li>
    );
  }
  return (
    <nav>
      <ol>{lis}</ol>
    </nav>
  );
}
function App() {
  const [mode, setMode] = useState("WELCOME");
  const [id, setId] = useState(null);
  const topics = [
    { id: 1, title: "html", body: "html is ..." },
    { id: 2, title: "css", body: "css is ..." },
    { id: 3, title: "javascript", body: "javascript is ..." },
  ];
  let content = null;
  if (mode === "WELCOME") {
    content = <Article title="Welcome" body="Hello, WEB"></Article>;
  } else if (mode === "READ") {
    let title,
      body = null;
    for (let i = 0; i < topics.length; i++) {
      console.log(topics[i].id, id);
      if (topics[i].id === id) {
        title = topics[i].title;
        body = topics[i].body;
      }
    }
    content = <Article title={title} body={body}></Article>;
  }
  return (
    <div>
      <Header
        title="WEB"
        onChangeMode={() => {
          setMode("WELCOME");
        }}
      ></Header>
      <Nav
        topics={topics}
        onChangeMode={(_id) => {
          setMode("READ");
          setId(_id);
        }}
      ></Nav>
      {content}
    </div>
  );
}

export default App;

 

---

참고영상

https://www.youtube.com/watch?v=vmunrKR0uOU&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=7