Hook이란?

---

리액트 16.8 버전부터 새로운 요소로 추가되었다. 이전 버전에서는 함수형 컴포먼트를 관리할 수 없었지만 Hook도입 이후 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있게 되었다.

useState

---

Hook을 호출하여 함수 컴포먼트이다.
useState는 state 변수와 state를 업데이트 하는 함수, 두 가지 쌍을 반환한다.

useState 사용방법

이 함수를 사용 하기 위해서는 아래와 같이 import 해줘야 한다.

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

import 해준 후, useState() 함수를 사용해서 변수를 생성 해주면 프로그램 내부에서 useState를 사용 할 수 있다.

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

count 값을 변경하기 위해서는 두 번째 인자로 들어간 함수를 이용해서 값을 바꿔준다.
useState()가 호출되면 배열을 반환하는데 그 배열의 첫 번째 원소는 상태값이고 두 번째 원소는 상태를 업데이트 하는 함수이다. 해당 함수에 파라미터를 넣어서 호출하게 디면 전달 받은 파라미터로 값이 바뀌게 되고 컴포먼트는 정상적으로 리렌더링 된다.

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

위 코드를 작성하고 실행 해보면 setCount 함수 내용으로 count 상태값이 업데이트 된다.