React(리액트): useState를 통한 동적 상태 관리

지금까지 만들어봤던 리액트 컴포넌트들에는 동적인 부분이 하나도 없었다. 값이 바뀌는 일이 없었던 것.

이번에는 컴포넌트에서 보여주어야하는 내용이 사용자와의 intercation에 따라 바뀌어야 할 때 어떻게 구현할 수

있는지에 대하여 알아보자.

 

리액트 16.8이전 버전에서는 함수형 컴포넌트에서는 상태 관리를 할 수 없었다. 그런데 리액트 16.8에서 'hooks'라는 

기능이 추가되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다. 이번에는 'useState'라는 함수를 사용해 

볼 건데, 이게 바로 리액트의 hooks 중 하나다.

 

정말 진부한 예제 중 하나인 버튼을 누르면 숫자가 바뀌는 카운터를 만들어 useState함수를 알아보자.

 

Counter.js

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

export default Counter;

카운터 컴포넌트

 

여기서 버튼이 클릭되는 이벤트가 발생하면 특정 함수가 호출되도록 설정해보자.

우선 Counter 컴포넌트에서 함수 작성을 해주어야 한다.

 

Counter.js

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;

먼저 간단하게 '+1' 버튼을 누르면 '+1'이, '-1' 버튼을 누르면 '-1'이 콘솔에 출력되도록 했다.

onClick에 함수를 넣어주는 방법을 주의하자. 여기서 함수를 넣어주어야 하는 것이지, 'onIncrease()'처럼 괄호를 붙여 

함수를 호출해주면 안된다. 이렇게 하게 되면 리액트 컴포넌트가 렌더링 될 때 함수가 호출되는 문제가 발생한다.

여기 코드의 의도는 클릭했을 때 함수를 호출하는 것이지 렌더링 됐을 때 호출하는 것이 아니다.

 

그리고 HTML과 JavaScript의 경우 'on' 뒤에는 'click', 'doubleclick'처럼

소문자가 붙는데, JSX에서는 'onClick', 'onDoubleClick'처럼 중간중간 대문자로 작성해주어야 한다.

 

이제 컴포넌트에서 'useState'를 사용해 동적인 상태를 끼얹어 보자. 

 

Counter.js

import { 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;

먼저 'useState'를 import 해서 사용해야 한다.

그리고 4번 줄 'const [number, setNumber] = useState(0)'의 뜻은 number라는 상태를 만들건대 이 상태의 기본값은

0으로 하겠다는 의미이고, setNumber는 이 상태를 바꾸어주는 함수이다. useState가 호출되었을 때는 배열을 반환하게 되는데, 이 배열을 저장할 때 배열 비구조화 할당 문법을 사용했다.

6번 줄이 실행되면 기본값인 0에 1을 더한 결과를 상태를 바꾸어주는 함수인 setNumber가 갖게 되고, number에 

저장되어 상태를 바꾸어준 것이 된다. 그리고 13번 줄과 같이 {number}를 해주면 카운터에 버튼 클릭에 따라 바뀌는 

숫자가 표시된다.

 

추가적으로 useState를 사용하게 될 때 함수형 업데이트를 하는 방법을 알아보자.

 

위에서 살펴본 setNumber의 경우에는 그다음 업데이트하고 싶은 값을 넣어주었는데 함수형 업데이트는 

다음 업데이트하는 값을 넣어주는 대신 이 값을 어떻게 할 지에 대한 로직을 정의하는 함수를 넣어주는 것이다.

다시 말해, 어떻게 업데이트할지에 대한 함수를 넣어주는 것이다.

 

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

다음과 같이 prevNumber 값을 어떻게 업데이트 할지 로직이 있는 함수를 넣어주는 것이다. 이것을

함수형 업데이트라고 부른다. 지금 당장은 이것을 왜 사용하는지 이해가 안 간다. 지금 당장은 큰 차이가 없기 때문이다.

하지만 나중에 리액트 컴포넌트를 최적화하는 단계에서는 '함수형 업데이트'라는 것이 필요하다. 지금 당장은

이런 식으로도 업데이트가 가능하고 이 방법은 최적화랑 관련이 있다는 정도만 알아두고 넘어가자. 

성능 최적화에 대해 알아볼 때 더 자세하게 알아볼 예정이다.