State

리액트에서 매우 중요한 개념!

• 계속해서 변화하는 특정 상태
• 상태에 따라 각각 다른 동작을 함

ex) dark / light 테마 - 사용자는 스위치로 상태를 바꿀 수 있다.

State(상태)는 리액트의 기능이기 때문에
import React,{useState} from 'react'; 상단에 입력.

Counter 기능 만들어보기

import React,{useState} from 'react';

const Counter = () => {

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

  const onIncrease = () => {
    setCount(count + 1);
  }
  const onDecrease = () => {
    setCount(count - 1);
  }


  return (
    <div>
      <h2>{count}</h2>
      <button onClick={onIncrease}>+</button>
      <button onClick={onDecrease}>-</button>
    </div>
  );
};

export default Counter;

짧은 코드와 유연한 문법으로 화면에 나타나는 데이터를 쉽게 교체하고 업데이트 할 수 있도록 도와준다. 버튼 클릭과 같은 이벤트에 동적으로 반응하는 웹사이트 만들 수 있다.