[React Hook/Javascript] useState 기본 개념, 예제 코드

개념

 

React hook에서는 useState를 이용해서 간편하게 state값을 변경할 수 있다.

 

const [num, setNumber] = useState(0)

 

위와 같은 형태로 사용한다.

 

배열 안에 들어가는 값은 첫번째 인자값은 값을 변화시킬 변수명,

 

두번째 인자값은 그 값을 변화 시키기 위해 사용할 함수명(?)이다.

 

두번째 인자값은 어느 값을 넣어도 코드 작동에는 문제가 없으나, 관용적으로 set + 첫번째 인자값(맨 앞글자 대문자)

형태로 사용한다.

 

useState() << 안에 들어갈 인자는 화면이 가장 처음 랜더됐을 때, 나타낼 초기값을 설정해주는 것이다.

4 라고 넣으면 num의 값이 4로 설정된다.

 

 

아래부터 클릭 시마다, 2씩 곱해지는 아주 간단한 버튼을 만들어보겠다.

 

예제 코드

 

App.js

 

import Hook from './Commponents/App.jsx'

const App = () => {
  return (
    <div className='App'>
      <h1>useState</h1>
      <Hook/>
    </div>

  );
}

export default App;

 

App.jsx

 

import React,{useState} from 'react'

const Hook = ()=>{
    const [num, setNumber] = useState(1); // num 초기값 1로 설정
    const double = () => {
        setNumber(num * 2) // num값을 *2로 변경해준다.
    }

    return(
        <>
            <div>{num}</div>
            <button onClick={double}>
                Clickme
            </button>
        </>
    )
}

export default Hook;

 

결과

 

 

 

Reference

https://www.youtube.com/watch?v=LYhv0424GmU