Hooks는 리액트 v16.8에 새로 도입된 기능으로 ****함수 컴포넌트에서 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다.

실습을 진행하기 위해 create-react-app을 사용하여 새로운 프로젝트를 생성한다.

$ npx create-react-app react-tech-hooks

// github 연동
$ rm -rf .git
$ git init
$ 이후 동일

8-1. useState

useState는 함수 컴포넌트에서 상태를 관리할 때 사용하는 가장 기본적인 Hook이다.

• 함수 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해준다.

useState 기능을 사용해서 숫자 카운터를 구현해 보자. Counter 컴포넌트를 생성한다.

import React, **{useState}** from 'react';

const Counter = () => {
    **const [value, setVale] = useState(0);**

    return (
        <div>
            <p>현재 카운터 값은 <b>{value}</b>입니다.</p>
            <button onClick={() => setVale(value + 1)}>+1</button>
            <button onClick={() => setVale(value - 1)}>-1</button>
        </div>
    );
};

export default Counter;

✓ useState는 코드 상단에서 import 구문을 통해 불러온다.