[React] 3. state

생활코딩 React 2022년 개정판 강의(https://opentutorials.org/course/4900)를 듣고 개인 학습용으로 정리한 게시글입니다.

---

1. State의 정의

 

state란?

• prop 과 함께 컴포넌트 함수를 다시 실행해서 새로운 리턴값을 만들어 준다.
• prop과 state 모두 이 값이 변경되면 새로운 리턴 값을 만들어서 ui를 바꾼다.
  • state는 값이 변경되면 HTML이 자동으로 다시 랜더링 된다. (= 새로고침 하지 않아도 됨)
  • 일반 변수는 값이 변경되어도 HTML이 자동으로 다시 랜더링 되지 X (= 새로고침 해야함)
• 변수 외에 데이터를 저장하는 또 다른 옵션으로 생각해도 됨
• 문자, 숫자, object, array 등을 저장 가능하다.
• useState()를 이용해서 만들어야 한다.

 

prop과 state의 차이점

• prop은 컴포넌트를 사용하는 외부자를 위한 데이터
• state는 컴포넌트를 만드는 내부자를 위한 데이터

 

---

2. State 사용법

 

import { useState } from 'react';

state를 사용하기 위해서는 위와 같이 import 해줘야 한다.

 

위의 코드를 실행해보면

위와 같은 실행결과가 나온다. 정리하면

• useState는 배열을 리턴
  • 배열의 0번째 원소는 상태의 값을 읽을 때 사용하는 데이터
  • 배열의 1번째 원소는 그 상태의 값을 변경할 때 사용하는 함수

따라서, useState는 다음과 같이 사용한다.

  const _mode = useState('WELCOME');  // 'WELCOME'은 state의 초기값
  const mode =_mode[0];               // state의 값은 0번째 index로 읽는다.
  const setMode = _mode[1];           // state를 바꿀때는 1번째 index의 함수를 사용한다.

위의 코드를 한줄로 요약하면 다음과 같다.

  const [mode, setMode] = useState('WELCOME');  // 위 함수의 축약형

 

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

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 Article(props) {
  return <article>
    <h2>{props.title}</h2>
    {props.body}
  </article>
}

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:'javascriptss', 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>
  );
}

export default App;

위의 소스코드는 생활코딩 React 2022년 개정판 - 7. state (링크) 에서 사용한 코드이다.

id 값이 전달되는 흐름이 조금 복잡할 수 있는데,

그림으로 표현하면 대충 위와 같이 전달된다.