Hook이란?
컴포넌트에서 데이터를 관리(State)하고 데이터가 변경될 때 상호작용(Effect)을 하기 위해 사용한다.
대표적인 React의 Hook으로는 useState,useEffect,useCallback,useRef, useMemo 등이 있다.
Hook의 등장 배경
기존에는 컴포넌트 내에서 State와 생명주기를 관리하기 위해 반드시 클래스 컴포넌트(Class Componenet)를 사용해야 했지만 개발자가 느끼기에 다소 복잡한 점이 있어 이를 보완하고 함수 컴포넌트(Function Componenet)에서 클래스 컴포넌트의 기능을 구현하기 위해 React 16.8버전에 추가된 것이 Hook이다.
❗ 유의사항
- Hook은 React함수(컴포넌트)내에서만 사용이 가능하다.
- Hook의 이름은 반드시 'use'로 시작해야 한다.
- 최상위 Level에서만 Hook을 호출 할 수 있다.(if문, for문 안 쪽 또는 콜백함수 내에서 호출하면 안된다.)
📌 State Hook
const App = () => {
const [state, setState] = useState(초기값)
}- useState는 컴포넌트 내 동적인 데이터를 관리할 수 있는 Hook이다.
- 최초에 useState가 호출될 때 초기값으로 설정되며 이후 재렌더링이 될 때는 무시된다.
- state는 읽기 전용이므로 직접 수정해서는 안된다.
- state를 변경하기 위해서는 setState를 이용한다.
- state가 변경되면 자동으로 컴포넌트가 재렌더링된다.
예제
const App = () => {
const [title, setTitle] = useState('')
setTitle('Hello') // state를 변경할 값을 직접 입력
// 또는
setTitle((current) => { // 현재 값을 매개변수로 받는 함수 선언
return current + 'React'; // return 값이 state에 반영됨
}
}- state를 변경하기 위해서는 setState 함수에 직접 값을 입력하거나
- 현재 값을 매개변수로 받는 함수를 전달한다. 이때 함수에서 return되는 값이 state에 반영된다.
📌 Effect Hook
const App = () => {
useEffect(EffectCallback, Deps?)
}-
Effect Hook을 사용하면 함수 컴포넌트에서 side effect를 수행할 수 있다.
-
컴포넌트가 최초로 렌더링될 때, 지정한 state나 prop이 변경될 때마다 이펙트 콜백 함수가 노출된다.
-
Deps : 변경을 감지할 변수들의 집합(배열)
-
EffectCallback : Deps에 지정된 변수가 변경될 때 실행할 함수
예제
const App = () => {
const [count, setCount] = useState(0)
useEffect(()=>{
console.log(`버튼을 ${count}회 클릭했습니다.`
}, [count])
return (
<div>
<button onClick={() => setCount(count + 1)}>
클릭
</button>
</div>
)
}countstate에 변경이 일어날 때마다 useEffect 함수부분이 실행된다.
const App = () => {
useEffect(() => {
const interValid = setInterval(() => {
console.log("안녕하세요");
}, 1000);
return () => {
clearInterval(intervalid);
};
}, []);
};- useEffect의 이펙트 함수 내에서 다른 함수를 return할 경우 state가 변경되어 컴포넌트가 다시 렌더링되기 전과 컴포넌트가 없어질 때(Destory) 호출할 함수를 지정하게 된다.
📌 useMemo
const App = () => {
const [firstName, setFirstName] = useState("나나");
const [lastName, setLastName] = useSate("바");
const fullName = useMemo(() => {
return `${firstName} ${lastName}`;
}, [firstName, lastName]);
// 계산된 값을 메모이제이션하여 재렌더링 시 불필요한 연산을 줄인다.
};- 지정한 State나 Props가 변결될 경우 해당 값을 활용해 계산된 값을 메모이제이션하여 재렌더린 시 불필요한 연산을 줄인다.
- useMemo의 연산은 렌더링 단계에서 이루어지기 때문에 시간이 오래 걸리는 로직을 작성하는 것은 지양한다.
📌 useCallback
const App = () => {
const [firstName, setFirstName] = useState("나나");
const [lastName, setLastName] = useSate("바");
const getFullName = useCallback(() => {
return `${firstName} ${lastName}`;
}, [firstName, lastName]);
return <>{getFullName()}</>;
};- 함수를 메모이제이션하기 위해 사용하는 Hook이다. 컴포넌트가 재렌더린될 때 불필요하게 함수가 다시 생성되는 것을 방지한다.
- useMemo(()=>fn, deps)와
useCallback(fn, deps)는 동일하다.
단지, 개발자의 편의를 나눠져 있다고 보면 된다.
📌 useRef
const App = () => {
const inputRef = useRef(null);
const onButtonClick = () => {
inputRef.current.focus();
};
return (
<div>
<input ref={inputRef} type="text" />
<button onClick={onButtonClick}>input으로 포커스</button>
</div>
);
};- 컴포넌트 생애 주기 내에서 유지할 ref 객체를 반환한다.
- ref 객페는 .current라는 프로퍼티를 가지며 이 값을 자유롭게 변경할 수 있다.
- 일반적으로 React에서 DOM Element에 접근할 때 사용한다.(DOM Element의 ref 속성을 이용한다.)
- useRef에 의해 반환된 ref 객체가 변경되어도 컴포넌트가 재렌더링되지 않는다.
