[React] useState

useState

• 함수형 컴포넌트에서 state 관리를 할 수 있도록 도와준다.
• props이 변경되거나, 내부에서 갖고 있는 상태가 변경이 되면, react는 변경된 해당 컴포넌트 함수 전체를 다시 호출한다.

사용법

1. useState() 함수를 호출하고, 매개변수로 초기 state를 넣는다. 모든 값이든 가능하다. 꼭 object이여야 할 필요는 없다.
2. useState()는 return 값을 갖는데, 두 개의 요소를 가진 배열을 반환한다.
3. 항상 첫번째 값에 state에 대한 스냅샷을 저장한다. 두 번째 요소는 현재 상태를 업데이트 할 수 있는 함수이다.

// Counter.jsx
import React, { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  const handleIncrease = () => {
    setCount(count + 1);
  };
  const handleDecrease = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <span style={{ fontSize: '50px' }}>{count}</span>
      <button onClick={handleIncrease}>Increase +</button>
      <button onClick={handleDecrease}>Decrease -</button>
    </div>
  );
}

//AutoCounter.jsx
import React, { useState } from 'react';
import Counter from './Counter';

export default function AutoCounter() {
  const [total, setTotal] = useState(0);
  const handleClick = () => {
    setTotal(total + 1);
  }

  return (
    <div>
      <div>
        <span>{total} {total > 10 ? 'Good' : 'Bad'}</span>
      </div>
      <div>
        <Counter total={total} onClick={handleClick} />
        <Counter total={total} onClick={handleClick} />
      </div>
    </div>
  );
}