react hook 공식 홈페이지와 얕은 실무 경험 바탕입니다.
1년 남짓 리액트로 개발을 하면서 상당히 많이 사용한 함수입니다.
먼저 저는 타입스크립트 ES6 환경에서 테스트 했습니다.
이벤트를 실행하기 전에 state 값의 기본값으로 name에 'Yuna'라는 값을 지정했습니다.
여기에서도 값을 추가해줄 수 있는데,
name 뿐만 아니라 ','를 찍고 age, address 등 다양한 값을 추가해줄 수 있습니다.
값 뒤에 데이터타입을 기입한 이유는 타입스크립트를 사용했기 때문에 타입을 미리 지정해 주었습니다.
import { useState } from "react";
import 'AppTest.scss';
function AppTest() {
const [state, setState] = useState({
name: 'Yuna' as string,
age: 18 as number,
address: '서울시 성동구'
});
return (
<div className="Information">
<h1 className="name">NAME : {state.name}</h1>
<h1 className="age">AGE : {state.age}</h1>
<h1 className="address">ADDRESS : {state.address}</h1>
</div>
);
}
export default AppTest;
실행하게 되면 아래와 같이 결과가 나옵니다.
state의 값을 가져와 봤는데 그러면 어떻게 state의 name값을 변경할 수 있는지 알아보겠습니다 :-)
import { useState } from "react";
import 'AppTest.scss';
function AppTest() {
const [state, setState] = useState({
name: 'Yuna' as string,
});
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setState({ name: e.target.value });
}
return (
<div className="Information">
<div className="Information">
<h1 className="name">NAME : {state.name}</h1>
</div>
<input type="text" onChange={onChange}></input>
</div>
);
}
export default AppTest;
input창을 만들어 주고 값을 입력하게 되면 setState를 활용하여 이벤트의 밸류 값을 넣어주면
state의 name값이 변경하게 됩니다.
여기까지 간단한 state, setState에 대한 정리였습니다 :-)