[React] useState 사용하는이유 (1)_기본형 변수

useState

데이터 상태 관리를 위한 훅

입니당...

 

---

useState 사용하는 이유

 

state 가 변하면 생기면 html도 자동으로 재렌더링해주기 때문입니다.

 

useState 로 만든 버튼과, 일반 변수로 만든 버튼이 있습니다.

/* eslint-disable */
import { useState, useReducer } from 'react'

export default () => {

    const [ onoff, setOnOff] = useState(false);
    let onoff2 = false;

    const whenClick=()=> {
        console.log('useState의 값',onoff);
        setOnOff(!onoff);
    }

    const whenClick2=()=> {
        console.log('일반변수의 값',onoff2);
        onoff2 = !onoff2;
    }
    
    return(
        <>
            <p>{onoff ? 'ON' : 'OFF'}</p>
            <button onClick={() => whenClick()}>
                useState 스위치
            </button>

            <p>{onoff2 ? 'ON' : 'OFF'}</p>
            <button onClick={() => whenClick2()}>
                일반 변수 스위치
            </button>
        </>
    )
}

 

 

useState 버튼을 누르면 html 이 바로 바뀌는데

일반변수버튼은 html 이 안바뀝니다.

 

---

 

 

useState() 사용 방법

 

useState()가 호출되면 배열을 반환한다.

배열의 첫번째 원소는 상태값이고, 두번째 원소는 상태를 업데이트하는 함수이다. 
함수에 파라미터를 넣어서 호출하게 되면 전달받은 파라미터로 값이 바뀌게 되고 컴포넌트는 정상적으로 재렌더링 된다.

 

onoff 는 상태값입니다. false 로 초기값을 준 상태이죠

setOnOff 는 state 함수입니다.

 

state 함수 파라미터에 원하는 값을 넣으면 onoff 값이 바뀝니다.