React useState

useState에 대해 설명하기 전 읽고 가기

• Hook이 나오기 이전에는 클래스형 컴포넌트를 이용하여 상태 관리를 했으며 이를 이용하여 코드 작성 시 this와 bind 및 클래스 문법에 대한 이해가 필요하며, 로직의 재사용이 어렵다. 
• 하지만 Hook의 등장으로 함수형 컴포넌트에서도 상태관리를 할 수 있게 되었다.

 

Hook이란 어떤 것일까?

• 리액트 16.8 버전부터 Hook이 등장하며 상태 관리를 위해 클래스형 컴포넌트를 이용하여 상태 관리를 할 필요성이 없어졌다.
• Hook은 함수형 컴포넌트에서 React state와 life-cycle을 연동할 수 있게 하는 함수이다.
• Hook의 장점은 코드가 간결해져 가독성이 좋고, 클래스형 컴포넌트에서 문제가 되는 HOC헬(추후 조사예정)을 벗어 날 수 있다.
• Hook에는 useState, useEffect 등의 함수가 포함되어 있으며 해당 포스트는 useState에 대해 소개할 것이다.
• class형 컴포넌트와 Hook을 사용한 함수형 컴포넌트에서 각각 상태 관리에 대한 코드 작성을 했을 시 Hook을 사용한 코드가 보다 가독성이 좋음을 확인할 수 있다(출처 : https://studyingych.tistory.com/59).

{클래스형 컴포넌트를 통한 상태 관리}
import React, { Component } from 'react';

class App extends Component {
  state = {
    count: 0,
  };

  countUpdate(n) {
    this.setState({
      count: n,
    });
  }
  render() {
    const { count } = this.state;
    return (
      <div>
        <div>
          <h1>{count}</h1>
          <button
            onClick={() => {
              this.countUpdate(count + 1);
            }}
          >
            증가
          </button>
        </div>
      </div>
    );
  }
}

export default App;

 

{Hook을 이용한 함수형 컴포넌트에서의 상태 관리}
import React, { Component, useState } from 'react';

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

  return (
    <>
      {count}
      <button onClick={() => setCount(count + 1)}>증가</button>
    </>
  );
};

export default App;

 

 

useState란?

• state를 함수형 컴포넌트 안에서 사용할 수 있게 하는 함수
• state와 setState()로 구성되어 있고, 초기에 받은 initialValue는 처음 렌더링에만 사용한다.
• useState를 이용하기 위해서 React로부터 useState를 불러온다

import { useState } from "react";

 

• 호출한 useState는 컴포넌트 안에서 호출하며 아래와 같은 문법을 가진다.

function Example() {
	const [isChecked, setIsChecked] = useState(true);
    // const [state 저장 변수, state 갱신 함수] = useState(초깃값);
}

 

• useState 예시

const CheckExample = () => {
  const [isChecked, setIsChecked] = useState(false);

  const handleChecked = (event) => {
    setIsChecked(event.target.checked);
  };

  return (
    <>
      <input type="checkbox" checked={isChecked} onChange={handleChecked} />
      <span>{isChecked ? "체크" : "체크 해제"}</span>
    </>
  );
};
export default CheckExample;