[React] useState - Hooks

컴포넌트에서 사용하는 내용이, 사용자 interaction을 통해 값이 바뀌어야 할 때, state를 사용하는데 

React의 함수형 Hooks에서 사용하려면 useState를 사용해야 합니다. 

 

useState(동적인 값)사용하기

 

컴포넌트에서 동적인 값을 상태(state)라고 부릅니다. 리액트에 useState 라는 함수가 있는데요, 이것을 사용하면 컴포넌트에서 상태를 관리 할 수 있습니다.

 

먼저 사용자 interaction에 따라 바뀔 이벤트를 설정해야합니다. 

이벤트가 발생했을 때 특정 함수가 호출되려면 컴포넌트 내부에서 함수를 작성합니다. 

 

리액트에서 엘리먼트에 이벤트를 설정해줄 때에는 on이벤트이름={실행하고싶은함수} 형태로 설정해줘야 합니다.

주의해야할 점은, 함수를 그대로 넣어줘야하지, 함수를 실행시키면 안됩니다.

 

 

Counter.js

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;

위 예제에서는 버튼이 클릭되었을 때, 함수가 실행되게 하고싶다하면, on이벤트명 을 통해 이벤트를 설정하고 

이벤트명 = { 호출할 함수 } 를 설정하면 함수를 설정할 수 있는데 위 예제에서는, 버튼이 onClick 이벤트가 발생하였을 때 onIncrease 함수를 실행하기 위해 호출하였습니다. 

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

useState를 사용할 때에는 상태의 기본값을 파라미터로 넣어서 호출해줍니다. 현재 기본 파라미터의 값은 0입니다.

이 함수를 호출해주면 배열이 반환되는데, 첫 번째 요소는 현재 상태, 두번째 원소는 setter함수입니다.

위 코드의 의미는 number 라는 상태를 만들 것인데, 이 상태의 기본 값은 0을 하겠다.

setNumber는 number의 상태를 업데이트 하는 함수입니다.

 

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

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

위 함수는 기존의 number에 1을 더하고, 그 값을 Setter 함수는 파라미터로 전달 받은 값을 최신 상태로 설정해줍니다.

 

정리한 것을 요약해보자면, useState을 통해 바뀐 값을 관리할 수 있게 되고, 값의 기본값은 useState함수 파라미터로 넘겨주면 됩니다. 

useState는 배열을 반환하게 되는데 첫번째 인자로는 배열의 현재 상태, 두번째는 이 배열을 바꾸는 set함수를 반환하게 됩니다.

사용자 interaction을 통해 이벤트가 발생하게 되면, 함수를 호출하고 싶을 때, 함수를 연결해주면 됩니다.

---

추가적으로 useState를 사용할 때 함수형 업데이트를 사용하는 방법

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

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

현재 setNumber에는 그 다음 업데이트 하고 싶은 값을 넣어줬는데, 다음 업데이트 하고 싶은 값을 넣어주는 대신에, 

그 다음 값을 어떻게 업데이트 할지에 대한 로직을 정의하기 위한 함수를 넣어줄 수 있습니다. 

 

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

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

현재 상태를 가져와서, 이런 식으로 업데이트 하겠다 라고 하면 됩니다. 기존 방식 number + 1 이라는 뜻은, 이 상태를 가져와서 참조해서 이 값을 넣겠다 라는 소리였지만 이 값을 어떻게 업데이트 할 것이다라는 로직이 있는 함수를 넣어줄 수 있습니다. 이것을 업데이트 함수라고 합니다. 업데이트 함수는 최적화랑 관련이 있습니다. 

 

setNumber의 용도

1) 다음 값을 어떠한 상태로 바꿀 것이다 라는 다음 상태를 넣어줄 수 있습니다.

2) 이런 로직으로 업데이트 할 것이다라는 업데이트 함수를 넣어줄 수 있습니다.