input onChange 실행하지 않는 오류

[aajy]

문제

Input컴포넌트의 props는 input의 속성인 value와 onChange를 전달한다. 이때 value로 전달하는 state를 부모 컴포넌트에서 변경을 했지만, Input컴포넌트의 onChange가 실행하지 않는 이슈가 생겼다.

• 부모 컴포넌트

  
  ...
  export const AddTask = ({ onClick }: AddTaskProps) => {
  const [currentTask, setCurrentTask] = useState<string>('');
  
  const updateCurrentTask = (e: React.ChangeEvent<HTMLInputElement>) => {
      setCurrentTask(e.target.value);
  };
  
  return (
      <>
          <Input value={currentTask} onChange={updateCurrentTask} />
  ...

- `Input 컴포넌트`

export const Input = ({ value = '', onChange, maxInputLength = 20 }: InputProps) => { const [internalValue, setInternalValue] = useState(value);

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (onChange) onChange(e);
    setInternalValue(e.target.value);
};

const isActive = (value: string) => {
    if (value.length >= maxInputLength) return true;
    else return false;
};

return <input className={internalValue && isActive(internalValue) ? 'active' : ''} type='text' value={internalValue} onChange={handleChange} />;

};

[aajy]

input의 상태를 바꿔주는 className을 위한 internalValue state로 인해 발생한 문제

input의 value를 나타내는 state 두 개가 충돌해 발생한 것이다.

props로 전달받는 state만을 사용해서 input 태그의 기능과 해당 Input컴포넌트의 공통 속성으로 value와 onChange를 선별해 props로 길을 열어두어 추상화를 하였는데, 그 props로 열어둔 데이터 흐름을 input내부의 또다른 input value를 나타내는 internalValue state가 흐름을 끊어 에러가 발생한 것이다.

isActive라는 className을 주는 분기처리를 할 때 굳이 internalValue가 필요했는지 다시 생각해 본다.