[React/리액트] Input의 공백 입력값 onChange를 이용해 제거하기

• 코드 구조

const Page = () => {

    const onChanged = useCallback((e) => {
        e.target.value = e.target.value.trim()
        const value = e.target.value;
        onChange(e);
    },[onChange]);

return (
    <div>
        <input
            id={id}
            name={name}
            value={value}
            onChange={onChanged}
        />    
    </div>
)
}

 

• onChange의 역할

: 입력 상태가 실시간으로 업데이트되어 최신 상태를 유지하며, 사용자에게 실시간 피드백을 제공

 

단점: 상태 업데이트가 발생할 때마다 컴포넌트가 재렌더링되어 성능에 영향을 줄 수 있다.

 

---

따라서, onChange 메서드 값의 변경이 있을 때에만  onChanged의 함수가 실행될 수 있도록 useCallback을 통해 onChange를 의존성 배열에 넣어두었고, input의 입력되는 값을 의미하는 e.target.value에 앞뒤 공백을 제거하는 메서드를 입혀 반환하도록 하였다. 또한 e에 대한 구조를 살펴보면 활용하기에 유용할 것 같다.

 

• e의 구조

 

 

• e.target의 구조

 

구조를 알아본다면 코드를 이렇게도 적을 수 있을 것 같다.

    const onChanged = useCallback((e) => {
      e.target.value = e.target.value.trim();
      //onChange(e);
      onChange({...e, value: e.target.value});
      console.log('e', e.target);
    }, [onChange]);