5. 바뀌는 값을 관리해주는 useState

# 참고로 리액트 16.8 이전 버전에서 함수형 컴포넌트에서는 상태를 관리할 수 없었는데,

리액트 16.8 에서 Hooks라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다.

​

# useState도 이 Hooks 중 하나!

​

# 리액트에서 엘리먼트에 이벤트를 설정해줄 때 onClick={onIncreate} 처럼 설정을 해주는데,

이때 함수형태를 넣어주어야 하지, 함수를 실행하면 안된다.

​

onClick={onIncrease} (O)

onClick={onIncrease()} (X) → 렌더링을 하는 과정에서 함수가 호출되어버리기 때문

​

# 컴포넌트에서 동적인 값을 '상태(state)'라고 한다.

 

import React, { useState } from 'react';

function Counter() {
  const [number, setNumber] = useState(0);

  const onIncrease = () => {
    setNumber(number+1);
  }

  const onDecrease = () => {
    setNumber(number-1);
  }

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

 

아래 코드 부분에서 기본 값을 파라미터에 넣어서 호출해주면 된다.

const [number, setNumber] = useState(0);

 

원래 이 함수를 호출했을 때 반환되는 값은 배열인데, 비구조화 할당을 통해 각 원소를 추출해준 것!

const numberState = useState(0);
const number = numberState[0]; // 첫 번째 원소는 현재 상태
const setNumber = numberState[1]; // 두 번째 원소는 Setter 함수

Setter 함수인 setNumber 함수는 파라미터로 전달받은 값을 최신 상태로 설정해준다.

근데 setNumber(number+1) 처럼 값을 그냥 파라미터로 넣어주는 것보다, 최적화된 방법은 값을 업데이트하는 함수를 파라미터로 넣어주는 것.

(함수형 업데이트)

 

import React, { useState } from 'react';

function Counter() {
  const [number, setNumber] = useState(0);

  const onIncrease = () => {
    setNumber(prevNumber => prevNumber + 1);
  }

  const onDecrease = () => {
    setNumber(prevNumber => prevNumber - 1);
  }

---

출처 : https://react.vlpt.us/basic/07-useState.html