간단한 커스텀 훅 예제 (useInput)

 

1. 문제인식

리액트에서 input을 사용할 때 반드시 만들어야 하는 함수가 있다.

바로 input value에 따라 state값을 변경해주는 함수이다.

예를들어 id 입력창과 password 입력창이 있을 때, 아래와 같이 코드를 짠다.

set함수가 분리되어 있다보니 input 핸들러를 각각 만들어줘야 한다.

const [id, setId] = useState('');
const [password, setPassword] = useState('');

const handleInputId = (e) => {
  setId(e.target.value);
};

const handleInputPassword = (e) => {
  setPassword(e.target.value);
};

 

 

사실 이전 방식인 클래스로 소스를 짜면 setState를 통해 간단하게 통합해왔던 부분이다.

클래스에서는 input에 name만 잘 붙여놓으면 아래 함수 하나로 통합할 수 있다.

const handleInput = (e) => {
  this.setState({
    ...this.state,
    [e.target.name]: e.target.value
  });
}

근데 훅은 state값 바꿔주는 set함수가 각각 나눠져 있는게 문제인 것이다.

이것을 어떻게 통합할 수 있을까?

 

---

 

2. 커스텀 훅 만들기

우리가 만들 커스텀 훅의 이름은 useInput이다.

그리고 우리가 원하는 커스텀 훅 활용 모습은 아래와 같다.

const [id, handleId] = useInput('');
const [password, handlePassword] = useInput('');

즉 state값 생성과 동시에 핸들러까지 같이 만들어주는 훅인 것이다.

 

먼저 useInput.js 파일을 생성한다.

그리고 중복되는 부분을 함수로 만든다.

const useInput = (initialValue = null) => {
    const [value, setValue] = useState(initialValue);
    const handler = useCallback((e) => {
        setValue(e.target.value);
    }, []);
    return [value, handler];
}

export default useInput;

 

useInput의 파라미터는 state의 초기값이다. 파라미터를 안넘겨도 기본값 null로 세팅.

setValue가 단독으로는 쓸모가 없기때문에, 그 대신에 handler를 처음부터 정의해주는 개념이다.

useInput의 리턴값 [value, handler]를 그대로 const로 정의하면서 사용한다. (구조분해할당)

 

이제 어디서든 useInput.js 파일을 import 하여 useInput 훅을 사용할 수 있다.