1-5 https://arca.live/b/programmer/84858485
https://react.vlpt.us/basic/09-multiple-inputs.html
useState를 여러번 사용 한다는 가정하에 어떤 코드를 만들수 있는가
import React, { useState } from 'react';
function InputSample() {
const [text, setText] = useState('');
const [text2, setText2] = useState('');
const onChange = (e) => {
setText(e.target.value);
};
const onChange2 = (e) => {
setText2(e.target.value);
};
const onReset = () => {
setText('');
setText2('');
};
return (
<div>
<input onChange={onChange} value={text} placeholder='이름'/>
<input onChange={onChange2} value={text2} placeholder='닉네임' />
<button onClick={onReset}>초기화</button>
<div>
<b>값: {text} / 닉네임:{text2} </b>
</div>
</div>
);
}
export default InputSample;
이런식으로 만들수 있다
근데 이게 좋은 방법이 아니다
수정 시 일일이 건드려야 해서 유지보수도 꽝이고
객체를 일일이 생성시켜야 해서 로딩도 잡아먹고 코드도 더러워 진다
여기서 더 나은 방법을 이해하려면 리액트 훅 이란 시스템이 있는데 이걸 이해해야 한다
리액트는 객체를 따로 만드는게 아니고 객체를 복사 시켜서 사용한다고 한다
기존 객체를 복사하여 새로운 객체를 만들어서 업데이트를 하는것이 불변성을 지키는것이라고 한다
해당 강의에서 코드를 복붙하면 이런 모습일텐데
import React, { useState } from 'react';
function InputSample() {
const [inputs, setInputs] = useState({
name: '',
nickname: ''
});
const { name, nickname } = inputs; // 비구조화 할당을 통해 값 추출
const onChange = (e) => {
const { value, name } = e.target; // 우선 e.target 에서 name 과 value 를 추출
setInputs({
...inputs, // 기존의 input 객체를 복사한 뒤
[name]: value // name 키를 가진 값을 value 로 설정
});
};
const onReset = () => {
setInputs({
name: '',
nickname: '',
})
};
return (
<div>
<input name="name" placeholder="이름" onChange={onChange} value={name} />
<input name="nickname" placeholder="닉네임" onChange={onChange} value={nickname}/>
<button onClick={onReset}>초기화</button>
<div>
<b>값: </b>
{name} ({nickname})
</div>
</div>
);
}
export default InputSample;
하나하나 살펴보면..
const [inputs, setInputs] = useState({
name: '',
nickname: ''
});
초기값을 설정한다
useState는 값의 상태를 관리한다
const { name, nickname } = inputs; // 비구조화 할당을 통해 값 추출
inputs의 상태값을 비구조화하여 값을 추출 한다
비구조화는 개별의 형식 name 따로 nickname 따로 만들어 값을 추출 한다는 것 이다
const onChange = (e) => {
const { value, name } = e.target; // 우선 e.target 에서 name 과 value 를 추출
이벤트 타겟 속성 value와 name을 추출 한다
...inputs, // 기존의 input 객체를 복사한 뒤
스프레드 문법으로 객체를 복사 한다
* 스프레드 문법이 어딨냐
A : ...이 스프레드 문법임 *
[name]: value // name 키를 가진 값을 value 로 설정
[name]은 변수이며 name만 들어오는것이 아닌 nickname이 들어올수도 있고 추가 시 다른 값이 들어올 수도 있다
스프레드 문법으로 객체를 복사하여 새로운 객체를 만든 상태에서 업데이트 시킨다
위 잘못된 문법과의 차이를 보면
function InputSample() {
const [text, setText] = useState('');
const [text2, setText2] = useState('');
const onChange = (e) => {
setText(e.target.value);
};
const onChange2 = (e) => {
setText2(e.target.value);
};
새로운 객체를 하나하나 만들고 useState를 일일이 먹여야 하고
또 새로운 객체를 만들어야 했던 과거 코드와는 다르게
const [inputs, setInputs] = useState({
name: '',
nickname: ''
});
useState 한줄이 다수의 값 상태를 관리하며
리액트를 훅을 이용하여 객체를 복사하고 새로운 객체 상태에서 업데이트를 하는 방식을 채용해
간단하면서 불필요한 요소를 치우고 불변성을 지킨 코드로 바뀌었다
자세한 부분은 https://xiubindev.tistory.com/97 참고
이게 제일 어려우니 이것만 집중적으로 서술함
목표를 해당 강의 투 두 리스트 까지 입니다
다음은 10-15 배열로 뵙겠습니다
