Hooks

hooks

함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공한다.

 

useState

가장 기본적인 hook이며, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있다. (사용법은 이미 익혔으니 생략)

 

useEffect

렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 hook이다. componentDidMount와 componentDidUpdate를 합친 형태로 보아도 무방하다.

	import React, { useState, useEffect } from 'react';
	const Info = () => {
	const [name, setName] = useState('');
	const [nickname, setNickname] = useState('');
	useEffect(() => {
	console.log('rendering complete');
	console.log({
	name,
	nickname
	});
	});
	const onChangeName = e => {
	setName(e.target.value);
	}
	const onChangeNickname = e => {
	setNickname(e.target.value);
	}
	return (
	<div>
	<div>
	<input value={name} onChange={onChangeName}/>
	<input value={nickname} onChange={onChangeNickname}/>
	</div>
	<div>
	<div>
	<b>name : </b>{name}
	</div>
	<div>
	<b>nickname : </b>{nickname}
	</div>
	</div>
	</div>
	);
	};
	export default Info;

view raw ex.js hosted with ❤ by GitHub

만약 마운트 될때만 실행하고 싶다면 함수의 두 번째 파라미터로 비어 있는 배열을 넣어 주면 된다.

useEffect(() => {~~}, []);

특정 값이 업데이트될 때만 실행하고 싶다면 두 번째 파라미터에 검사하고 싶은 값을 넣어준다.

useEffect(() => {~~}, [name]);

언마운트되기 전이나 업데이트되기 직전에 어떠한 작업을 수행하고 싶다면 뒷부분에 cleanup 함수를 반환해준다.

useEffect(() => {~~ return () => { ~~~ } });

 

useReducer

useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해 주고 싶을 때 사용하는 Hook이다. 이 부분은 리덕스를 배울 때 자세히 알아보도록 하자.

 

useMemo

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

	import React, { useState, useMemo } from 'react';
	const getAverage = numbers => {
	console.log('calculating avg value');
	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('');
	};
	return (
	<div>
	<input value={number} onChange={onChange}/>
	<button onClick={onInsert}>enroll</button>
	<ul>
	{list.map((value, index) => (
	<li key={index}>{value}</li>
	))}
	</ul>
	<div>
	<b>avg value : </b>{getAverage(list)}
	</div>
	</div>
	)
	}
	export default Average;

view raw ex.js hosted with ❤ by GitHub

이 코드의 경우 input 내용이 수정될 때도 평균값을 계산할 필요가 없는데 getAverage 함수가 호출된다. 이런 문제를 useMemo hook을 사용해 최적화할 수 있다. 렌더링하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하도록 하는 방식이다.

	import React, { useState, useMemo } from 'react';
	const getAverage = numbers => {
	console.log('calculating avg value');
	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('');
	};
	// 멤버 변수에 useMemo 사용
	const avg = useMemo(() => getAverage(list), [list]);
	return (
	<div>
	<input value={number} onChange={onChange}/>
	<button onClick={onInsert}>enroll</button>
	<ul>
	{list.map((value, index) => (
	<li key={index}>{value}</li>
	))}
	</ul>
	<div>
	{/* 여기서 함수를 호출하지 않고 useMemo를 정의한 멤버 변수 사용 */}
	<b>avg value : </b>{avg}
	</div>
	</div>
	)
	}
	export default Average;

view raw ex.js hosted with ❤ by GitHub

 

useCallback

useMemo와 비슷한 역할을 하는데 이벤트 핸들러 함수를 필요할 때만 생성할 수 있다. 

	import React, { useState, useMemo, useCallback } from 'react';
	const getAverage = numbers => {
	console.log('calculating avg value');
	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 = useCallback(e => {
	setNumber(e.target.value);
	}, []);
	// number 혹은 list가 바뀌었을 때만 함수 생성
	const onInsert = useCallback(e => {
	const nextList = list.concat(parseInt(number));
	setList(nextList);
	setNumber('');
	}, [number, list]);
	const avg = useMemo(() => getAverage(list), [list]);
	return (
	<div>
	<input value={number} onChange={onChange}/>
	<button onClick={onInsert}>enroll</button>
	<ul>
	{list.map((value, index) => (
	<li key={index}>{value}</li>
	))}
	</ul>
	<div>
	{/* 여기서 함수를 호출하지 않고 useMemo를 정의한 멤버 변수 사용 */}
	<b>avg value : </b>{avg}
	</div>
	</div>
	)
	}
	export default Average;

view raw ex.js hosted with ❤ by GitHub

 

useRef

ref를 쉽게 사용할 수 있도록 해준다. enroll 버튼을 눌렀을 때 포커스가 input 쪽으로 넘어가도록 코드를 작성해보자.

	import React, { useState, useMemo, useCallback, useRef } from 'react';
	const getAverage = numbers => {
	console.log('calculating avg value');
	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 inputEl = useRef(null);
	const onChange = useCallback(e => {
	setNumber(e.target.value);
	}, []);
	const onInsert = useCallback(e => {
	const nextList = list.concat(parseInt(number));
	setList(nextList);
	setNumber('');
	inputEl.current.focus();
	}, [number, list]);
	const avg = useMemo(() => getAverage(list), [list]);
	return (
	<div>
	<input value={number} onChange={onChange} ref={inputEl}/>
	<button onClick={onInsert}>enroll</button>
	<ul>
	{list.map((value, index) => (
	<li key={index}>{value}</li>
	))}
	</ul>
	<div>
	<b>avg value : </b>{avg}
	</div>
	</div>
	)
	}
	export default Average;

view raw ex.js hosted with ❤ by GitHub