[React] useState 사용법

1.State란?

컴포넌트가 가질 수 있는 상태이다 클릭을 하는 컴포넌트가 있다면 state로 현재 클릭 횟수를 가질 수 있다.

2. Import

react Hooks의 useState는 컴포넌트의 state를 간편하게 생성하고 업데이트를 시킬 수 있게 해주는 도구를 제공해준다.

import {useState} form 'react';

3. 변수 선언

아래처럼 state의 생성과 동시에 가져야 할 초기값을 useState함수의 인자로 넣어주면 state와 setState라는 두가지 요소를 배열 형태로 리턴해준다. 두번째요소에 set만 붙여준다면 이름은 자유롭게 지어도 상관없다.(100은 초기값을 설정해 준 것이다.)

const [state, setState] = useState(100);

4.변수 재선언

state의 값을 변경하려면 setState 함수를 불러서 인자에는 변경될 값을 넣어주면 된다.

const plus = () => setState(state +1);

5.응용

import { useState } from 'react';
import './styles/Box.css';

function App() {
  const [state, setState] = useState(100);
  const plus = () => setState(state + 1);
  const minus = () => setState(state - 1);

  return (
    <div className='App'>
      <div className="Box">
        <h2>Box : {state}</h2>
        <button onClick={plus}>PLUS</button>
        <button onClick={minus}>MINUS</button>
      </div>
    </div>
  );

};

export default App;

./styles/box.css

.Box {
  border: 2px solid blue;
  margin: 10px;
}