useState 설명하기- 불변성

React 는 화면의 특정 부분이 바뀌었을 때 바뀐 부분만 렌더링해주는 기술이다.

그런데 상태 변화가 있었을 때 변수 = 값 으로 입력하면 리액트가 어느 부분이 변했는지 모른다.

그렇게 때문에 useState의 set 함수로 상태를 변경해야 한다.

const [pages, setPages] = useState([]);

이렇게 변수와 변수를 세팅하는 함수로 이루어져 있다. set + 변수의 첫글자 대문자는 규칙이기 때문에 외워두면 좋다.

불변성

React 에서 상태를 업데이트 할 때는 불변성을 유지해야 한다. 즉 상태를 직접 수정하는 대신 새로운 상태값을 생성해서 업데이트하는 방식을 사용해야 한다.

불변성은 데이터가 생성된 후 그 내용을 변경할 수 없는 특성을 말한다. React는 이러한 불변성을 활용하여 이전 상태와 새 상태를 쉽게 비교하여 컴포넌트를 리렌더링할지 결정한다.

React에서 상태 업데이트 시 새로운 객체나 배열을 생성하면, 이 새로운 객체나 배열은 메모리 상에서 새로운 위치에 저장됩니다. 즉, 이전 상태와 새로운 상태는 서로 다른 메모리 주소를 가리키게 됩니다. React는 이러한 참조의 변화를 통해 상태가 변경되었는지 감지할 수 있습니다.

불변성을 지키며 업데이트 하는 예시

배열

import React, { useState } from 'react';

function ItemList() {
  const [items, setItems] = useState(['Apple', 'Orange']);

  const addItem = item => {
    // 전개 연산자 (spread 연산자) 로 이전 값을 새로 복사해서 설정
    setItems(currentItems => [...currentItems, item]);
    // 잘못된 예시 - 기존의 배열을 변경
    // setItems(currentItems.push(item))
  };

  return (
    <div>
      {items.map((item, index) => (
        <div key={index}>{item}</div>
      ))}
      <button onClick={() => addItem('Banana')}>Add Banana</button>
    </div>
  );
}

객체

import React, { useState } from 'react';

function UserInfo() {
  const [user, setUser] = useState({ name: 'John', age: 30 });

  const updateUserAge = age => {
    // 기존의 객체를 전개 연산자로 복사하여 세팅
    setUser(currentUser => ({ ...currentUser, age }));
    // 잘못된 예시 - 객체의 값을 직접 복사해서 세팅
    // let newUser = user;
    // newUser.age = '20';
    // setUser(newUser)
  };

  return (
    <div>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
      <button onClick={() => updateUserAge(31)}>Make John 31</button>
    </div>
  );
}

리액트에서 상태 변화와 불변성은 이 기술의 핵심을 보여주는 중요한 개념이다.

이전 상태를 쉽게 가져오기

set 함수 내에서 이전 상태를 쉽게 가져와서 변경할 수 있다.

배열

setPages((prev)=> [...prev, "mango"]);

객체

setObject((pre) => ({ ...pre, name: "mango" }));

객체의 배열 다루기

const [objects, setObjects] = useState([
  { name: "apple" },
  { name: "banana" },
]);

...

<button
  onClick={() => {
    setObjects((prev) => [...prev, { name: "mango" }]);
  }}
>
  add mango
</button>

{objects.map(
        (
          obj: {
            name: string;
          },
          index: number
        ) => (
          <div key={index}>
            <h3>{obj.name}</h3>

            <button
              onClick={() => {
                setObjects((prev) =>
                  prev.map((item, i) =>
                    i === index ? { name: "mango" } : item
                  )
                );
              }}
              className="mr-2"
            >
              Change to mango
            </button>

            <button
              onClick={() => {
                const newObjects = objects.filter((item, i) => i !== index);
                setObjects(newObjects);
              }}
            >
              Delete
            </button>
          </div>
        )
      )}