[React] form에서 input, textarea 초기화

그동안 별 품이 안들고 잘 했었는데
갑자기 문제에 부닥쳤다...
setState('')해도 input 내의 값이 초기화되지 않는다...!!!!

아래는 내 코드... 원래 useInput으로 title을 다루다가 title과 content를 함께 객체로 다루고 싶어서 구조를 바꾸었다.
태그에 name을 주어서 입력되는 값을 바인딩해준다.

const TodoCreate = ({refresher}) => {
  const [todoContent, setTodoContent] = useState({
    title: '',
    content: ''
  });
  const {title, content} = todoContent;
  const handleTodoContent = (e) => {
    const { value, name } = e.target;
    setTodoContent({
      ...todoContent,
      [name]: value
    });
  }  
  const reset = () => {
    setTodoContent({
      title: '',
      content: ''
    })
  };
  
  const handleCreateTodo = (e) => {
    e.preventDefault();
    const payload = todoContent
    console.log(payload);
    createTodo('/todos', payload).then(reset())
    refresher();
  }
  return (
    <form onSubmit={handleCreateTodo}>
      <Input name="title" placeholder="오늘 할 일을 적어보세요." border="border" value={title} onChange={handleTodoContent} />
      <Textarea name="content" value={content} onChange={handleTodoContent} />
      <Button styles="default" type="submit" >Add Todo</Button>
    </form>
  )
}

아니 textarea에서는 초기화가 잘 되는데... 왜 Input은 안되는거냐구...ㅠㅠㅠㅠㅠㅠ
form에서 submit할때 초기화가 안되는 것 같다.
전에도 이 문제를 직면한적이 있었던 것 같음...
form이 아니라 div로 해서 문제가 해결된지도 모르고 해결했던 것 같음!

form을 제출하는 과정에서 onSubmit 함수 내에서 리셋을 하면 값이 제대로 제출이 안된다.

해결방법

textarea와 input을 둘다 초기화하는 방법은 아직 찾지 못했다.
대신 흥미로운 사실을 알아냈다.

input 초기화

e.target.reset();

textarea 초기화

setState({ content: ""})

input은 e.target에 reset을 해주어야 초기화가 된다.
textarea는 하던대로 state값을 초기화해주면 된다...

해결 ^ㅠ^

Ah.... input 스타일을 컴포넌트화해서 atom을 하나 만들어놨는데 여기에서 value를 안써서 생긴 문제였다.
form일때 뭔가 액션이 더 들어가야 하는 건 아니었다...^ㅠ^
민망쓰

const Input = ({ name, id, type, onChange, placeholder, border, value }) => {
  const borderStyle = BORDER[border];
  return (
    <>
      <label htmlFor={id}></label>
      <InputStyle 
      id={id} 
      name={name}
      type={type ? type : 'text'} 
      onChange={onChange} 
      placeholder={placeholder} 
      borderStyle={borderStyle}
      value={value} //이부분을 추가함
      />
    </>
  )
}