요즘 회원가입은 엄청 간소화되고 있는 추세이지만
그래도 회원가입은 작성할 내용이 많다.
그래서 비슷한 코드가 반복될 확률이 높다.
기존에 리액트를 이용하여 회원가입을 만들 때
변수가 너무 많아지고 같은 코드를 계속 쓰는게 싫어서
useState에 object를 담아 사용하곤 했었다.
const [value, setValue] = useState({id: '', pwd: ''});
const onChange = (e) => {
setValue({...value, [e.target.name]: e.target.value});
};
<input type="text" name="id" value={value.id} onChange={onChange} />
그런데 이렇게 하면 input에 들어가야 할 요소가 너무 많았다.
간략하게 보여주기 위해 value와 onChange만 작성했지만
name, onFocus, onBlur...등을 다 넣었어야 했고
input이 너무 길어져 가독성도 떨어지고 작성할 내용도 너무 많았다.
그래서 이번에는 커스텀 훅을 만들어 사용해보려한다.
(리액트로 프로젝트 할 때는 자바스크립트를 사용했었지만, 지금은 타입스크립트를 사용중이다)
import React, { useState } from 'react';
const useInput = (input: string) => {
const [value, setValue] = useState(input);
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setValue(e.target.value);
};
return { value, onChange };
};
export default useInput;
import { NextPage } from 'next';
import useInput from '../../hooks/useInput';
const JoinComponent: NextPage = () => {
const id = useInput('');
return (
<main >
<h2>회원가입</h2>
<div>
<span>아이디</span>
<input type="text" {...id} />
</div>
</main>
);
};
export default JoinComponent;
const id = useInput('');
이렇게 사용하면
value와 onChange 함수가 object로 리턴되어
<input type="text" {...id} />
이렇게 추가 선언 없이 바로 넣을 수 있다.
이렇게 작성하기 위해 eslint rules에 다음 항목을 추가하였다.
"react/jsx-props-no-spreading": 0,
eslint를 수정하지 않고 오류없이 작성하고 싶다면 이런식으로 다 써줘도 된다.
<input type="text" value={id.value} onChange={id.onChange} />