React - useState 함수

1.useState란?

리액트 16.8이전 버전에서는 함수형 컴포넌트에서는 상태관리를 할 수 없었지만 리액트 16.8에서 Hooks라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다.

useState는 값이 변하는지 변하지 않는지 상태를 관리를 한다.
그래서 초기값을 줄 수 있는데 초기값을 통해서 특정 값을 정의해주는 함수를 만들어 줄 수 있다.

2. useState 코드설명

import React, { useState } from 'react';

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

위의 코드에서는 기본값을 0으로 설정을 해주었다.
그래서 number = 0 이 된다.
setNumber은 number 변수의 값을 설정한다. 그래서 값을 setNumber로 변화를 시킬 수 있다.

const plus = () => {
        console.log('1을 더합니다.');       
        setNumber(prev => prev + 1);
    }
    const minus = () => {
        console.log('1을 뺍니다.');
        setNumber(prev => prev - 1);
    }

위에서 말했듯이 setNumber은 변화를 시킬 수 있다.
기본 값은 0이지만
const plus에서 setNumber은 +1이 되고, const minus에서는 setNumber -1이 된다.

prev은 setState 함수에 파라미터로 함수를 넘겨주면 이전 값을 저장해주는 변수이다.