❓ React Hook 이란?
클래스 컴포넌트의 기능을 함수 컴포넌트에서도 이용할 수 있도록 도와주는 메서드입니다.
2017년도 이전, 과거의 React에서는 대부분의 개발자들이 Class로만 컴포넌트를 만들었습니다. 함수로도 만들 수는 있었지만 단순히 UI를 렌더링하는 것 외에는 기능이 제한되어 있었기 때문입니다.
그런데 Class 컴포넌트는 복잡한 Class 문법을 이용해야 했기 때문에 점차 문법이 훨씬 간결한 함수 컴포넌트에서 리액트의 모든 기능들을 이용하고 싶어하는 수요가 증가하였고, 결국 함수 컴포넌트에서도 클래스 컴포넌트의 기능을 마치 낚아채듯이 가져와서 사용할 수 있게 해주는 React Hook라는 기능을 개발하게 되었습니다.
앞서 사용한 useState와 useRef 모두 React Hook 이며, use라는 접두사를 붙여 다른 다양한 Hooks가 존재합니다. (useEffect, useReducer... 등등)
React Hooks의 제한사항
- 함수 컴포넌트 내부에서만 호출 가능합니다.
- 조건문, 반복문 내부에서는 호출 불가합니다.
Custom Hook
놀랍게도, use라는 접두사를 사용하면 커스텀 훅을 만들 수 있습니다.
import { useState } from "react";
function useInput() {
const [input, setInput] = useState("");
const onChange = (e) => {
setInput(e.target.value);
};
return [input, onChange];
}
const HookExam = () => {
const [input, onChange] = useInput();
const [input2, onChange2] = useInput();
return (
<input value={input} onChange={onChange} />
<input value={input2} onChange={onChange2} />
);
};state의 기능을 사용하려면, useState로 선언을 하고, 이벤트 핸들러를 만들어야 합니다. 그런데 만약 이러한 비슷한 기능을 가진 컴포넌트가 여러 개 있다면, 이러한 과정을 매번 중복으로 겪어야 합니다. 따라서 아예 훅을 만들어 선언하고 이벤트 핸들러를 만드는 부분을 따로 떼내는 것이 용이합니다.
위처럼 use 접두사를 붙인 useInput 훅을 새로 만들어 useState, onChange 함수를 만든 후, input과 onChange를 내보낸 후 그대로 HookExam에서 받습니다.
이렇게 되면 useState와 비슷한 로직을 가진 여러 개의 컴포넌트 내부 코드를 반복적으로 생성하지 않고도 효율적으로 작성할 수 있게 됩니다.
🔗참고 자료
한 입 크기로 잘라먹는 리액트
