TIL33-02 input 커스텀 훅

김태혁·2023년 2월 16일
0

TIL

목록 보기
104/205

input을 커스텀 훅으로

  • 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)
}

Input.js

  • 커스텀훅을 만들어 하나의 컴포넌트로 만들게 되면 재사용이 용이하고, 값을 변경함에 있어서도 편리하다.
import { useState } from 'react';

export function useInput(initialValue) {
    const [inputValue, setInputValue] = useState(initialValue);   

    const onChange = (event) => {
        setInputValue(event.target.value);
    };

    return [inputValue, onChange, setInputValue];//원하는걸 반환하여 보내 줄 있다.
}

Forms.js

  • 아래 코드처럼 간결해지고, 가독성이 좋아지며 효율성이 올라간다.
import { useInput } from '../hooks/Inputs';

const [inputTitle, onChangeTitle, setInputTitle] = useInput('');
    const [inputBody, onChangeBody, setInputBody] = useInput('');

Error를 조심하자

  • 커스텀 훅을 만드는 과정 중에 데이터를 input에서 2중으로 받아오는 경우가 생기는데 이 경우 에러가 발생하는 것을 확인했다.
  • 초기값이 undefined로 되어 있을 때 나는 에러였다.
  • 검색을 통해 해결법을 찾아봤다.
const [ip, setip] = useState(''); // 해결방안 1 : 초기값을 '' 로 
<input onChange={setip} value={ip || ''} />  <!-- 해결방안 2 : 값이 undefined 일경우 value 를 ''--!>
  • 위처럼 해봤으나 에러는 해결되지 않았고, 인풋창의 입력이 먹히질 않았다.
  • 일단 이중으로 넘기는 데이터를 이중으로 안넘기도록하고, 프로젝트를 진행했고, 문제가 발생한 에러의 원인은 조금 더 고민을 해보기로 했다.
profile
도전을 즐기는 자

0개의 댓글