useState를 통해 컴포넌트에서 바뀌는 값 관리

useState를 통해 컴포넌트에서 바뀌는 값 관리

리액트 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었습니다

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

useState라는 함수가 바로 리액트의 Hooks 중 하나이다

Counter.js

import React from 'react';

function Counter() {
  return (
    <div>
      <h1>0</h1>
      <button>+1</button>
      <button>-1</button>
    </div>
  );
}

export default Counter;

App.js

import React from 'react';
import Counter from './Counter';

function App() {
  return (
    <Counter />
  );
}

export default App;

 

이벤트 설정

Counter에서 버튼이 클릭되는 이벤트가 발생했을 때, 특정 함수가 호출되도록 설정해 보자

 

Counter.js

import React from 'react';

function Counter() {
  const onIncrease = () => {
    console.log('+1')
  }
  const onDecrease = () => {
    console.log('-1');
  }
  return (
    <div>
      <h1>0</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

여기서 onIncrease와 onDecrease는 화살표 함수를 사용하여 구현하였다

함수를 만들고 button의 onClick으로 각 함수를 연결해 주었습니다

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

이벤트 설정할 때에는 함수 타입의 값을 넣어 주어야 한다

useState

컴포넌트에서 동적인 값을 상태(state)라고 부릅니다

리액트에 useState를 사용하면 컴포넌트에서 상태를 관리할 수 있습니다

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;

import React, { useState } from 'react';

이 코드는 리액트 패키지에서 useState 함수를 불러옵니다

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

useState를 사용할 때에는 상태의 기본값을 파라미터로 넣어서 호출해 줍니다 이 함수를 호출해 주면 배열이 반환이 되는데, 여기서 첫 번째 원소는 현재 상태이고 두 번째 원소는 Setter 함수이다

배열 비구조화 할당을 통하여 각 원소를 추출해 줍니다

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

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

Setter 함수는 파라미터로 전달 받은 값을 최신 상태로 설정해 줍니다

<h1>{number}</h1>

h1 태그에서는 이제 0이 아닌 {number} 값을 보여 주어야 한다

함수형 업데이트

지금은 Setter 함수를 사용할 때, 업데이트하고 싶은 새로운 값을 파라미터로 넣어 준다 그 대신에 기존 값을 어떻게 업데이트 할지에 대한 함수를 등록하는 방식으로도 그 값을 업데이트할 수 있다

import React, { useState } from 'react';

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

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

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

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

export default Counter;

onIncrease 와 onDecrease 에서 setNumber 를 사용 할 때 그 다음 상태를 파라미터로 넣어준 것이 아니라, 값을 업데이트 하는 함수를 파라미터로 넣어주었습니다