리액트 코드를 작성하다보면, 한 컴포넌트 내에서 여러개의 input을 관리할 일이 생길 수도 있다.
import React, { useState } from "react";
const App = () => {
const [name, setName] = useState("");
const [nickname, setNickName] = useState("");
return (
<div className="App">
<input value={name} onChange={(e) => setName(e.target.value)} />
<input value={nickname} onChange={(e) => setNickName(e.target.value)} />
</div>
);
};
export default App;
위의 코드는 name 이라는 값과 nickname 이라는 값을 입력받는 컴포넌트를 작성한 코드이다.
하지만 만약에 수십개의 입력을 받아야하는 컴포넌트라면?
useState를 100줄씩 쓸 수는 없는 노릇이다.
그래서 1차적으로 개선한 코드는 다음과 같다.
import React, { useState } from "react";
const App = () => {
const [value, setValue] = useState({});
const onChangeHandler = (e) => {
setValue({ ...value, [e.target.name]: e.target.value });
};
return (
<div className="App">
<input name="name" onChange={onChangeHandler} />
<input name="nickname" onChange={onChangeHandler} />
</div>
);
};
export default App;
이렇게 작성하고 보니, 여러 개의 input을 관리할 수 있었다.
하지만 onChangeHandler
함수는 아직 좋지 않다.
왜냐하면, React는 DOM 과의 상호작용을 줄이기 위해서 state 업데이트를 대기열에 넣고 계산하기 때문에 정말 운이 안좋으면 작동하지 않을 수 있다.
당연히 React에서는 이러한 문제를 해결하기 위해 previous state를 가져와 사용할 수 있다.
import React, { useState } from "react";
const App = () => {
const [value, setValue] = useState({
name: "",
nickname: "",
});
const onChangeHandler = (e) => {
setValue((prevState) => {
return { ...prevState, [e.target.name]: e.target.value };
});
};
return (
<div className="App">
<input name="name" onChange={onChangeHandler} />
<input name="nickname" onChange={onChangeHandler} />
</div>
);
};
export default App;
onChangeHandler
함수가 prevState
값을 통해 이전 값을 통해 업데이트 하도록 변경되었다.
음.. 이정도면 만족이다 :D
안녕하세요 유익한 글 잘봤습니다! 공부중인 학생인데 코드 중에서 한가지 여쭤보고 싶어서 댓글 남깁니다.
이 부분인데, 객체의 키값으로 [***]을 넣는 방식을 처음보았습니다.
이렇게 [] 배열 생성 안에 값을 넣어서 JS 객체 키값을 설정하는 방식에 대해서 좀 더 찾아보려고 하는데 혹시 관련된 키워드나 검색어를 알려주실 수 있으실까요?
유익하네요 ^^