State

React에서 "상태(state)"는 컴포넌트의 현재 상태를 나타내는 객체를 의미합니다. 시간이 지나면서 변경될 수 있는 데이터를 저장하고 관리하는 데 사용되며, 컴포넌트의 동작에 영향을 줄 수 있습니다.

다시 말해, 컴포넌트의 상태는 그것의 메모리처럼 작동하여, 컴포넌트의 메서드에서 업데이트 및 액세스할 수 있는 데이터를 저장할 수 있습니다. 상태가 변경되면, React는 자동으로 컴포넌트를 다시 렌더링하여 업데이트된 상태를 반영합니다.

Import를 해서 useState hook을 불러옵니다.

import {useState} from 'react';
//or
import React, { useState } from 'react';

useState hook 사용 예시입니다.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>
        Click me
      </button>
    </div>
  );
}

이 예제에서는 useState 훅을 사용하여 Counter 컴포넌트의 상태를 정의합니다. count 변수는 상태의 현재 값을 나타내고, setCount는 상태를 업데이트하는 데 사용되는 함수입니다. 버튼이 클릭되면 handleClick 함수가 호출되며, setCount를 호출하여 상태를 업데이트합니다.

또다른 예시입니다.

import {useState} from 'react';

function Create(props){
  return<article>
    <h2>Create</h2>
    <form onSubmit={event=>{
      event.preventDefault();
      const title = event.target.title.value //event 발생한 태그 event.target == <form> 에서 name이 title인거 에 값을 가져와
      const body = event.target.body.value
      props.onCreate(title, body);
    }}>
      <p><input type='text' name="title" placeholder='title'></input></p>
      <p><textarea name='body' placeholder='body'></textarea></p>
      <p><input type="submit" value="Create" ></input></p>
    </form>
  </article>
}


function App() {

  const [mode, setMode] = useState('WELCOME');
  const [id, setId] = useState(null);
  const [nextId, setNextId] =useState(4);
  const [topics,setTopics ]= useState( [
    { 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 ==='CREATE'){
    content = <Create onCreate={(_title, _body)=>{
      const newTopic ={id: nextId, title: _title, body: _body}
      const newTopics =[...topics];
      newTopics.push(newTopic);
      setMode('READ');
      setId(nextId);
      setNextId(nextId+1);
      setTopics(newTopics);
    }}></Create>
  }
  return (
    <div>
      {content}
      <a href ='/create' onClick={(event) =>{
        event.preventDefault();
        setMode('CREATE');
      }}>Create</a>
    </div>
  );
}

export default App;

React에서 상태를 사용하면 사용자 입력 및 다른 이벤트에 반응할 수 있는 동적이고 상호작용적인 컴포넌트를 만들 수 있습니다. 이것은 복잡하고 반응적인 사용자 인터페이스를 구축하는 데 필수적인 강력한 기능입니다.