React Hooks란? Custom 쉽게 만드는 방법과 예제
어떻게 적어야 가독성이 좋아질까 고민하며 새로운 방식으로 써보기위해 말투와 양식을 바꾸어보고있습니다.
읽기 불편하시거나 피드백사항이 있으시다면 댓글이나 메일로 주시면 정말 감사합니다!
갑자기 react-query와 Hooks를 쓰라고요..?
일단 훅부터 해볼게요..
Hooks가 뭔데?
함수형 컴포넌트에서 React 기능(state, lifecycle 등)을 쓰게 해주는 함수들이야.
원래는 클래스 컴포넌트(class App extends React.Component)에서만 상태 관리하고 생명주기 쓸 수 있었는데,
함수형 컴포넌트에서도 편하게 하라고 나온 게 Hooks야.
가장 중요한 기본 Hooks 3개
| 이름 | 설명 | 비고 |
| useState | 값을 저장하고 바꾼다 | this.state 알지? |
| useEffect | 값이 바뀌거나 처음 렌더링될 때 어떠한 일을 한다. | componentDidMount componentDidupdate 와 같은 개념이야 |
| useRef | 변하지 않는 값을 기억하거나 DOM을 직접 잡는다. | Ref는 말그대로 특정 컴포넌트(DOM), 값 들을 직접 가지고있는 친구야 |
| UseCallback, UseMemo.. 등도 | ||
그래서 어떻게 쓰는데?
useState
useState(초기값)을 주고 [변수, 수정함수] 를 받아
그 다음 수정할 땐 수정함수(변경될 값) 을 호출하면돼
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>{count}번 클릭함</p>
<button onClick={() => setCount(count + 1)}>클릭</button>
</div>
);
}
useEffect
useEffect(콜백, [감시할 값?]) 인데 이 감시할 값 (지정한 값)이 변경될 떄마다 실행이 돼
비워두면 컴포넌트 생성 최초에만 호출돼
import { useEffect, useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log(`count가 ${count}로 바뀜`);
}, [count]); // count가 바뀔 때마다 실행
return <button onClick={() => setCount(count + 1)}>클릭</button>;
}
useRef
useRef()로 특정 DOM이나 변수를 기억해둘 수 있어.
주로 포커스 이동, 스크롤 조작 등에 많이 쓰고 특수하게 클로져 이슈등에도 활용하는데 이건 나중에 알아보자
import { useRef } from 'react';
function FocusInput() {
const inputRef = useRef<HTMLInputElement>(null);
const focus = () => {
inputRef.current?.focus(); // DOM 직접 제어
};
return (
<>
<input ref={inputRef} />
<button onClick={focus}>포커스 이동</button>
</>
);
}
간단히 3가지를 한줄로 요약하면
| Hooks | 한 줄 설명 |
| useState | 컴포넌트 안에 값을 저장하고 싶을 때 |
| useEffect | 어떤 값이 변할 때 부가 작업 하고 싶을 때 |
| useRef | 리렌더링 없이 무언가 기억하거나 DOM 조작할 때 |
근데 난 커스텀 Hooks를 쓰러 왔는데..
커스텀 Hooks
커스텀 훅(Custom Hook) 은 쉽게 말하면
"여러 컴포넌트에서 반복해서 쓰는 Hooks 로직을 함수처럼 뽑아내서 재사용 하는 것"
커스텀 훅스를 왜 만들까?
1. 컴포넌트에 useState, useEffect 같은 로직이 복잡하게 얽히면 가독성 나빠짐
2. 비슷한 기능을 다른 컴포넌트에서도 쓰고 싶을 때
3. 상태 관리 로직을 깔끔하게 분리하고 싶을 때
커스텀 훅 만드는 방법
1. 이름은 반드시 use로 시작해야 한다. (useMyCustomHook 처럼)
2. 안에서 다른 Hook들 (useState, useEffect, useQuery 등)을 쓸 수 있다.
3. 필요한 데이터나 함수를 return 해준다.
커스텀 훅 예시
(변경전) 기존 일반 컴포넌트에 때려박는 방식
이렇게 쓰면 버튼이 두 번 눌릴 때 알람 뜨지.
근데 이 로직을 다른 컴포넌트에서도 쓰고 싶으면 복붙해야 돼
function Button() {
const [clickCount, setClickCount] = useState(0);
useEffect(() => {
if (clickCount === 2) {
alert('더블 클릭!');
setClickCount(0);
}
}, [clickCount]);
const handleClick = () => {
setClickCount((prev) => prev + 1);
};
return <button onClick={handleClick}>버튼</button>;
}
(변경후) 똑같은 걸 커스텀 훅으로 분리
//useDoubleClick.ts
import { useState, useEffect } from 'react';
export function useDoubleClick(onDoubleClick: () => void) {
const [clickCount, setClickCount] = useState(0);
useEffect(() => {
if (clickCount === 2) {
onDoubleClick();
setClickCount(0);
}
}, [clickCount, onDoubleClick]);
const handleClick = () => {
setClickCount((prev) => prev + 1);
};
return {
handleClick,
};
}
컴포넌트에서는 이렇게 사용
컴포넌트는 훨씬 깔끔해지고 더블클릭 로직은 필요할 때마다 가져다 쓸 수 있어.
import { useDoubleClick } from '@/hooks/useDoubleClick';
function Button() {
const { handleClick } = useDoubleClick(() => {
alert('더블 클릭!');
});
return <button onClick={handleClick}>버튼</button>;
}커스텀 훅 만들 때 패턴
| 단계 | 설명 |
| 1. use로 시작하는 함수 만들기 | 이름은 use로 시작! (useDoubleClick) |
| 2. 내부에 필요한 useState, useEffect 사용 | |
| 3. 외부에서 사용할 값이나 함수를 return | |
| 4. 필요한 인자(parameter)를 받아서 유연하게 처리 |
커스텀 훅 주의사항
1. 항상 이름이 use로 시작해야 React가 "아 얘는 Hook이구나" 인식해
2. Hook 안에는 조건문으로 useState, useEffect 쓰지 말기 (항상 위에서부터 흐름 따라 실행돼야 해)
다음엔 React Query를 이용해서 API를 호출한다음 해당 데이터를 가공하는 글을 써볼게
어떻게 적어야 가독성이 좋아질까 고민하며 새로운 방식으로 써보기위해 말투와 양식을 바꾸어보았습니다.
읽기 불편하시거나 피드백사항이 있으시다면 댓글이나 메일로 주시면 정말 감사합니다!
읽어주셔서 감사합니다!