React는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리입니다. 최근에는 React Hooks라는 기능을 도입하여 함수형 컴포넌트에서도 상태 관리 및 부수 효과를 쉽게 다룰 수 있게 되었습니다. 이 글에서는 React Hooks의 기본부터 고급 활용까지 알아보겠습니다.
React Hooks란?
React Hooks는 React 16.8 버전에서 소개된 새로운 기능으로, 클래스 컴포넌트 없이 상태 값과 React의 생명주기 기능을 사용할 수 있게 해줍니다. 이로 인해 코드의 재사용성과 구성이 훨씬 쉬워졌습니다.
useState
useState는 가장 기본적인 Hook으로, 함수형 컴포넌트 내에서 상태 관리를 가능하게 합니다.
const [count, setCount] = useState(0);이 코드는 컴포넌트에 상태 값을 추가하고, 이 값을 업데이트하는 함수를 제공합니다.
useEffect
useEffect는 컴포넌트가 렌더링될 때마다 특정 작업을 수행할 수 있게 해주는 Hook입니다. 데이터 fetching, 구독 설정 및 해제 등의 부수 효과를 처리할 때 유용합니다.
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]);
useContext
useContext는 React에서 제공하는 Context API의 일환으로, React 애플리케이션 내에서 전역적인 데이터 공유를 가능하게 하는 Hook입니다. 이 Hook을 사용함으로써 개발자들은 복잡한 컴포넌트 트리를 거치지 않고도 간편하게 데이터를 전달할 수 있게 됩니다. useContext의 주요 장점 중 하나는 컴포넌트 간의 prop 드릴링 없이도 상태 값을 공유할 수 있다는 점입니다. 이는 개발 과정을 단순화시키고, 코드의 가독성을 향상시키는 데 크게 기여합니다.
useContext를 사용하기 위한 첫 번째 단계는 Context를 생성하는 것입니다. Context는 React에 내장된 createContext 함수를 사용하여 생성할 수 있습니다. 생성된 Context는 공유하고자 하는 데이터의 구조를 정의하는 데 사용됩니다. 예를 들어, 테마 정보를 전역적으로 관리하고자 할 때, 다음과 같이 ThemeContext를 생성할 수 있습니다.
import React, { createContext } from 'react';
// 테마 정보를 담을 Context 생성
const ThemeContext = createContext();
생성된 Context를 실제로 사용하기 위해서는, 해당 Context의 Provider 컴포넌트를 사용하여 데이터를 전달해야 합니다. Provider 컴포넌트는 Context를 사용할 컴포넌트 트리의 최상위에서 데이터를 전달하는 역할을 합니다. 예를 들어, 애플리케이션의 최상위 컴포넌트인 App에서 ThemeContext.Provider를 사용하여 테마 정보를 하위 컴포넌트로 전달하는 방식은 다음과 같습니다.
function App() {
return (
<ThemeContext.Provider value={{ theme: 'dark' }}>
<Toolbar />
</ThemeContext.Provider>
);
}이제 Toolbar 컴포넌트와 같은 하위 컴포넌트에서는 useContext Hook을 통해 전달된 데이터를 쉽게 접근하고 사용할 수 있습니다. useContext(ThemeContext)를 호출함으로써, ThemeContext로부터 전달된 theme 값을 직접적으로 받아올 수 있으며, 이 값을 활용하여 동적으로 스타일을 조정할 수 있습니다.
function Toolbar() {
// Context로부터 theme 값을 받아옴
const { theme } = useContext(ThemeContext);
return (
<div style={{ background: theme === 'dark' ? 'black' : 'white' }}>
<p style={{ color: theme === 'dark' ? 'white' : 'black' }}>안녕하세요, 현재 테마는 {theme}입니다.</p>
</div>
);
}이러한 방식으로 useContext를 활용하면, 테마 정보와 같은 전역 상태를 효율적으로 관리하며, 컴포넌트 간의 데이터 전달을 간소화할 수 있습니다. 개발자들은 이를 통해 보다 유지보수가 용이하고 가독성이 높은 코드를 작성할 수 있게 됩니다.
useReducer
useReducer는 React Hook 중 하나로, 복잡한 컴포넌트의 상태 로직을 관리할 때 useState보다 더 선호되는 방식입니다. 특히 상태 업데이트 로직을 컴포넌트 바깥으로 분리할 수 있어, 테스트가 용이하고 로직의 재사용성을 높일 수 있습니다. 아래는 useReducer를 사용한 간단한 카운터 예제입니다.
먼저, 상태 업데이트 로직을 담당하는 리듀서 함수를 정의합니다. 리듀서 함수는 현재 상태와 액션 객체를 매개변수로 받아, 새 상태를 반환합니다.
function counterReducer(state, action) {
switch (action.type) {
case 'increment':
return {count: state.count + 1};
case 'decrement':
return {count: state.count - 1};
default:
throw new Error();
}
}다음으로, useReducer Hook을 사용하는 컴포넌트를 정의합니다. useReducer는 리듀서 함수와 초기 상태를 매개변수로 받아, 현재 상태와 상태를 업데이트하는 dispatch 함수를 반환합니다.
import React, { useReducer } from 'react';
function Counter() {
const [state, dispatch] = useReducer(counterReducer, {count: 0});
return (
<>
Count: {state.count}
<button onClick={() => dispatch({type: 'decrement'})}>-</button>
<button onClick={() => dispatch({type: 'increment'})}>+</button>
</>
);
}위 예제에서 Counter 컴포넌트는 useReducer를 사용하여 counterReducer 함수와 초기 상태 {count: 0}을 연결합니다. 이 컴포넌트 내에서 버튼을 클릭하면, 해당 버튼의 onClick 이벤트 핸들러가 dispatch 함수를 호출하여 액션을 발행합니다. 액션은 type 필드를 가지며, 이는 리듀서 함수에서 어떤 상태 업데이트를 할지 결정하는 데 사용됩니다.
이 예시에서 볼 수 있듯, useReducer를 사용하면 상태 업데이트 로직을 컴포넌트 외부에 정의할 수 있어 코드의 구조가 더 명확해지고, 로직의 재사용성이 향상됩니다. 복잡한 상태 관리 상황이나 여러 하위 값이 포함된 상태를 다뤄야 할 때 useReducer는 매우 유용합니다.
useCallback
useCallback은 React에서 제공하는 Hook 중 하나로, 메모이제이션된 콜백 함수를 반환합니다. 이는 성능 최적화를 위해 주로 사용되며, 특히 컴포넌트가 리렌더링될 때마다 동일한 함수를 새로 생성하지 않고 재사용할 수 있게 해줍니다. 이는 불필요한 렌더링을 방지하고, 자식 컴포넌트에 props로 함수를 전달할 때 유용합니다. 아래는 useCallback의 기본적인 사용 예시입니다.
먼저, 두 숫자를 더하는 간단한 함수와 이 함수를 사용하는 컴포넌트를 생각해봅시다.
import React, { useState, useCallback } from 'react';
function Adder() {
const [number1, setNumber1] = useState(0);
const [number2, setNumber2] = useState(0);
const [result, setResult] = useState(0);
// useCallback을 사용하여 add 함수 메모이제이션
const add = useCallback(() => {
setResult(number1 + number2);
}, [number1, number2]); // number1 또는 number2가 바뀔 때만 함수를 새로 생성
return (
<div>
<input
type="number"
value={number1}
onChange={(e) => setNumber1(+e.target.value)}
/>
<input
type="number"
value={number2}
onChange={(e) => setNumber2(+e.target.value)}
/>
<button onClick={add}>더하기</button>
<p>결과: {result}</p>
</div>
);
}이 예제에서는 두 개의 입력 상자에서 숫자를 받아서, "더하기" 버튼을 클릭하면 결과를 표시합니다. add 함수는 number1과 number2의 합을 계산하여 setResult를 통해 result 상태를 업데이트합니다. useCallback을 사용함으로써, number1이나 number2가 변경될 때만 add 함수가 새로 생성됩니다. 이는 number1과 number2가 변경되지 않는 한, 리렌더링될 때마다 동일한 add 함수를 재사용할 수 있게 해줍니다. 그 결과, 성능이 최적화됩니다.
useCallback은 특히 자식 컴포넌트에 함수를 props로 전달할 때 유용합니다. 자식 컴포넌트가 React.memo나 shouldComponentUpdate를 사용하여 불필요한 렌더링을 방지하는 경우, 부모 컴포넌트에서 함수를 새로 생성하지 않고 재사용함으로써 자식 컴포넌트의 불필요한 리렌더링을 예방할 수 있기 때문입니다.
useMemo
useMemo는 React에서 제공하는 Hook 중 하나로, 메모이제이션된 값을 반환합니다. 이는 계산 비용이 많이 드는 연산의 결과값을 저장해두었다가, 의존성 배열 내의 값이 변경될 때만 연산을 다시 실행하여 성능을 최적화하는 데 사용됩니다.
아래는 useMemo를 사용한 예시입니다. 이 예제에서는 사용자가 입력한 숫자 목록의 평균값을 계산하는 간단한 컴포넌트를 만들어보겠습니다.
import React, { useState, useMemo } from 'react';
function AverageCalculator() {
const [numbers, setNumbers] = useState([]);
const [number, setNumber] = useState('');
// 숫자를 추가하는 함수
const addNumber = () => {
if (number) {
setNumbers([...numbers, parseFloat(number)]);
setNumber(''); // 입력 필드 초기화
}
};
// numbers 배열의 변화에 따라 평균값을 계산하는 로직
// useMemo를 사용하여 numbers 배열이 변경될 때만 평균값을 다시 계산
const average = useMemo(() => {
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
return numbers.length ? sum / numbers.length : 0;
}, [numbers]);
return (
<div>
<input
type="text"
value={number}
onChange={(e) => setNumber(e.target.value)}
/>
<button onClick={addNumber}>숫자 추가</button>
<ul>
{numbers.map((num, index) => (
<li key={index}>{num}</li>
))}
</ul>
<div>평균값: {average}</div>
</div>
);
}이 컴포넌트에서는 사용자가 입력한 숫자를 numbers 배열에 추가하고, 이 배열의 평균값을 계산합니다. 평균값을 계산하는 것은 비교적 간단한 연산이지만, 배열의 크기가 매우 크거나 더 복잡한 연산을 수행하는 경우에는 이 연산이 성능에 영향을 미칠 수 있습니다. 이런 경우, useMemo를 사용하여 numbers 배열이 변경될 때만 평균값을 다시 계산하도록 함으로써, 불필요한 연산을 방지하고 성능을 최적화할 수 있습니다.
위의 예제는 useMemo를 사용하여 계산 비용이 높은 연산의 결과값을 메모이제이션하는 방법을 보여줍니다. 이런 방식으로 useMemo는 컴포넌트의 성능을 개선하는 데 도움을 줍니다.
React Hooks : 커스텀 Hooks
커스텀 Hooks를 만들어서 반복되는 로직을 재사용할 수 있습니다. 이는 코드의 가독성과 재사용성을 향상시키는 좋은 방법입니다.
특정 로직을 재사용 가능한 커스텀 훅으로 만드는 예시입니다. 여기서는 윈도우의 너비를 추적하는 훅을 만들어보겠습니다.
import React, { useState, useEffect } from 'react';
function useWindowWidth() {
const [width, setWidth] = useState(window.innerWidth);
useEffect(() => {
const handleResize = () => setWidth(window.innerWidth);
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return width;
}
function App() {
const width = useWindowWidth();
return (
<div>
<p>{`현재 창의 너비는 ${width}px입니다.`}</p>
</div>
);
}커스텀 Hooks를 만들 때에는 몇 가지 고려해야할 사항들이 있습니다.
1. 명확한 목적과 재사용성
커스텀 Hook은 특정한 작업을 수행하기 위해 만들어집니다. 그렇기 때문에 만들고자 하는 Hook이 재사용 가능하며, 특정한 목적을 명확하게 해결할 수 있도록 설계해야 합니다. 예를 들어, 데이터를 가져오는 로직, 상태 관리 로직 등을 재사용하기 쉽도록 커스텀 Hook으로 분리할 수 있습니다.
2. 의존성 관리
useEffect와 같은 Hook을 사용할 때, 의존성 배열(dependency array)를 정확하게 관리하는 것이 중요합니다. 커스텀 Hook 내부에서 외부 상태나 속성에 의존할 경우, 이를 의존성 배열에 포함시켜야 합니다. 그렇지 않으면 예상치 못한 버그가 발생할 수 있습니다.
3. 네이밍 규칙
커스텀 Hook은 use로 시작하는 이름을 가지도록 규칙이 있습니다. 이는 Hook이라는 것을 명확하게 하며, 리액트가 내부적으로 Hook을 올바르게 인식할 수 있도록 합니다. 예를 들어, useFetch, useLocalStorage 등의 이름을 사용할 수 있습니다.
4. 상태와 로직의 분리
커스텀 Hook을 설계할 때는 가능한 한, 상태와 로직을 분리하는 것이 좋습니다. 이를 통해 Hook이 더 유연해지고, 다양한 상황에서 재사용하기 쉬워집니다.
5. 테스트 용이성
커스텀 Hook을 만들 때는 테스트를 쉽게 수행할 수 있도록 설계하는 것이 중요합니다. Hook의 로직을 단순하고 명확하게 유지하여, 단위 테스트를 통해 쉽게 검증할 수 있도록 해야 합니다.
6. 성능 최적화
Hook 내에서 처리하는 로직이 복잡하거나, 리소스를 많이 사용하는 경우에는 성능 최적화를 고려해야 합니다. 예를 들어, useMemo, useCallback을 사용하여 필요한 경우에만 연산을 수행하도록 최적화할 수 있습니다.
7. 문서화
커스텀 Hook을 만든 후에는 사용 방법과 파라미터, 반환값 등을 명확하게 문서화하는 것이 좋습니다. 이를 통해 다른 개발자들이 Hook을 더 쉽게 이해하고 사용할 수 있습니다.
커스텀 Hook을 만들 때 이러한 고려사항들을 염두에 두면, 재사용 가능하고 유지 보수가 쉬운 코드를 작성할 수 있습니다.
React Hooks 결론
React Hooks는 React 프로그래밍 패러다임에 혁신을 가져온 기술입니다. 이는 특히 함수형 컴포넌트의 사용에 있어서 상태 관리와 사이드 이펙트 처리를 용이하게 하여, 이전에는 클래스 컴포넌트에서만 가능했던 다양한 기능들을 함수형 컴포넌트에서도 구현할 수 있도록 했습니다. 이는 개발자들이 보다 선언적이고 간결한 코드로 컴포넌트를 작성할 수 있게 해, 코드의 재사용성을 높이고, 프로젝트의 구조를 더욱 명확하게 만들어 줍니다.
기본 제공되는 Hooks인 useState, useEffect, useContext 등을 통해, 개발자들은 상태 관리를 더욱 직관적으로 할 수 있으며, 생명주기 메소드를 대체하는 로직을 구현하고, 전역 상태 관리의 복잡성을 줄일 수 있습니다. 더 나아가, useReducer를 사용하면 상태 업데이트 로직을 외부로 분리시켜 관리할 수 있으며, useMemo와 useCallback은 컴포넌트의 성능 최적화를 돕습니다. 이러한 추가 Hooks의 사용은 복잡한 컴포넌트의 로직을 더욱 효율적으로 관리하게 만들어, 큰 규모의 어플리케이션에서도 원활한 성능을 유지할 수 있게 합니다.
사용자 정의 Hooks의 생성은 코드를 모듈화하고 재사용하는 데 있어 매우 중요한 도구입니다. 이를 통해 개발자들은 자신만의 Hooks를 만들어 공통적인 로직을 쉽게 재사용할 수 있으며, 이는 큰 프로젝트에서 코드의 일관성을 유지하고 유지보수를 용이하게 하는 데 크게 기여합니다. 그러나, Hooks를 사용할 때는 React가 제시하는 규칙을 준수해야 하며, 특히 복잡한 상태 로직을 관리할 때는 적절한 구조와 패턴의 적용이 필수적입니다.
결론적으로, React Hooks는 함수형 컴포넌트에서의 상태 관리와 사이드 이펙트 처리를 혁신적으로 개선하여, React 개발을 더욱 명료하고 효율적으로 만드는 중요한 기능입니다. 이를 통해 함수형 컴포넌트의 가능성이 크게 확장되었으며, React 생태계 전반에 걸쳐 긍정적인 영향을 미쳤습니다.