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

사용자 인터랙션에 따라 바뀌어야 할 때 어떻게 구현할 수 있는지에 대하여 정리

 

1. 리액트 훅스가 도입되기전에는 함수형 컴포넌트에서 state 를 사용할 수 없어 클래스형 컴포넌트로 수정한 후 state, setState 를 사용하였다 하지만 훅스가 도입되고 난 후로 useState 라는 함수가 도입되어 현재는 함수형 컴포넌트에서도 state 를 사용할 수 있게 되었다고 한다.

 

사용법 :  

import React,{useState} from 'react';

function Counter() {

    const [num, setNum] = useState(0);

    const onIncrease = () => {
       setNum(num + 1); //상태를 업데이트
    }

    const onDecrease = () => {
        setNum(num => num - 1); //어떻게 업데이트할건지 로직을 정의 해주는 함수
    }

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

export default Counter;

 

 

 const [num, setNum] = useState(0);

위 코드는 num : 첫번째 원소 현재상태 값 setNum : 두번째 원소 Setter 함수 입니다(조회시 작동 및 값이 변경되는 함수)

 

 const onDecrease = () => {
        setNum(num => num - 1); //어떻게 업데이트할건지 로직을 정의 해주는 함수
    }

 이 부분은 " 지금은 Setter 함수를 사용 할 때, 업데이트 하고 싶은 새로운 값을 파라미터로 넣어주고 있는데요, 그 대신에 기존 값을 어떻게 업데이트 할 지에 대한 함수를 등록하는 방식으로도 값을 업데이트 할 수 있습니다. " 라고 하는데 아직 이해가 잘 되지 않음... num 쪽 함수명은 마음대로 바꿔도 작동하고 저렇게 업데이트 하겠다 라는 로직을 작성하여 최적화와 관련이 되있다고 합니다 .