1. 커스텀 훅
커스텀 훅은 반복되는 로직을 하나로 묶어 재사용하기 위해 사용된다. 커스텀 훅을 사용해서 만든 기능은
각 컴포넌트에서 독립된 상태를 가진다.
예를 들어, input이 여러개 있는 경우 onChange가 일어나면 값을 바로 업데이트 하는 로직이 많다.
이 경우 커스텀 훅을 만들어 반복되는 로직을 쉽게 재사용할 수 있다.
📁src 👉 📁 hooks 👉 📜 useInput.js
useState로 상태 관리하는 코드와 change 이벤트 발생 시, 동작하는 핸들러를 만들고 반환한다.
import {useState} from 'react';
const useInput = () => {
const [text,setText] = useState('');
const handleChange = (e) => {
setText(e.target.value);
}
return [text,handleChange];
};
export default useInput;const [id,changeId] = useInput();
const [password,changePassword] = useInput();
const [nickname,changeNickname] = useInput();1.1 훅 사용 규칙
1) 최상위(at the Top Level)에서만 훅을 호출한다.
반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하지 말자! return이 실행되기 전에 항상 React 함수의 최상위(at the top level)에서 Hook을 호출해야 한다.
👉 컴포넌트가 렌더링 될 때 항상 동일한 순서로 Hook이
호출되는 것이 보장된다.
2) Hook을 일반 자바스크립트 함수에서 호출하지 말자!
리액트 함수 컴포넌트에서 Hook을 호출하세요.
커스텀 훅에서 Hook을 호출하세요.
