hooks - useState() 사용하기

besensible·2021년 5월 17일
0

hooks

목록 보기
1/2

react hook 공식 홈페이지와 얕은 실무 경험 바탕입니다.

1년 남짓 리액트로 개발을 하면서 상당히 많이 사용한 함수입니다.
먼저 저는 타입스크립트 ES6 환경에서 테스트 했습니다.

👉 state에 초기값 넣기

이벤트를 실행하기 전에 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;

실행하게 되면 아래와 같이 결과가 나옵니다.

👉 setState로 state값 변경하기

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에 대한 정리였습니다 :-)

참고 : https://ko.reactjs.org/docs/hooks-intro.html

profile
많고 많은 사람 중에 그대 한 사람

0개의 댓글