React_State

- State 소개

Component 구조

박스는 Component

입력을 받는데, 이는 Prop

return으로 나오는 값은 UI가 된다.

return 값을 만들어주는 또 다른 데이터가 있는데 State

 

Prop, State 는 UI를 바꾼다.

Prop은 컴포넌트를 사용하는 외부자를 위한 데이터

State는 컴포넌트를 만드는 내부자를 위한 데이터

---

function App() {
  const mode = "WELCOME";
  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") {
    content = <Article title="Read" body="Hello, WEB"></Article>;
  }
  return (
    <div className="App">
      <Header
        title="REACT"
        onChangeMode={() => {
          mode = "WELCOME";
        }}
      ></Header>
      <Nav
        topics={topics}
        onChangMode={(id) => {
          mode = "READ";
        }}
      ></Nav>
      {content}
    </div>
  );
}

변수 mode, content를 만들고, mode가 WELCOME, READ에 따라 UI 출력값을 바꾸고싶다.

if , else if 문으로 content에 article태그를 새로 할당하고, 이를 출력하는 코드를 작성하였다.

Header와 nav의 이벤트 기대값을 WELCOME ↔ READ 로 설정했고, 실제로 값은 변경되지만,

UI는 변경되지 않는다. → App 함수가 다시 실행되지 않기 때문이다.

 

mode는 지역변수인데, 이를 상태로 업그레이드 시키겠다.

State를 사용하기 위해서는, State라는 Hook을 import 해줘야한다.

import { useState } from "react";

function App() {
  const _mode = useState("WELCOME");
  console.log("_mode",_mode);

 

useState("WELCOME")

useState("WELCOME")의 값을 보면, 배열인데 0번째 값은 useState(값)에서 상태값과 같고,

1번째 원소는 값을 변경하기 위한 함수, 즉 1번째 원소인 함수를 이용해서 0번재 상태값을 바꿀 수 있다.

function App() {
  // const _mode = useState("WELCOME");
  // const mode = _mode[0];
  // const setMode = _mode[1];
  const [mode, setMode] = useState("WELCOME");
  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") {
    content = <Article title="Read" body="Read"></Article>;
  }
  return (
    <div className="App">
      <Header
        title="REACT"
        onChangeMode={() => {
          setMode("WELCOME");
        }}
      ></Header>
      <Nav
        topics={topics}
        onChangMode={() => {
          setMode("READ");
        }}
      ></Nav>
      {content}
    </div>
  );
}

값을 변경하기 위해, 태그 부분에서 setMode("변경할 값")으로 값을 변경시키며 App함수를 재실행 시킬 수 있다.

---

위와 같은 사진처럼 nav에 정렬된 값을 클릭시, content를 변경하는 코드를 짜보자.

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

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

function Nav(props) {
  const lst = [];
  for (let i = 0; i < props.topics.length; i++) {
    let t = props.topics[i];
    lst.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>{lst}</ol>
    </nav>
  );
}

function Article(props) {
  return (
    <article>
      <h2>{props.title}</h2>
      {props.body}
    </article>
  );
}
function App() {
  // const _mode = useState("WELCOME");
  // const mode = _mode[0];
  // const setMode = _mode[1];
  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 className="App">
      <Header
        title="REACT"
        onChangeMode={() => {
          setMode("WELCOME");
        }}
      ></Header>
      <Nav
        topics={topics}
        onChangeMode={(_id) => {
          setMode("READ");
          setId(_id);
        }}
      ></Nav>
      {content}
    </div>
  );
}

export default App;

아이디어는 Nav를 클릭하여 event가 발생될 때, 클릭된 값의 id를 이용해서, 총 nav lst와 id 같은 값의 title, body를 가져오려고 한다. 코드는 완성본이지만, nav함수에 li태그에 t.id를 입력해주지만, 미리 만들어진 topics의 id를 입력해도,

태그를 거쳐서 정보로 내려온 순간 문자열로 형변환이 이뤄진다.

for 문을 돌리며 같은 값을 찾기위해서는 받은 id도 number로 바꿔야하므로, nav함수에 onChangeMode의 내려올 값에 Number() 형변환을 해주었다.

 

---

- 내용 정리 및 후기

 

클릭하면,  변경된 값이 UI에도 적용시키기 위해, State를 사용한다.

이번시간에는 useState(mode)를 넣어서 값, 변경하기 위한 함수 를 만들어서 확인했다.

useState(mode)[0]은 mode가 되고, useState(mode)[1]는 mode를 변경하는 함수 f()가 된다.

태그에 들어갔다 나온 값은 문자열이 된다.

파이썬에서 numpy와 같은 라이브러리를 리액트에서는 Hook이라고 한다. 이에 대해 자세히 알아보자.

props와 state의 차이에 대해 다시 한번 인지해야겠다.

 

어제는 가슴, 등, 어깨운동을 했다. 그래서 오늘 너무 힘이 부족함을 느낀다.

얼른 공부해서 재밌게 결과물을 만들고 싶다.

 

오늘은 고기 먹는날!

그리고 금요일! 먹고싶은거 먹어도 된다.