[React] React useState 공부하기!

useState란?

[ State ]
우선 State란 컴포넌트가 가질 수 있는 상태를 말한다. 사용자 인터랙션을 통해 컴포넌트의 상태값이 동적으로 변할 경우에는 상태를 관리하는 것이 필요하다.

 

React 16.8버전부터 함수형 컴포넌트(Functional Component)에서도 상태(State)를 관리할 수 있게 되었다. 그것이 useState( )함수이다.

1. Import

React Hooks의 useState는 컴포넌트의 state를 간편히 생성하고 업데이트 시켜줄 수 있게 해주는 도구를 제공한다.

useState를 사용하기 위해선 먼저 React에서 useState를 import 받아야 한다.

import { useState } from 'react';

 

2. 변수 선언

state의 생성과 동시에 가져야 할 초기값을 useState함수의 인자로 넣어주면 state와 setState라는 두가지 요소를 배열 형태로 리턴해준다. 첫 번째 요소의 state명은 임의로 알맞게 설정하면 되고, 두 번째 요소에 set을 붙여준 후 set 다음 문자만 대문자로 설정해 주면 된다.

const [count,setCount] = useState(0);

 

---

[예제]

setState함수를 이용하여 state값이 변할경우 해당 컴포넌트는 화면에 다시 렌더링 되어 변경된 state를 화면에 업데이트 시킨다. 예를들어 + 버튼을 누를경우 state에 +1을 시켜주고, - 버튼을 누를경우 state에 -1을 시켜주는 함수를 짜 보았다.

  )

import { useState } from 'react'
import './App.css';

export default function App() {
  const [count, setCount] = useState(0);

  const clickPlus = () => {
    setCount(count + 1);
  }
  const clickMinus = () => {
    setCount(count - 1);
  }

  console.log('Count 업데이트 -> ', count);

  return (
    <div className="App">
      <header className="App-header">
        <span>클릭 수: {count}회</span>
        <div className='buttons'>
          <button className='btn' onClick={clickPlus}>클릭➕</button>
          <button className='btn' onClick={clickMinus}>클릭➖</button>
        </div>
      </header>
    </div>
  );
}

 

[실행결과]