React 의 State 개념 및 사용법

React의 `useState` 훅을 사용하면 컴포넌트 내에서 상태(state)를 관리할 수 있습니다. 상태는 컴포넌트 내부의 데이터를 저장하고 변경할 때 사용됩니다. 

참고) React에서 훅(Hook)은 함수형 컴포넌트에서 상태(state)와 생명주기(lifecycle) 기능을 클래스 컴포넌트와 유사하게 
사용할 수 있게 도와주는 기능입니다. React 16.8 버전부터 도입되었으며, 함수형 컴포넌트에서 상태 관리와 다양한 리액트 
기능을 사용할 수 있게 해주는 중요한 개념입니다.

1. useState
`useState` 훅은 함수형 컴포넌트에서 상태를 추가하고 관리하는데 사용됩니다. 이를 통해 컴포넌트의 상태를 변경하고 UI를 
업데이트할 수 있습니다.

2. useEffect
`useEffect` 훅은 부수 효과(side effect)를 처리하는데 사용됩니다. 이벤트 리스너 등과 같은 부수 효과를 관리하고, 
컴포넌트의 생명주기와 관련된 작업을 수행할 수 있습니다.

3. useContext
`useContext` 훅은 React 컨텍스트(Context)를 사용하여 컴포넌트 간에 데이터를 공유할 때 유용합니다.

4. useReducer
`useReducer` 훅은 Redux와 유사한 방식으로 상태 관리를 할 수 있게 해줍니다. 복잡한 상태 로직을 
다룰 때 유용합니다.

5. Custom Hooks
개발자가 직접 만든 커스텀 훅을 만들어 로직을 추상화하고 재사용할 수 있게 합니다.
훅은 클래스 컴포넌트의 한계를 극복하고 함수형 컴포넌트로 더 많은 로직을 옮길 수 있게 해주어 
컴포넌트를 더 단순하게 만들고 코드의 재사용성을 높입니다. 함수형 컴포넌트와 훅을 사용하면 클래스 
컴포넌트 없이도 강력한 React 컴포넌트를 만들 수 있습니다.

 

아래의 코드 예제를 통해 React에서 `useState`를 사용하여 상태를 다루는 방법을 설명하겠습니다.

import React, { 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++) {
      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;

위의 코드에서 주요 포인트는 다음과 같습니다:

1. `useState` 훅을 사용하여 상태를 정의합니다. 예를 들어,

`const [mode, setMode] = useState('WELCOME');`와 같이 상태 변수 `mode`와 그 상태를 변경할 수 있는 함수 `setMode`를 정의합니다.

2. 각각의 상태 변수에 초기값을 설정할 수 있습니다. 초기값은 `useState` 함수의 인자로 전달됩니다.

3. 상태를 변경할 때는 `setMode`와 `setId`와 같은 상태 변경 함수를 사용합니다. 

예를 들어, `setMode('WELCOME')`와 같이 호출하면 `mode` 상태가 변경됩니다.

4. 상태에 따라 UI를 다르게 렌더링할 수 있습니다. `mode` 상태에 따라 다른 컴포넌트를 렌더링하도록 조건문을 사용합니다.

React의 상태 관리 기능을 활용하면 컴포넌트의 동적인 상태를 관리하고 상태가 변경될 때 UI를 업데이트할 수 있습니다.

 

참고영상 : https://opentutorials.org/course/4900/31268