React의 Hook이란 - useState, useEffect

React에서 Hook이 무엇인지와 기본 Hook인 useState와 useEffect에 대해 간단하게 정리해보았다. 리액트 공식 문서의 내용을 주로 참고했다.

Hook이란

함수 컴포넌트에서 React state와 생명주기 기능을 연동할 수 있게 해주는 함수

• React v16.8.0에 추가되었다. (2019.02.16)
• React는 useState나 useEffect와 같은 내장 Hook을 제공하며, 직접 만들어서 사용할 수도 있다. 유용한 Hook을 모아놓은 react-use 와 같은 repository도 있다.
• 이전 버전과의 호환성을 100% 가지고 있어 이미 작성한 컴포넌트를 모두 재작성하는 것은 권장하지 않으며, 새로 작성하는 컴포넌트에 Hook을 적용하면 된다고 한다.
• Hook을 쓰면 함수형 프로그래밍을 사용할 수 있으나, React에서 Class가 제거되지는 않는다.

useState

이전의 함수형 컴포넌트에서는 state가 없었지만, useState를 사용함으로써 함수형 컴포넌트에서 state를 사용할 수 있게 되었다. useState는 다음과 같이 사용한다.

import { useState } from 'react';

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

현재의 state 값(count)과 이 값을 업데이트하는 함수(setCount)를 함께 제공한다.

useState()안의 0을 count의 초기값으로 사용한다.

button을 클릭하면 setCount에 의해 state가 변해 count의 값이 업데이트된다.

this.setState와의 차이점은 이전 state와 새로운 state를 합치지 않는다는 점이다.

useEffect

useEffect는 render 이후에 어떤 일을 수행할지를 정의한다. componentDidMount나 componentDidUpdate, componentWillUnmount와 같은 목적으로 사용한다. useEffect는 처음 렌더링과 이후의 모든 업데이트에서 수행된다.

import { useState, useEffect } from 'react';

const UpdateCount = () => {
	const [count, setCount] = useState(0);
	useEffect(() => {
		console.log(`count is ${count}`);
	});
	return (
		<div>
			<p>{count}</p>
			<button onClick={() => setCount(count + 1)}> + </button>
		</div>
	)
}

위 코드를 실행하면 초기에 count 값이 0일 때와 button을 클릭할 때 모두 console에 값이 출력된다.

Hook을 사용하는 이유와 useState, useEffect에 대해 찾아보면서 Hook을 쓰는 이유를 좀 더 명확하게 알고 사용할 수 있게 된 것 같다.