Web Tech/react
react 기본 - 8.useState(change event)
걍가영
2021. 11. 22. 16:27
input이 하나일때 상태 관리
Input.js
// react useState 패키지 불러오기
import React, {useState} from 'react';
function Input() {
// text 값 설정, setText 함수명 지정
const [text, setText] = useState('');
// e를 파라미터로 받아와 입력한 값 받아오기
const onChange = (e) => {
setText(e.target.value);
}
// 값 비우기
const onReset = (e) => {
setText('');
}
return(
<React.Fragment>
<input onChange={onChange} value={text} />
<button onClick={onReset}>초기화</button>
// text 값 보여주기
<p>값 : {text}</p>
</React.Fragment>
)
}
export default Input;
App.js
import React from 'react';
import Inner from "./Inner";
import Input from "./Input";
function App() {
return (
<React.Fragment>
<Inner>
// Input 컴포넌트 불러오기
<Input/>
</Inner>
</React.Fragment>
);
}
export default App;
input이 여러개일때 상태 관리
Inputs.js
import React, {useState} from 'react';
function Inputs() {
// 값과 함수명 설정해서 객체로 만들기
const [inputs, setInputs] = useState({
email: '',
nickname: ''
});
// 비구조화 할당을 통한 값 추출
const { email, nickname } = inputs;
const onChange = (e) => {
// 우선 e.target 에서 name 과 value 를 추출
const { value, name } = e.target;
setInputs({
// 기존의 input 객체를 복사한 뒤
...inputs,
// name 키를 가진 값을 value 로 설정
[name]: value
});
};
// 초기화 빈값 반환
const onReset = () => {
setInputs({
email: '',
nickname: '',
})
};
return (
<div>
<input name="email" type="email" placeholder="이메일" onChange={onChange} value={email} />
<input name="nickname" type="text" placeholder="닉네임" onChange={onChange} value={nickname}/>
<button onClick={onReset}>초기화</button>
<div>
<p>이메일:{email} </p>
<p>닉네임 : {nickname}</p>
</div>
</div>
);
}
export default Inputs;
App.js
import React from 'react';
import Inner from "./Inner";
import Inputs from "./Inputs";
function App() {
return (
<React.Fragment>
<Inner>
<Inputs/>
</Inner>
</React.Fragment>
);
}
export default App;
spread 문법
... 으로 객체의 내용을 모두 펼쳐서 기존 객체를 복사하여, 불변성을 지켜줘야 리액트 컴포넌트에서 상태가 업데이트가 됐음을 감지하고 리렌더링 진행합니다. 만약에 inputs[name] = value 이런식으로 기존 상태를 직접 수정하게 되면, 값을 바꿔도 리렌더링이 되지 않습니다.