- input창을 usState로 여러개를 만들 경우 코드의 반복으로
코드가 길어지는 현상이 발생한다.
- 커스텀 훅을 만들어 반복되는 코드를 따로 관리를 하면 효율성이 올라간다.
- 아래 코드는 제목, 내용의 두 가지 input을 만들었을 때 코드다. 반복되는 코드임을 확인 할 수 있다.
import { useState } from 'react';
const [title, setTitle] = useState("");
const [body, setBody] = useState("");
const onChangeTitleHandler = (event) => {
setTitle(event.target.value)
}
const onChangeBodyHandler = (event) => {
setBody(event.target.value)
}
- 커스텀훅을 만들어 하나의 컴포넌트로 만들게 되면 재사용이 용이하고, 값을 변경함에 있어서도 편리하다.
import { useState } from 'react';
export function useInput(initialValue) {
const [inputValue, setInputValue] = useState(initialValue);
const onChange = (event) => {
setInputValue(event.target.value);
};
return [inputValue, onChange, setInputValue];
}
- 아래 코드처럼 간결해지고, 가독성이 좋아지며 효율성이 올라간다.
import { useInput } from '../hooks/Inputs';
const [inputTitle, onChangeTitle, setInputTitle] = useInput('');
const [inputBody, onChangeBody, setInputBody] = useInput('');
Error를 조심하자
- 커스텀 훅을 만드는 과정 중에 데이터를 input에서 2중으로 받아오는 경우가 생기는데 이 경우 에러가 발생하는 것을 확인했다.
- 초기값이 undefined로 되어 있을 때 나는 에러였다.
- 검색을 통해 해결법을 찾아봤다.
const [ip, setip] = useState('');
<input onChange={setip} value={ip || ''} /> <!-- 해결방안 2 : 값이 undefined 일경우 value 를 ''로 --!>
- 위처럼 해봤으나 에러는 해결되지 않았고, 인풋창의 입력이 먹히질 않았다.
- 일단 이중으로 넘기는 데이터를 이중으로 안넘기도록하고, 프로젝트를 진행했고, 문제가 발생한 에러의 원인은 조금 더 고민을 해보기로 했다.