아래 글은 노마드코더님의 강의를 들은 후, 구글링을 해가며 배운 내용을 기반으로 작성하였습니다.

Hooks

React의 버전이 올라가면서 더이상 클래스 형태로 선언하지 않고 함수형으로도 사용할 수 있게 되었습니다. 하지만 이전 글의 props와 state에서 사용했던 this를 더이상 사용할 수 없어졌습니다. this는 현재 인스턴스를 가리키는 keyword이기 때문이죠.

하지만 React는 새로운 개념을 16.8버전에 추가시켜 이를 해결했습니다. 바로 Hooks입니다. 처음 Hooks가 도입되었을 때 React의 의도가 React 홈페이지에 잘 기술되어 있습니다.

A Hook is a special function that lets you “hook into” React features.

React에서 Hook은 state와 같은 React features를 함수 안에서 사용할 수 있도록 해준다고 정의되어 있습니다.

useState()

useState는 함수 내에서 state의 초기화와 setState를 모두 설정할 수 있도록 해주는 Hook입니다.

function App() { const [state, setState()] = React.useState(a);

return(...);

}

위와 같은 선언으로 state의 초기값으로 a(a를 정의하지 않아도됩니다.), state을 변경시킬 때 사용할 함수 setState()를 함수 내에서 정의할 수 있게 되었습니다.

예를들어 클릭할 때마다 1씩 증가하는 count에 대한 state를 만들고 싶다면

import React, { useState } from 'react';

function Example() {
    const [count, setCount] = useState(0);
    return (
       <div>
         <p>You clicked {count} times</p>
         <button onClick={() => setCount(count + 1)}>
         Click me
         </button>
       </div>
    );
}

위와 같이 작성하시면 됩니다. count=0으로 처음에 state가 설정되고, button이 클릭될 때마다 setCount를 통해 count = count + 1이 되어 count값이 증가하게 됩니다.

참고
Hooks & useState: https://reactjs.org/docs/hooks-state.html