[ React ] useState

출처 : https://react.vlpt.us/basic/07-useState.html

https://react.vlpt.us/basic/09-multiple-inputs.html

9. 여러개의 input 상태 관리하기 · GitBook

 

import React, { useState } from 'react';

이 코드는 리액트 패키지에서 useState를 사용할 수 있도록 해준다.

 

 

const [number, setNumber] = useState(0);

const [상태 값 저장 변수, 상태 값 갱신 함수] = useState(상태 초기 값);

 

  const onIncrease = () => {
    setNumber(number + 1);
  }

  const onDecrease = () => {
    setNumber(number - 1);
  }

 

초기값인 0에서 onIncrease 함수가 호출이 되면 number+1된 값이 set되고,

onDecrease 함수가 호출이 되면 number-1된 값이 set된다.

 

---

- 좀더 고급 버전

 

const [inputs, setInputs] = useState({
    name: '',
    nickname: ''
  });

초기값은 이렇게도 변형될 수 있다.

참고로 Typescript에서는 useState<boolean>(false);이런식으로 <>괄호 안에 Type이 들어간다. 

 

const { name, nickname } = inputs;

 

그리고 이렇게 추출한다.. 신세계.. ㅎㅎ..

inputs의 name과 nickname을 추출하는 것이다..

 

 

const onChange = (e) => {
    const { value, name } = e.target; // 우선 e.target 에서 name 과 value 를 추출
    setInputs({
      ...inputs, // 기존의 input 객체를 복사한 뒤
      [name]: value // name 키를 가진 값을 value 로 설정
    });
  };