Hooks

리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있습니다.

useState

가장 기본적인 hooks이며, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해줍니다.

import React, { useState } from 'react';

const Counter = () => {
	const [value, setValue] = useState(0);
	
	return (
		<div>
			<p>현재 카운터 값은 <b>{value}</b>입니다.
			<button onClick={() => setValue(value + 1)}>+1</button>
			<button onClick={() => setValue(value - 1)}>-1</button>
		</div>
	)
}

useEffect

컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook입니다.

useEffect(() => {
	console.log('렌더링 완료');
	console.log({
		name,
		nickname,
	});
});

처음 렌더링될 때만 실행하고, 업데이트될 때는 실행하지 않으려면 두번째 파라미터에 비어 있는 배열을 넣어주면 됩니다.

useEffect(() => {
	console.log('마운트될 때만 실행');
}, []);

특정 값이 업데이트될 때만 실행하려면 두번째 파라미터로 전달되는 배열 안에 값을 넣어 주면 됩니다.

useEffect(() => {
	console.log(name)
}, [name]);

컴포넌트가 언마운트되기 전이나 업데이트되기 직전에 작업을 수행하고 싶다면 뒷정리 함수(cleanup)를 반환해주면 됩니다.

useEffect(() => {
	console.log('effect');
	console,log(name);
	
	return () => {
		console.log('cleanup');
		console.log(name);
	};
}, [name]);

useReducer

useState보다 더 다양한 컴포넌트의 상황에 따라 다양한 상태를 다른 값으로 업데이트해 주고 싶을 때 사용하는 Hook입니다.

리듀서는 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 액션값을 전달받아 새로운 상태를 반환하는 함수입니다. 새로운 상태를 만들 때는 반드시 불변성을 지켜 주어야 합니다.

import React, { useReducer } from 'react';

function reducer(state, action) {
	// action, type에 따라 다른 작업 수행
	switch (action.type) {
		case 'INCREMENT':
			return { value: state.value + 1 };
		case 'DECREMENT':
			return { value: state.value - 1 };
		default:
			return state;
	}
}

const Counter = () => {
	const [state, dispatch] = useReducer(reducer, { value: 0 });

	return (
		<div>
			<p>
				현재 카운터는 <b>{state.value}</b>
			</p>
			<button onClick={() => dispatch({ type: 'INCREMENT' })}>+1</button>
			<button onClick={() => dispatch({ type: 'DECREMENT' })}>-1</button>
		</div>
	);
};

export default Counter;

useMemo

함수형 컴포넌트 내부에서 발생하는 연산을 최적화 할 수 있습니다.

렌더링 과정에서 특정 값이 변경되었을 때만 연산을 실행하고, 변경되지 않았다면 이전에 연산했던 결과를 다시 사용합니다.

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

const getAverage = (numbers) => {
	console.log('평균값 계산 중...');
	if (numbers.length === 0) return 0;
	const sum = numbers.reduce((a, b) => a + b);
	return sum / numbers.length;
};

const Average = () => {
	const [list, setList] = useState([]);
	const [number, setNumber] = useState('');

	const onChange = (e) => {
		setNumber(e.target.value);
	};

	const onInsert = (e) => {
		const nextList = list.concat(parseInt(number));
		setList(nextList);
		setNumber('');
	};

	// 특정 값이 바뀌었을 때만 연산을 실행합니다.
	const avg = useMemo(() => getAverage(list), [list]);

	return (
		<div>
			<input value={number} onChange={onChange} />
			<button onClick={onInsert}>등록</button>
			<ul>
				{list.map((value, index) => (
					<li key={index}>{value}</li>
				))}
			</ul>
			<div>
				<b>평균값:</b> {avg}
			</div>
		</div>
	);
};

export default Average;

useCallback

useMemo와 상당히 비슷합니다.
주로 렌더링 성능을 최적화해야하는 상황에서 사용합니다.

// useMemo의 예제에서 onChange, onInsert 만 변경
const onChange = useCallback((e) => {
	setNumber(e.target.value);
}, []); // 컴포넌트가 처음 렌더링될 때만 함수 생성

const onInsert = useCallback(() => {
	const nextList = list.concat(parseInt(number));
	setList(nextList);
	setNumber('');
}, [number, list]); // number 혹은 list가 바뀌었을 때만 함수 생성

useRef

함수형 컴포넌트에서 ref를 쉽게 사용할 수 있게 해줍니다.

로컬 변수를 사용해야 할 때도 활용할 수 있습니다.
렌더링과 상관없이 바뀔 수 있는 값을 의미합니다.

(...)
const inputEl = useRef(null);

const onInsert = useCallback(() => {
	(...)
	inputEl.current.focus();
}, [number, list]);

return (
	<div>
		<input value={number} onChnage={onChnage} ref={inputEl} />
	</div>
)

커스텀 Hooks

여러 컴포넌트에서 비슷한 기능을 공유할 경우, Hook으로 작성하여 로직을 재사용할 수 있습니다.

또는 다른 개발자가 만든 Hook도 라이브러리로 설치하여 사용할 수 있습니다.

리액트를 다루는 기술(개정판)을 정독하면서 서술한 내용입니다.