[React] useState란?

useState란

React에서 상태(state)를 관리하기 위해 사용하는 Hook 함수

React에서 state(상태), state(상태)변수란?

컴포넌트 내부에서 변할 수 있는 값으로 사용자의 입력, 버튼 클릭 등으로 바뀌는 동적인 데이터를 다루는 변수를 의미한다.

코드로 예를 들면

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      {count}번 클릭
    </button>
  );
}

위의 코드에서 count는 상태변수로 버튼을 누르면 count가 1씩 더해지고 즉각적으로 렌더링(화면에 반영) 된다.

반면,

let count = 0;

function increase() {
  count += 1;
  console.log(count);
}

위의 코드에서 count는 상태변수가 아닌 일반 변수로 값이 변경되도 렌더링이 되지 않는다.

Hook 함수란?

React 함수형 컴포넌트에서 상태 관리, 라이프사이클 제어 등을 가능하게 해주는 함수로
종류로는 useState, useEffect 같은 것들이 있다.
useState → 상태관리
useEffect → 라이프사이클 제어

useState 사용법

useState는 다음과 같이 사용할 수 있다.

const [state, setState] = useState(초기값);

state → state 변수

setState → state를 변경하는 함수

초기값 → state의 기본 값 설정

예시

문자열

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

Boolean

const [isOpen, setIsOpen] = useState(false);

객체

const [user, setUser] = useState({ name: "", age: 0 });

객체 수정

setUser({ ...user, name: "홍길동" });

배열

const [list, setList] = useState([]);

배열 수정

setList([...list, "새 아이템"]);

객체와 배열에 스프레드 문법({ ...user})을 사용하는 이유

스프레드 문법을 사용하면 기존의 user을 복사하여 가져와 user전체를 바꿀 필요 없이 원하는 속성만 바꿀 수 있기 때문.

객체와 배열 수정에 스프레드 문법을 사용하지 않으면?

setUser({ user, name: "홍길동" });

이렇게 하면 user가 객체 안에 또 들어가서

{
  user: { name: "영희", age: 25 },
  name: "홍길동"
}

객체 구조가 꼬이게 된다.

참고로

setUser({ name: "홍길동", age: 30 });

이런식으로 일부가 아닌 객체 전체를 수정하면 스프레드 문법을 사용하지 않을 수 있다.
하지만 이런 경우 속성을 모두 다 써야해서 속성이 많은 객체의 경우 많이 귀찮아지기 때문에 ...user을 사용하는게 편리하다

배열도 객체와 마찬가지로 ...user을 사용하지 않으면 배열이 꼬이는 문제가 발생한다.