useState란?

React에서는 state를 직접 조작할 수 없기에 state의 변경이 필요할때 사용되며
state가 변경되면 자동으로 다시 랜더링됨

• 예제

  // useState 함수 불러오기
  import React, { useState } from "react";
  
  function Counter() {
    // number는 상태. 기본값은 0으로
    // setNumber는 상태를 바꾸는 함수
    const [number, setNumber] = useState(0);
  
    // number를 1씩 증가
    const onIncrease = () => {
      setNumber(number + 1);
    };
  
    // number를 1씩 감소
    const onDecrease = () => {
      setNumber(number - 1);
    };
  
    return (
      <div>
        // h1태그로 number를 보여줌
        <h1>{number}</h1>
        // 클릭될때마다 해당함수 호출
        <button onClick={onIncrease}>+1</button>
        <button onClick={onDecrease}>-1</button>
      </div>
    );
  }
  
  export default Counter;
  

input으로 상태관리하기

• 예제(input이 한 개일때)

  // useState 불러오기
  import React, { useState } from "react";
  
  function InputSample() {
    // input 값을 관리할 상태를 만들어줌
    const [text, setText] = useState("");
  
    // input안의 값을 text로 전달하는 함수
    const onChange = (e) => {
      setText(e.target.value); // input DOM의 value를 가지고있음
    };
  
    // text를 초기화시킬 함수
    const onReset = () => {
      // text를 '' 즉 빈글씨 상태로 만듬
      setText("");
    };
  
    return (
      <div>
        {/* onChange는 데이터가 change되었을때 실행되는 속성 */}
        <input onChange={onChange} value={text} /> {/* 기본값을 text로 넣어줌 */}
        <button onClick={onReset}>초기화</button>
        <div>
          <b>값: </b>
          {/* 바뀐 상태값을 넣어줌 */}
          {text}
        </div>
      </div>
    );
  }
  
  export default InputSample;
  

• 예제2(input이 여러개일때)

  // useState 불러오기
  import React, { useState } from "react";
  
  function InputSample() {
    const [inputs, setInputs] = useState({
      // 기본값을 두개 넣고 시작
      name: "",
      nickname: "",
    });
  
    // 구조분해
    const { name, nickname } = inputs;
  
    const onChange = (e) => {
      // 리액트에서 객체를 업데이트할 때는 객체를 복사해야함
      const { name, value } = e.target;
  
      setInputs({
        // 불변성 코드이며 맨 아래 설명을 적어놨음
        ...inputs, // 스프레드 문법, 현재 상태의 내용을 불러옴
        // key 값을 []로 묶으면, name값이 무엇이냐에 따라 key값이 변경됨
        [name]: value, // name 키를 가진 값을 value로 설정
      });
    };
  
    const onReset = () => {
      setInputs({
        name: "",
        nickname: "",
      });
    };
  
    return (
      <div>
        <input
          name="name"
          placeholder="이름"
          onChange={onChange}
          value={name}
        />
        <input
          name="nickname"
          placeholder="닉네임"
          onChange={onChange}
          value={nickname}
        />
        <button onClick={onReset}>초기화</button>
        <div>
          <b>값: </b>
          {name} ({nickname})
        </div>
      </div>
    );
  }
  
  export default InputSample;
  

불변성

리액트 상태에서 객체를 수정할 때는 inputs[name] = value와 같이 직접 수정하면 안됨
그래서 spread문법을 사용해서 ...inputs처럼 기존 객체를 복사해 새로운 객체를 만들고
이 객체에서 상태를 업데이트 해줘야함 [name]:value