React Hook이란?

스터디2024.08.07

React

React Hook이란

📖 Reference

Copilot 선생님

🤔 React Hook이란 무엇일까?

React Hook은 React 16.8 버전부터 도입된 개념입니다. 이는 함수형 컴포넌트에서도 상태관리와 생명 주기 메서드를 사용할 수 있도록 도와주는 기능입니다.

클래스 컴포넌트에서만 가능했던 기능들을 함수형 컴포넌트에서도 편리하게 사용할 수 있게 해줍니다.
코드를 더욱 간결하고, 컴포넌트 간의 상태 로직을 재사용하기 쉽게 만들어줍니다.

💡 대표적인 React Hook 종류들

1. useState

: React에서 가장 많이 사용되는 Hook입니다. 함수형 컴포넌트에서 상태(State)를 관리할 수 있게 해줍니다. 개발자가 상태값을 변경하고 업데이트를 할 수 있게 도와줍니다.

2. useEffect

: 컴포넌트 렌더링 이후의 특정 작업을 수행할 수 있도록 해줍니다. (데이터 가져오기, DOM 조작 등등)

3. useContext

: React의 Context API를 사용하여 컴포넌트 트리 안에서 전역 상태 공유를 도와줍니다.

4. useCallback

: 함수를 저장하여 성능 최적화를 도와줍니다. 또한 부모 컴포넌트가 다시 렌더링 되어도 함수를 새로 생성하지 않고 재사용할 수 있다는 특징이 있습니다.

5. useMemo

: 특정 값을 저장하여 성능 최적화를 도와줍니다. 계산 비용이 큰 연산을 수행하거나 동일한 값을 여러 번 계산하지 않도록 할 때 사용합니다.

6. useRef

: 컴포넌트에서 DOM 요소를 선택하거나 참조하기 위해 사용합니다. ref 객체를 생성하여 DOM 요소에 접근할 수 있습니다.

7. useLayoutEffect

: useEffect 와 유사하게 작동되는 Hook 입니다. 렌더링 후 동기적으로 실행되기에 주로 DOM 조작과 관련된 작업에 사용합니다.

⚡ React Hook을 사용할 때 주의사항

React는 Hook이 호출되는 순서에 의존합니다. 따라서 Hook은 항상 함수형 컴포넌트의 최상위 계층에서 호출되어야 합니다.

❗ 즉, Hook을 호출할 때는 반드시 최상위 계층에서 호출되어야 합니다.

Hook은 React의 함수 컴포넌트 외부에서 호출할 경우 동작하지 않습니다. Hook은 함수 컴포넌트 내부에서 사용해야 합니다.

❗즉, Hook은 반드시 React 함수 컴포넌트 내에서만 호출해야 합니다.

🤔 커스텀 훅(Custom Hook)이란?

커스텀 훅(Custom Hook)은 개발자가 직접 만든 Hook을 뜻합니다. 함수형 컴포넌트에서 상태 로직(Stateful Logic)을 재사용할 수 있도록 합니다. 또한 커스텀 훅을 사용하면 여러 컴포넌트에서 공통적으로 사용되는 상태 로직을 추출하여 하나의 함수로 만들어 사용할 수 있습니다.

커스텀 Hook은 클래스형 컴포넌트에서 발생했던 보일러 플레이트 코드의 문제와 코드 가독성 저하 문제를 해결할 수 있습니다.
예시로, 커스텀 Hook을 사용하여 Input 관리나 데이터 가져오기(fetch) 등 반복되는 로직을 간단히 구현할 수 있습니다.
커스텀 Hook은 함수로 추출하여 재사용할 수 있게 해주며, 상태 관리와 생명 주기 로직을 효율적으로 관리할 수 있도록 해줍니다.

💡 커스텀 훅의 간단한 예시!

아래 코드는 useLocalStorage 라는 커스텀 훅을 구현합니다.

useLocalStorage는 로컬 스토리지를 사용하여 특정 상태를 저장하고 관리합니다.

import { useState } from 'react';

// useLocalStorage는 로컬 스토리지에 상태를 저장하고 관리하는 커스텀 훅입니다.
function useLocalStorage(key, initialValue){
	// 로컬 스토리지에서 props로 받아온 key에 해당하는 값을 가져옵니다.
	const storedValue = localStorage.getItem(key);
	// 초기값이 없다면 storedValue를, 있다면 initialValue를 사용합니다
	const inital = storedValue ? JSON.parse(storedValue) : initialValue;
	// useState를 사용하여 상태 업데이트 func를 생성합니다.
	const [value, setValue] = useState(initial);
	
	// 상태가 업데이트될 때마다 로컬 스토리지에 값을 저장합니다.
	const updateValue = (newValue) => {
		setValue(newValue);
		localStorgae.setItem(key, JSON.stringify(newValue));
	};
	return [value, updateValue];
}

// 위와 같이 생성한 커스텀 훅을 아래와 같이 사용할 수 있습니다.
// 아래 컴포넌트는 Count를 클릭 시 1씩 증가하는 기능을 수행합니다.
function DaeHyeonComponent(){
	// count 상태 ('count'라는 키로 로컬 스토리지에 상태 저장)
	const [count, setCount] = useLocalStorage('count', 0);
	
	return(
		<div>
			<p>Count : {count}</p>
			<button onClick={() => setCount(count + 1)}>Increment</button>
		</div>
	);
}

💡 최종 정리

위 예시와 같이 다양한 커스텀 훅을 만들어 활용하면 반복되는 로직을 추상화하여 코드를 더 간결하게 작성할 수 있으며 생산성을 향상시킬 수 있습니다.