React Hook의 useState

이 글은 본인이 공부하며 정리한 글입니다. 내용이 정확하지 않을 수 있습니다.
잘못된 부분은 지적해주시면 감사하겠습니다.

1. Hook?

우선 React Hook은 React 16.8에 새로 추가된 기능입니다.
React는 클래스 컴포넌트(class component)에서만 사용할 수 있었던 state를 함수형 컴포넌트(functional component)에서도 사용할 수 있도록 만들어진 것이 Hook입니다.

Hook의 종류는 많은데 기초가 되는 useState를 살펴보겠습니다.

2. 함수형 컴포넌트 기본 구조

useState를 사용하기 위한 함수형 컴포넌트를 사용하는 방법은 2가지입니다.

function App() {
	//여기서 hook 사용!!
	return(
    	<div>
        	<h1>Hello, world</h1>
        </div>
    );
}

const App = () => {
	//여기서 hook 사용!!
	return(
    	<div>
        	<h1>Hello, world</h1>
        </div>
    );
}

3. useState 사용

컴포넌트에서 동적인 값을 상태(State)라고 부릅니다. useState를 사용해서 상태 관리를 할 수 있게 됩니다.

useState를 사용하기 위해서 React 패키지에서 import를 해줍니다.

import React, { useState } from 'react';

useState의 기본 형태는 다음과 같습니다.

const [이름, set이름] = useState(초기값);
const [value, setValue] = useState(0);

이름, value는 현재 state의 값을 갖고 set이름, setValue는 state의 값을 변경하는 함수입니다.
이름, value는 return( ) 안에서 { }를 통해 사용할 수 있습니다.

<h1>Hello, {name}</h1>

4. 상태 변경

set이름, setValue는 button의 onClick같은 함수를 통해 변경할 수 있습니다.
초깃값 'John'에서 button을 누른 후 'Tom'으로 변경합니다.

import React, { useState } from 'react';

const App = () => {
	const [name, setName] = useState('John') //name의 초깃값 'John'
    const onClickHandler = () => {
    	setName('Tom')
    }
	return(
    	<div>
        	<button onClick={onClickHandler}>who?</button>
        	<h1>Hello, {name}</h1>
        </div>
    );
}