[React] Hooks - useState

useState

• 가장 기본적인 Hook 함수이다.
• 함수형 컴포넌트에서도 상태를 관리할 수 있게 해준다.

useState 사용법

사용예시)

const [value,setValue] = useState(0);

• useState 함수의 파라미터에는 상태의 기본값을 넣어준다.
  (위 예시에서는 value의 기본값을 0으로 넣어주었다.)
• useState 함수가 호출되면 배열이 반환되는데,
  배열의 첫 번째 원소는 상태 값, 두 번째 원소는 상태를 설정하는 함수이다.
  (위 예시에서 상태 값은 value이고, 상태 설정 함수는 setValue가 된다.

  setValue(5);

  이런식으로 상태를 설정해줄 수 있다.)

useState 여러번 사용하기

useState를 여러 번 사용해서 여러 개의 상태를 관리할 수도 있다.

const [value,setValue] = useState(0);
const [name,setName] = useState('default name');

이런식으로 숫자 자료형의 value와 문자 자료형의 name 상태를 정의해줄 수 있다.

*** 하나의 useState 함수는 하나의 상태 값만 관리할 수 있다.

✅ 클래스 컴포넌트와 비교

클래스 컴포넌트에서는 다음과 같이 this.state를 사용해서 상태를 정의했다.

constructor(props) {
    super(props);
    this.state = {
      number: 0,
    };
  }

그리고 상태에 접근하고 변경하기 위해서 render 함수 내에서 this.state와 this.setState를 사용해 주었다.

render() {
    const { number } = this.state;
    return (
      <div>
        <h1>{number}</h1>
        <button
          onClick={() => {
            this.setState((prevState) => ({
              number: prevState.number + 1,
            }));
          }}
        >
          +1
        </button>
      </div>
    );
  }

위 코드를 함수형 컴포넌트로 변경해보자.

Hooks의 useState를 사용하면 다음과 같다.

const Counter = () => {
  const [number, setNumber] = useState(0);
  return (
    <div>
      <h1>{number}</h1>
      <button onClick={() => setNumber(number + 1)}>+1</button>
    </div>
  );
};

짠! 코드가 엄청 간단해진 것을 볼 수 있다.

• this.state를 사용해서 상태를 가져올 필요 없이 number 라는 변수를 바로 사용해서 상태 값을 가져올 수 있다.
• this.setState대신 setNumber를 사용해서 간단하게 상태를 변화시킬 수 있다.

또한 render 함수 없이 return만으로 컴포넌트를 내보낼 수 있다.