React - 입문 기록 6

State에 대해서 알아보자

프롭은 컴포넌트에 인자로서 들어가 내용과 리턴 값에 변화를 일으킨다.

 

스테이트도 비슷한 역할을 하지만 둘의 가장 큰 차이는

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

스테이트는 컴포넌트를 만드는 내부자를 위한 데이터라는 점이다.

 

실습 내용

아래와 같은 화면에서

WEB, HTML, CSS, JavaScript를 눌렀을때 아래 본문 내용 <Article>의 내용이 바뀌게 하고 싶다.

 

 

코드 변경

 

- before

// ..
function App() {
  // ..
  return (
    <div>
    // ..
      <Article title="Welcome" body="Hello, WEB"></Article>
    </div>
  );
}

 

- after

import { useState } from "react";
// ..
function App() {
  const mode = "WELCOME";
  // ..
  let content = null;
  if (mode === "WELCOME") {
    content = <Article title="Welcome" body="Hello, WEB"></Article>;
  } else if (mode === "READ") {
    content = <Article title="Read" body="Hello, Read"></Article>;
  }
  return (
    <div>
      // ..
      {content}
    </div>
  );
}
// ..

 

현재 이 상태에서 변수 mode는 함수 App안에서만 사용 가능한 지역 변수이다.

이 변수 mode를 useState 라이브러리를 사용하여 '상태'로 만든다.

const _mode = useState("WELCOME");

useState는 배열을 리턴한다.

0번째 원소는 상태의 값을 읽을때 쓰는 데이터이고,

1번째 원소는 그 상태의 값을 변경할때 사용한다.

 

즉 아래와 같이 적는다면

  const _mode = useState("WELCOME");
  const mode = _mode[0];
  const setMode = _mode[1];

변수 mode는 현재 _mode의 값, 변수 setMode를 통해 _mode의 상태를 바꿀수 있게 된다.

 

위 3줄의 선언문은 아래와 같이 한줄로 축약할 수 있다.

const [mode, setMode] = useState("WELCOME");

 

이어서 코드의 내용을 더 추가해준다.

import { useState } from "react";
// ..
function App() {
  const [mode, setMode] = useState("WELCOME");
  // ..
  let content = null;
  if (mode === "WELCOME") {
    content = <Article title="Welcome" body="Hello, WEB"></Article>;
  } else if (mode === "READ") {
    content = <Article title="Read" body="Hello, Read"></Article>;
  }
  return (
    <div>
      <Header
        title="WEB"
        onChangeMode={() => {
          setMode("WELCOME");
        }}
      ></Header>
      <Nav
        topics={topics}
        onChangeMode={(id) => {
          setMode("READ");
        }}
      ></Nav>
      {content}
    </div>
  );
}
// ..

 

이후 웹에서 HTML, CSS, JavaScript 텍스트를 클릭하면 

content의 내용이 Read Hello, Read로 바뀌고

 

상단 WEB 텍스트를 클릭하면

Welcome Hello, WEB이라고 바뀌게 된다.

 

 

내용을 더 추가한다.

import { useState } from "react";
// ..
const Nav = (props) => {
  // ..
            props.onChangeMode(Number(event.target.id)); 
            // 문자열로 받아오던 target의 id를 숫자로써 변경하여 받아옴
  // ..
}
// ..
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++) {
      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>
  );
}
// ..

 

클릭한 곳이 WEB이라면 setMode를 "WEBCOME"으로 바꾸어

if (mode === "WELCOME") {
    content = <Article title="Welcome" body="Hello, WEB"></Article>;
}

content, 즉 Article 컴포넌트의 내용을 title은 'Welcome', body는 "Hello, WEB"으로 바꾸도록 하였고

 

클릭한 곳이 Nav 컴포넌트의 텍스트라면 해당 텍스트의 id를 찾아내어 title과 body의 내용을 가져오도록 하였다.

  const topics = [
    { id: 1, title: "HTML", body: "HTML is ..." },
    { id: 2, title: "CSS", body: "CSS is ..." },
    { id: 3, title: "JavaScript", body: "JavaScript is ..." },
  ];

if (mode === "READ") {
    let title, body = null;
    for (let i = 0; i < topics.length; i++) {
      if (topics[i].id === id) {
        title = topics[i].title;
        body = topics[i].body;
      }
    }
    content = <Article title={title} body={body}></Article>;
  }

 

이후 웹에서 HTML, CSS, JavaScript 중 클릭하는 곳에 따라 본문의 내용이 바뀌게 되었다.

 

컴포넌트의 내용을 바꾸어 다시 실행시키는 방법 prop, state에 대해서 알아보았다.