[React] React Hooks: useState() - 컴포넌트에서 바뀌는 상태값 관리!

React

useState()

React Hooks이 나오기 이전 함수형 컴포넌트에서는 상태값을 관리 할 수가 없었습니다.
상태값을 관리하기 위해서는 함수형 컴포넌트가 아닌 class 기반의 클래스 컴포넌트를 작성해야 했습니다.

그러나 React 16.8 버전부터 Hooks라는 기능이 추가가 되면서
함수형 컴포넌트에서도 상태값을 관리할 수 있게되었습니다.

그것을 가능하게한 것이 Hooks중 하나인 useState() 입니다.
간단하게 count해주는 web을 만들어 보겠습니다.

useState() 사용법

0. 전체코드

See the Pen React useState() by Shape2ee (@shape2ee) on CodePen.

import React,{ useState } from 'react'

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

  const onClick = () => {
    setCount((prevCount) => prevCount + 1)
  }
  return (
    <>
      <div>
        {count}
      </div>
      <button onClick={onClick}>+1</button>
    </>
  )
};

export default Count;

1. import

import React, { useState } from 'react;

useState를 사용하려면 먼저 import해줘야 합니다.

2. useState() 호출

const [count, setCount] = useState(0);
const [상태, 상태변경함수] = useState(초깃값);

useState()를 호출하면 배열을 반환을 하는데,
1번째 count는 현재 상태값을 저장하는 변수이고,
2번째 setCount는 상태값이 변경되어 갱신해줄 함수입니다.
그리고 useState에 ()괄호 안의 값은 상태 값의 초깃값입니다.

예전 class에서는 상태를

this.state = {
  count: 0,
  name: 'a',
  age: 20,
}

이런식으로 객체로 묶어서 표현하여 setState로 상태를 변경해주는 방식이었는데
useState에서는 상태마다 상태를 변경해주는 함수를 같이 제공하기 떄문에 값을 좀 더 간단하게
바꾸어 줄 수 있게되었습니다.

3. 상태값 갱신 함수

const onClick = () => {
  setCount((prevCount) => prevCount + 1)
}

상태값을 갱신해주는 함수인 setCount()는 setCount(count+1) 이런식으로 새로운 값을 넣어주는데,
위의 코드와 같이 기존 값을 업데이트 하는 경우에는 함수를 넣어 이전값에 추가 하는 식으로
작업을 할 수가 있고, 이와 같은 방식으로 오류를 방지 할 수 있습니다.

참조
https://react.vlpt.us/basic/07-useState.html
https://www.zerocho.com/category/React/post/5f97cc26591c990004e1f5f8
https://xiubindev.tistory.com/97