리액트 : useState + onChange 중복 줄이기

1. 변경 전 코드

  const [title, setTitle] = useState('');

  const [content, setContent] = useState('');

  const [selectedFile, setSelectedFile] = useState('');

  const [previewFile, setPreviewFile] = useState('');

 

return (

          <div>

            <ScInputTitle

              value={title}

              onChange={event => setTitle(event.target.value)}

              placeholder="제목을 입력해주세요."

              maxLength={30}

            ></ScInputTitle>

          </div>

          <div>

            <ScTextareaContent

              placeholder="내용을 입력해주세요"

              value={content}

              onChange={event => {

                setContent(event.currentTarget.value);

              }}

            ></ScTextareaContent>

          </div>

:

(selectedFile + previewFile은 동일해서 생략)

 

▶ useState + onChange 중복과 사용이 많아서 일괄 처리로 수정

2. 변경 후 코드

  const [formState, setFormState] = userState({

    title: '',

    content: '',

    previewFile: '',

  });

  const {title, content, previewFile} = formState;

 

   const onChangeHandler = event => {

    const {name, value} = event.target;

    setFormState(prev => ({...prev, [name]: value}));

  };

return (

      <div>

            <ScInputTitle

              name="title"

              value={title}

              onChange={onChangeHandler}

              placeholder="제목을 입력해주세요."

              maxLength={30}

            ></ScInputTitle>

          </div>

▶ 1개의 useState안에 객체로 넣어놓음 + 이벤트도 한개로 생성하여 name과 value값으로 함수형 사용

 

1) 태그에 name필요

2) 태그 내에 name과 value명 동일하게 설정

3) 동일 함수를 넣고 name값에 따라 분기처리

 

끝.