[React] useState를 통해 컴포넌트에서 '바뀌는 값' 관리하기

🍺 이번 시간에는 useState를 통해 컴포넌트에서 '바뀌는 값' 관리하는 방법에 대해서 배워보겠다.

지금까지 우리가 리액트 컴포넌트를 만들 때에는 동적인 부분이 하나도 없었다. 값이 바뀌는 일이 없었다. 이번 시간에는 컴포넌트에서 보여주어야 하는 내용이 사용자의 인터랙션에 따라 바뀌어야 할 때 어떻게 구현할지에 대하여 알아보겠다.

 

🍺Hooks

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

(그래서 클래스 컴포넌트를 사용했었다. state안에 값이 변화해야 하는 변수를 넣었던 것)

 

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

우선 useState를 사용해볼 것인데, 이게 리액트의 Hooks중 하나이다.

 

버튼을 누르면 숫자가 증가/감소하는 예제를 통해 알아보겠다.

 

import React from "react";

function Counter(){

    return (

        <div>

            <h1>0</h1>

            <button>+1</button>

            <button>-1</button>

        </div>

    )

}

export default Counter;

✅ Counter.js

Counter 컴포넌트를 만든다.

 

function App() {

  return (

    <Counter />

  );

}

그리고 App 컴포넌트에서 Counter 컴포넌트를 추가한다.

 

이렇게 나온다. 지금은 버튼을 눌러도 아무 작동도 하지 않는다.

 

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>

    )

}

위와 같이 Counter 컴포넌트에서 onIncrease와 onDecrease 함수를 만들고, 이를 button의 onClick에다가 넣어준다.

그리고 개발자 콘솔을 확인해보면, +1 버튼을 누를때마다 콘솔에 +1 이라고 뜨고, -1 버튼을 누를때마다 콘솔에 -1이라고 뜨는 것을 볼 수가 있다.

💥주의사항 : 함수 이름만 적어주어야 하고 함수를 호출하도록 작성하면 안된다.

(onClick={onIncrease()} ❌   onClick={onIncrease}) ⭕)

 

🍺 useState 사용하기

import {useState} from "react";

react로부터 useState를 불러온다.

 

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

그리고 counter 컴포넌트 안에서 위와 같이 작성한다.

useState가 호출되었을 때는 배열을 반환하게 되는데 첫번째 원소를 number라는 이름으로 추출하고 두번째 원소를 setNumber라는 이름으로 추출하겠다는 의미이다.

useState 안에는 초기값을 넣어준다.

useState는 배열을 반환하는데, 첫번째 원소는 현재 상태, 두번째 원소는 현재 상태를 변경해주는 함수를 의미한다.

 

setNumber는 현재 상태를 업데이트 해주는 값이다.

 

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>

    )

}

useState를 사용해서 바뀌는 값을 관리할 수가 있게 되고 이 값의 기본 값은 이 함수의 파라미터로 넣어준다. 여기서는 0을 기본값으로 설정하였다.

그리고 useState라는 함수는 배열을 반환하게 되는데, 첫번째 원소는 현재 상태, 두번째 원소는 현재 상태의 값을 변경해주는 함수이다. 그 함수에 새로운 값을 넣어서 호출하게 되면 값이 바뀌게 되는 것이다.

 

function Counter(){

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

    const onIncrease = () => {

        setNumber(prev => prev + 1);

    };

    const onDecrease = () => {

        setNumber(prev => prev - 1);

    };

    return (

        <div>

            <h1>{number}</h1>

            <button onClick={onIncrease}>+1</button>

            <button onClick={onDecrease}>-1</button>

        </div>

    )

}

setNumber에서 위와 같이 함수를 넣어줄 수도 있다.

이전의 숫자를 가져와서 그 숫자에 + 1을 해서 반환한다 뭐 그런건데, 이런걸 함수형 업데이트라고 한다.

지금은 아까처럼 setNumber(number + 1)이랑 setNumber(prev => prev + 1)이랑 무슨 차이가 있는지 모르겠지만 나중에 최적화랑 관련이 있다고 한다. 그 때 더 알아보는 것으로 하자. 일단은 아무튼 함수 식으로 쓰는게 더 좋다고 한다.