매일 쓰는 핵심 React Hooks 7가지
useState -- 꼭 필요한 기본 훅
함수형 컴포넌트에서 상태를 쉽게 관리하려면 useState가 최고입니다. 복잡하게 고민할 필요 없이, 한 컴포넌트의 값을 바꾸는 데 직관적이고 안전하죠. 단, 너무 많은 상태를 한 컴포넌트에 몰아넣기보다는 필요한 만큼 쪼개서 사용하는 게 좋습니다.
const [count, setCount] = useState(0);useEffect -- 사이드 이펙트 관리자
API 호출, DOM 조작, 이벤트 구독 등 컴포넌트의 부수작용은 useEffect가 담당합니다. 잘 쓰면 파워풀하지만, 남발하면 성능 저하와 관리 문제를 일으킬 수 있어요. 상태 동기화를 남용하지 말고, 정말 필요한 경우에만 사용하세요.
useEffect(() => {
document.title = `Count: ${count}`;
}, [count]);useContext -- 데이터 전달의 해결사
여러 컴포넌트에서 공통으로 써야 하는 테마나 인증 정보 등에 적합한 훅입니다. props로 계속 값을 넘기는 번거로움을 줄여주죠. 단, 복잡한 상태 관리 용도로 오용하지 않는 것이 좋습니다.
const ThemeContext = createContext(light);
const theme = useContext(ThemeContext);useMemo -- 계산 최적화 도우미
매번 렌더링할 때마다 비용이 큰 계산이 반복된다면 useMemo를 써서 메모이제이션이 가능합니다. 필요할 때만 계산하고, 성능을 지킬 수 있죠. 단순한 연산에는 불필요하게 사용하지 않는 게 현명합니다.
const sortedList = useMemo(() => sortList(list), [list]);useCallback -- 함수 재생성 방지
컴포넌트 자식에게 함수를 props로 전달할 때 useCallback을 써서 같은 함수를 계속 재사용할 수 있습니다. 이로 인해 불필요한 재렌더를 막고, 성능을 개선할 수 있죠. 단, 꼭 필요할 때만 사용하세요.
const handleClick = useCallback(() => {
console.log(clicked);
}, []);useRef -- DOM과 값 추적의 비밀병기
useRef를 쓰면 DOM 요소 직접 접근이나 이전 값을 저장하는 데 매우 편리합니다. 값이 바뀌어도 컴포넌트가 리렌더링되지 않으니, 임시 데이터나 DOM 컨트롤에 적합합니다. 상태 대용으로 남용해서는 안 됩니다.
const inputRef = useRef(null);
<input ref={inputRef} />;useReducer -- 복잡한 상태 관리의 해결책
상태가 여러 타입으로 얽히고설킨다면 useReducer가 구조적으로 해결해줍니다. 하나의 함수에서 여러 액션을 관리할 수 있어, 폼이나 다양한 토글을 다룰 때 유용하죠. 논리 구조가 아주 복잡하다면 Redux 등 외부 라이브러리도 고려하세요.
function reducer(state, action) {
switch (action.type) {
case increment:
return { count: state.count + 1 };
default:
return state;
}
}
const [state, dispatch] = useReducer(reducer, { count: 0 });이 7가지 훅에 집중하라
유명하거나 복잡한 커스텀 훅에 휘둘리지 말고, 위 7가지 기본 훅부터 확실히 익히세요. 올바르게 활용하면 코드 품질과 유지보수성이 확실히 올라갑니다. React를 잘 쓰고 싶다면, 기본부터 제대로 다져야 합니다.