[React] useState()

/* 정보 전달 목적의 글 보다는 공부하면서 기억하기 위해 적는 글입니다.
따라서 깊이가 얕으며, 잘못된 정보가 있을 수 있습니다. */

---

useState();

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

useState() : 함수형 컴포넌트에서도 state를 관리하기 위함.

인자는 state의 초깃값이 들어가며 반드시 객체가 아니어도 된다.

 

useState()를 호출하면, 배열이 반환된다.

첫 번째 원소는 count라는 state이고, 두 번재 원소는 count를 바꾸어주는 함수(setter 함수)이다.

 

 

++ 원래 배열에 있는 값들을 추출하려면

const array = [1, 2];
const one = array[0];
const two = array[1];

const [one,two] = array;

 

이래야 됐지만, 배열 비구조화 할당을 사용하면 []을 통해 가능하다. 

(+ 객체 비구조화 할당은 {} 이다.)

 

useState() 사용 예제

import React, { useState } from "react";

const MyComponent = () => {

  const [text, setText] = useState();

  const onChange = e => {
    setText(e.target.value);
  }

  return (
    <div>
      <input type="text" name="username" value={text} onChange={onChange}></input>
    </div >
  );
}

export default MyComponent;

 

그냥 [상태, setter함수] = useState()하면 된다.

state를 설정하고 싶으면 그냥 setter함수의 인자를 원하는 값을 넣은 다음 호출하면된다.

 

위의 예제를 클래스형 컴포넌트로 바꿔보자면, 다음과 같다.

import React from "react";

class MyComponent extends React.Component {
  state = {
    text: '',
  }

  onChange = (e) => {
    this.setState({ text: e.target.value });
  }

  render() {
    const { text } = this.state;
    return (
      <div className="App">
        <input type="text" value={text} onChange={this.onChange}></input>
      </div>
    )
  }
}

export default MyComponent;

클래스 컴포넌트의 state를 함수형 컴포넌트에서 사용하기 위한 Hook임을 까먹지 말자.

 

useState()의 특징

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

따라서 컴포넌트에서 관리해야 할 상태가 여러 개라면 useState를 여러번 사용하면 된다.

 

- 클래스 컴포넌트에서의 state와는 달리 여기서의 state는 객체도 되고, 숫자도 되고 다 된다. 

  const [form, setForm] = useState({
    username: '',
    message: '',
  });
  // 가능
  
  const [number, setNumber] = useState(0);
   // 가능

 

 

결론

이제는 함수형 컴포넌트로 메타가 바뀌었고, state를 쓰기 위해서는 useState를 사용해야한다.클래스형 컴포넌트에서 사용했던 setState와 헷갈리지 말자.

 

 

---