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값에 따라 분기처리
끝.
반응형
'JavaScript' 카테고리의 다른 글
[프로그래머스 | javascript] 가장 큰 수 (정렬) (0) | 2024.04.14 |
---|---|
바닐라 자바스크립트 SPA (0) | 2023.11.08 |
JS 5주차 정리 :: DOM | 클래스 | getters setters 개념 | 클래스 상속 | 클로저 (0) | 2023.10.17 |
JS 4주차 정리 :: 콜백함수 | 동기 & 비동기 | promise | 제네레이터 및 | async await (2) | 2023.10.17 |
JS 3주차 정리 :: 호이스팅 | 실행컨텍스트 | record | this | 콜백함수 | call, apply,bind (0) | 2023.10.16 |