10. React Hooks Api

오늘은 React Hooks Api 에 대해 알아보겠습니다.

Functional Component를 제어하는데 사용할 수 있습니다.

자주 쓰이는 종류로는

• useEffect : Component의 생명주기를 설정할 수 있는 Hooks입니다.
• useState : React State를 정의할 수 있는 Hooks입니다.
• useCallback: React에 memoization으로 저장된 콜백을 반환합니다.
• useMemo: React에 memoization으로 저장된 값을 반환합니다.
• useRef: DOM의 ref 객체를 반환합니다.

이렇게 있습니다.

useEffect

이 Hooks 를 사용하면 함수형 Component 에서 side effect를 수행할 수 있습니다.

const Test = () => {
	useEffect(()=> {
		// 컴포넌트 첫 호출 시
	}, [])
	return <></>
}

useEffect는 저번 생명주기를 참조하시면 될 것 같습니다.

useState

이 Hooks를 사용하시면 React의 State를 얻을 수 있습니다.

const Test = () => {
	const [name, setName] = useState('name');
	return <>{name}</>
}

이 것 또한 저번 State에서 다뤘던 내용이니, 참조하시면 될 것 같습니다.

useMemo

성능 최적화를 위하여 연산된 값을 재사용할 때 씁니다.

Memo는 memoized를 의미합니다.

props나 값이 교체될 때, 컴포넌트 전체의 리렌더링을 막기 위해, useState와 함께 함수형 업데이트를 할 수 있습니다.

const Test = (props) => {
	const [name, setName] = useState('name');

	useMemo (()=> { 
		setName(props.name)
	}, [props.name])

	return <>{name}</>
}

useCallback

useMemo와 비슷합니다. useMemo는 값을 재사용하지만, useCallback 는 함수를 재사용합니다.

const Test = () => {
	const [name, setName] = useState('name');
	const nameChange = useCallback( e => {
		console.log(name);
	}, [name])
	return <>{name}</>
}

이 함수를 export 하여 커스텀 Hooks로 쓰는 경우도 많습니다.

useRef

const Test = () => {
	const ref = useRef()
	return <div ref = {ref}></div>
}

ref를 통해, ref를 넣은 DOM의 정보를 가져올 수 있습니다.

ref.current. 을 통해 접근하거나, ref를 함수의 인자 값으로 추가할 수도 있습니다.

이상 자주 사용할 React Hooks Api에 대해 알아보았습니다.