[REACT] useState

useState?

리액트에서 동적으로 변하는 상태값에 대한 관리가 필요하다
useState를 통해 함수형 컴포넌트에서 상태를 관리하자

사용법

import React from 'react';
import { useState } from 'react';

function Test() {

    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 Test;

useState 함수를 호출하면 배열을 반환
1번째 원소 : number → 현재 상태 값 변수
2번째 원소 : setNumber → 상태 값을 갱신해주는 Setter 함수

응용(1) 버튼 클릭으로 숫자 증가시키기

import React from 'react';
import { useState } from 'react';

function Test() {

    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>
    );
}

export default Test;

setNumber 함수를 이용할때, 이전값(prev)을 받아와 1을 더해주자

왜 그렇게 이렇게 하는거지? 리액트 공식문서를 참고해보자
클래스 컴포넌트의 setState 메서드와는 다르게, useState는 갱신 객체(update objects)를 자동으로 합치지는 않습니다. 함수 업데이터 폼을 객체 전개 연산자와 결합함으로써 이 동작을 복제할 수 있습니다.

const [state, setState] = useState({});
setState(prevState => {
  // Object.assign would also work
  return {...prevState, ...updatedValues};
});

다른 방법으로는 useReducer가 있는데 이는 여러개의 하윗값들을 포함한 state 객체를 관리하는 데에 더 적합합니다.

응용(2) 입력값이 여러개일때

import React from 'react';
import { useState } from 'react';

function Test() {
    const [inputs, setInputs] = useState({
        name: '',
        nickname: ''
    })
    const { name, nickname } = inputs

    const onChange = (e) => {
        const { name, value } = e.target
        setInputs({ ...inputs, [name]: value })
    }

    const onReset = () => {
        setInputs({
            name: '',
            nickname: ''
        })
    }
    
    return (
        <div>
            <input placeholder='이름' name='name' value={name} onChange={onChange}></input>
            <input placeholder='닉네임' name='nickname' value={nickname} onChange={onChange}></input>
            <button onClick={onReset}>초기화</button>
        </div>
    );
}

export default Test;

다음과 같이 useState를 통해 이름, 닉네임값을 동시에 관리를 할때 useState를 사용하는 방법이다.
1. useState를 객체로 하여 name, nickname이라는 키 값을 가지는 객체를 생성하고
2. input에서 onChange가 생길때마다. name을 확인
3. 해당되는 name의 value에 입력받은 값을 입력해준다.