[React.js] React Hooks - useState()

이예빈·2022년 4월 28일

Hooks은 React 16.8버전에 새로 추가된 것으로 class를 사용하지 않고도
state와 다른 React의 기능을 지원합니다.

( 원래 React이전 버전에서는 class컴포넌트만이 state와 lifecycle메서드를 사용할 수 있었습니다. )

function 컴포넌트 VS class 컴포넌트

React Hook의 useState를 이용한 function 컴포넌트

import React, { useState } from 'react';

function Example() {
  // 새로운 state 변수를 선언하고, count라 부르겠습니다.
  const [count, setCount] = useState(0);

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

class컴포넌트로 만든 예시

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

React에서 클래스르르 사용해봤다면, 위의 코드는 익술할 것입니다.
비교를 위해 function 컴포넌트와 class컴포넌트로 만들어보았는데,
기능적으로는 같습니다.

위 class컴포넌트에서의 state는 { count: 0 }이며
사용자가 this.setState()를 호출하는 버튼을 클릭했을 때 state.count를 증가시킵니다.

Hook과 function컴포넌트

React의 function컴포넌트는 아래와 같은 형태를 갖습니다.

Option 1)

const Example = (props) => {
  // 여기서 Hook을 사용할 수 있습니다!
  return <div />;
}

Option 2)

function Example(props) {
  // 여기서 Hook을 사용할 수 있습니다!
  return <div />;
}

function 컴포넌트는 "state가 없는 컴포넌트"로 알려졌었으나.
React 16.8버전부터 Hook이 도입되면서 function컴포넌트 안에서도 React state를 사용할 수 있게 해주었습니다.

※ Hook은 class컴포넌트 안에서 동작하지 않습니다.

Hook이란?

Hook이란 특별한 function입니다.
예를 들어 useState는 state를 function컴포넌트 안에서 사용할 수 있게하며
useState이외에도 다양한 function을 제공합니다.

참고 : https://ko.reactjs.org/docs/hooks-reference.html

useState

useState()를 호출하면 어떻게 될까?

import React, { useState } from 'react';

function Example() {
  // 새로운 state 변수를 선언하고, 이것을 count라 부르겠습니다.
  const [count, setCount] = useState(0);
  ...
}

useState를 호출하면 "state변수"를 선언하는 것과 같습니다.
일반적으로 컴포넌트자체가 function이기 때문에 실행될때 마다 일반변수는 함수가 끝나면 사라지는게 맞지만,
useState를 사용하여 지정한 state변수는 React에 의해 사라지지 않고 메모리 어딘가에 저장되어 기억되어집니다.

useState의 인자로는 무엇을 넘겨줘야 할까?

useState() Hook의 인자로 넘겨주는 값은 state의 초기값입니다.
function컴포넌트의 state는 class 컴포넌트와 달리 객체일필요는 없고,
number 타입, string타입,boolean타입 등을 가질 수 있습니다.

useState가 반환하는건 무엇일까?

결론부터 말하자면,
1. "state변수"
2. "해당 변수를 갱신할 수 있는 function"
이 두가지 쌍을 리턴합니다.

이것이 바로
const [count, setCount] = useState(0);라고 쓰는 이유입니다.

이 예시는 count라고 부르는 state변수를 선언하고 0으로 초기화합니다.
React는 해당 변수를 re-render할때 기억해두었다가 가장 최근 갱신된 값을 제공합니다.
count 변수의 값을 업데이트하려면 setCount를 호출하면 됩니다.

tip. 여러개의 state변수 사용하기

function컴포넌트 안에서 아래 예시와 같이
여러개의 state변수를 가질 수 있습니다.

function ExampleWithManyStates() {
  // 여러 개의 state를 선언할 수 있습니다!
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);