🔫 React_03 useState

🎮 useState

• 컴포넌트에서 보여줘야 하는 내용이 사용자 인터랙션에 따라 바뀌어야 할 때 어떻게 구현할 수 있을까?

리액트 16.8 이전 버전 : 함수형 컴포넌트에서는 상태를 관리할 수 없었다.
리액트 16.8에서 Hooks 기능이 추가되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다.
=> 리액트 Hooks 중 하나인 useState 함수로 상태 관리

🎲 Counter 컴포넌트 만들기

• src 폴더에 Counter.js 생성
• 버튼을 누르면 숫자가 바뀐다.

// 1
import React from "react";

function Counter() {
  return (
    <div>
      <h1>0</h1>
      <button>+1</button>
      <button>-1</button>
    </div>
  );
}

export default Couter;

이벤트 설정

• Counter 에서 버튼이 클릭되는 이벤트가 발생했을 때, 특정 함수가 호출되도록 설정

// 2
import React from "react";

function Counter() {
  const onIncrease = () => {
    console.log("+1");
  };
  const onDecrease = () => {
    console.log("-1");
  };

  return (
    <div>
      <h1>0</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Couter;

동적인 값 관리 = useState

• 컴포넌트에서 동적인 값 = 상태(state)
• 컴포넌트에서 상태 관리 = useState 함수 사용
  => 리액트 패키지에서 useState 함수를 불러와 사용

// 3
import React, { useState } from "react";

function Counter() {
  // 첫 번째 원소(number) : 현재 상태
  // 두 번째 원소(Setter) : Setter 함수
  // 상태의 기본값을 파라미터로 넣어서 호출
  const [number, setNumber] = useState(0);

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

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Couter;

배열 비구조화 할당

• 배열 안에 있는 값을 추출해서 변수 혹은 상수로 바로 선언

const numberState = useState(0);
const number = numberState[0];
const setNumber = numberState[1];

// 배영 비구조화 할당
const [number, setNumber] = useState(0);

함수형 업데이트

• 위의 코드에서 Setter 함수를 사용할 때, 업데이트 하고 싶은 새로운 값을 파라미터로 넣어줌
  => 기존 값을 어떻게 업데이트 할 지에 대한 함수를 등록하는 방식으로 값을 업데이트 하기

// 4
import React, { useState } from "react";

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

  const onIncrease = () => {
    setNumber((prevNumber) => prevNumber + 1);
  };
  const onDecrease = () => {
    setNumber((prevNumber) => prevNumber - 1);
  };

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Couter;

App에서 Counter를 렌더링

// App.js
import React from "react";
import Counter from "./Counter";

function App() {
  return <Counter />;
}

export default App;

🎲 input 상태 관리

• src 폴더에 InputSample.js 생성

// InputSample.js
import React from "react";

function InputSample() {
  return (
    <div>
      <input />
      <button>초기화</button>
      <div>
        <b>값: </b>
      </div>
    </div>
  );
}

export default InputSample;

• input에 입력하는 값이 하단에 나타나기
• 초기화 버튼을 클릭하면 input 값이 비워지기
  => input의 onChange 이벤트 사용
  => 이벤트에 등록하는 함수에서는 이벤트 객체 e를 파라미터로 받아와서 사용
  => 이 객체의 e.target은 이벤트가 발생한 DOM인 input DOM을 가르킴
  => 이 DOM의 value 값, 즉 e.target.value를 조회하면 현재 input에 입력한 값을 알 수 있다.

// InputSample.js
import React, { useState } from "react";

function InputSample() {
  const [text, setText] = useState("");

  const onChange = (e) => {
    setText(e.target.value);
  };

  const onReset = () => {
    setText("");
  };

  return (
    <div>
      <input onChange={onChange} value={text} />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: {text}</b>
      </div>
    </div>
  );
}

export default InputSample;

App에서 InputSample를 렌더링

// App.js
import React from "react";
import InputSample from "./InputSample";

function App() {
  return <InputSample />;
}

export default App;

🎲 여러 개의 input 상태 관리

// InputSample.js
import React, { useState } from "react";

function InputSample() {
  const onChange = (e) => {};

  const onReset = () => {};

  return (
    <div>
      <input placeholder="이름" />
      <input placeholder="닉네임" />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: {text}</b>
        이름 (닉네임)
      </div>
    </div>
  );
}

export default InputSample;

• input의 개수가 여러 개일 때 useState를 여러번 사용하고, onChange도 여러 개 만들어서 구현하는 방법은 좋지 않다.
  => input에 name을 설정하고 이벤트가 발생했을 때 이 값을 참조
  => useState에서 문자열이 아니라 객체 형태의 상태를 관리

import React, { useState } from "react";

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

  // 비구조화 할당을 통해 값 추출
  const { name, nickname } = inputs;

  const onChange = (e) => {
    // 우선 e.target에서 name과 value를 추출
    const { value, name } = e.target;
    setInputs({
      ...inputs, // 기존의 input 객체 복사
      [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;

• 객체를 수정할 때 직접 수정하지 않고, 새로운 객체를 만들어서 새로운 객체에 변화를 주고, 이를 상태로 사용

// 직접 수정
input[name] = value;

// 새로운 객체 생성
setInputs({
  ...inputs,
  [name]: value,
});

참고

• 벨로퍼트와 함께하는 모던 리액트