[React]리액트 훅(Hook)에 대해 알아보자!(useState, useEffect) - 2 UseState

https://k-taeyang.tistory.com/9

[React]리액트 훅(Hook)에 대해 알아보자!(useState, useEffect) - 1

 

지난 시간에 이어서, 이번에는 리액트 훅에서 UseState에 대해 중점적으로 다뤄보자.

 

먼저, 리액트 컴포넌트에서 동적인 값을 상태(State) 라고 부른다.

사용자 인터랙션(User Interaction)을 통해 컴포넌트의 상태값이 동적으로 바뀔 경우에는 상태를 관리하는 것이 필요하다.

 

지난 포스팅에서도 다뤘지만 리액트 훅이 나오기 전에는 상태값을 관리하기 위해서는 Class 기반의 클래스 컴포넌트를 작성해야 했다. 하지만 함수형 컴포넌트에 비해 너무 복잡한 단점이 있어 클래스 컴포넌트를 사용하기에는 큰 어려움이 있었다.

 

하지만 리액트 훅 기능이 도입되면서, 함수형 컴포넌트에서도 상태를 관리할 수 있게 된 것이다.

훅 중에는 useState() 함수가 있는데, 이를 통해 함수형 컴포넌트에서도 상태를 관리할 수 있다.

 

아래 예시부터는 React Hooks 공식문서를 참고하였다.

Using the State Hook – React

 

◼ Hook과 같은 기능을 하는 클래스 예시

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>
    );
  }
}

상태는 { count: 0 }으로 시작하고 사용자가 this.setState()를 호출하여 버튼을 클릭할 때 state.count를 증가시킨다.

 

해당 클래스 컴포넌트는 React Hooks를 사용해 아래 코드처럼 함수형 컴포넌트로 작성할 수 있다.

 

◼ 함수형 컴포넌트로 작성한 useState 예시

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

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

 

위의 예시처럼 React에서 useState를 가져오는 것으로 시작한다.

 

import React, { useState } from 'react';

function Example() {
  // ...
}

 

이후, 클래스 컴포넌트에서 this.state = {count :0}과 같이 count 상태를 초기화했어야 했던 것을,

함수형 컴포넌트에서는 this가 없으므로 할당하거나 읽을 수 없다.

this.state 대신, useState 구성 요소 내부에서 직접 Hooks를 호출한다.

 

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

count라는 상태 변수를 선언하고 0으로 설정한다. React는 재렌더링 사이에 현재 값을 기억하고 가장 최근 값을 함수에 제공한다. 현재 카운트를 업데이트하려면 setCount를 호출할 수 있다.

 

◼ Reading State

 

count 변수를 읽기 위해서는,

<p>You clicked {this.state.count} times</p>

처럼 사용해야 했던 것을

 

 <p>You clicked {count} times</p>

직접 {count}변수로 불러올 수 있다.

 

◼ Updating State

 

마찬가지로 State 변수를 업데이트 하기 위해서 클래스 컴포넌트는

  <button onClick={() => this.setState({ count: this.state.count + 1 })}>
    Click me
  </button>

위의 식대로 처리해야 했지만 훅을 사용한 함수형 컴포넌트에서는

 <button onClick={() => setCount(count + 1)}>
    Click me
  </button>

이런 식으로 처리할 수 있다.

 

단순히 함수형 컴포넌트에서도 상태를 관리할 수 있다는 장점 뿐만 아니라,

코드가 간결해지고 보기도 편해지는 장점이 개인적으로 너무 마음에 든다.