[React]useState를 통한 동적 상태 관리

사용자 인터렉션에 따라 동적으로 바뀌어야 할 때 어떻게 해야하는지.

리액트 16.8에서 hooks라는 기능이 도입되면서
함수형 컴포넌트에서도 가능.

counter기능 구현하기 .

이벤트 발생하면 특정 함수 실행 되도록 설정하기

import React from 'react'

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;

이벤트 설정할 때 주의 할 점

여기에 함수를 넣어주는거지 onIncrease()이렇게 실행을 시켜주면 안됨.
()하면 렌더링 될 때 호출되기 때문임. 함수를 넣어주는거지 여기서 호출해주는게 아님.

Component에 동적인 상태 넣어주기.

import React, { useState } from 'react';

function Counter(){
    //useState라는 상태를 만들건데, 상태의 기본값은0으로 하겠다.
    //setNumber는 이 상태를 바꾸어주는 함수. 
    //배열 비구조 할당, 구조 분해 통해서 작성함. 
    //useState가 호출 될 때 배열 반환. 첫번째 원소를 number로 추출.
    
    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;

요약

1. useState를 사용해서 바뀌는 값을 사용할 수 있고, 값의 기본값은 파라미터로 넘겨주면 된다. useState(0)이렇게. 이러면 0 이 기본값.
2. useState 는 배열을 반환하는데, 첫번째는 현재상태, 두번째는 이 상태를 바꾸는 함수. 이 함수에 새로운 상태를 넣어서 호출해주면 값이 바뀌는거다.

useState할 때는 함수형 업데이트

setNumber(다음 업데이트 하고싶은 값) 이렇게 했었는데, 이 값을 어떻게 할지에 대한 로직을 정의하는 함수를 넣어줄 수도 있음.

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

값을 어떻게 할것이다. 라는 로직이 있는 함수를 넣어줄 수도 있음.
이걸 업데이트 함수라고 함.
리엑트 컴포넌트를 최적화 할 때 이런 함수형 업데이트를 하는 것이 필요하다.

import React, { useState } from 'react';

function Counter(){
    //useState라는 상태를 만들건데, 상태의 기본값은0으로 하겠다.
    //setNumber는 이 상태를 바꾸어주는 함수. 
    //배열 비구조 할당, 구조 분해 통해서 작성함. 
    //useState가 호출 될 때 배열 반환. 첫번째 원소를 number로 추출.
    
    const [number,setNumber] = useState(0);

    const onIncrease = ()=>{
        setNumber(prevNumber => prevNumber + 1)
    }
    const onDecrease = ()=>{
        setNumber(prevNumber => prevNumber - 1)
    }
    return(
        <div>
            <h1>{number}</h1>
            <button onClick={onIncrease}>+1</button>
            <button onClick={onDecrease}>-1</button>
        </div>
    );
}

export default Counter;

최적화와 관련이 있다.

정리

setNumber는 두가지 용도가 있는데,
그 다음 상태를 넣어줄 수도 있고
이 로직으로 업데이트 할거야. 하고 함수를 넣어줄 수도 있다.