[Next.js] 회원가입 - custom Hook

김시아·2022년 7월 18일
0

Next.js

목록 보기
2/2

요즘 회원가입은 엄청 간소화되고 있는 추세이지만
그래도 회원가입은 작성할 내용이 많다.
그래서 비슷한 코드가 반복될 확률이 높다.

기존에 리액트를 이용하여 회원가입을 만들 때
변수가 너무 많아지고 같은 코드를 계속 쓰는게 싫어서
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} />

0개의 댓글