리액트 훅

v16.8에 새로 도입된 기능입니다. 함수형 컴포넌트에서 더 다양한 작업을 가능하게 해줍니다.

useState#

useState()는 반환값으로 기본적인 값과 그 값을 설정하는 함수를 어레이 형태로 리턴하게 됩니다.

예시#

숫자형태의 값을 가지는 카운터 예제입니다.

counter.js

import React, {useState} from 'react';

const Counter = () => {
    // 비구조화 할당
    const [value, setValue] = useState(0);
    return(
        <div>
         <p>
         카운트: {value}
         </p>
        </div>

        <button onClick={() => setValue(value + 1)}>더하기</button>
        <button onClick={() => setValue(value - 1)}>빼기</button>
    )
}

App.js

import React from 'react';
import Counter from './Counter';

const App = () => {
  return <Counter />;
};

export default App;