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

728x90
반응형

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값에 따라 분기처리

 

끝.

 

반응형