useState와 불변성()[객체의 일부속성만을 업데이트 : ...()를 자주 사용]

useState : 자주 바뀌는 데이터에 사용

 

 

let [state에 보관했던자료 변수 , state 변경을 도와주는 함수] = useState('') // useState 안에는 [변수, 함수] 상태로 남아 있음.

 

왜 state를 써야 하는가?

ㅡ> 데이터 값 변동시 자동으로 html에 반영되게 만들고 싶어서.

 

원시 타입 (Primitive Types): 숫자, 문자열, 불리언과 같은 원시 타입의 경우, useState를 사용하여 상태를 업데이트하면 새로운 값이 생성됩니다. 원시 타입은 불변성을 가지므로, 값이 변경될 때마다 새로운 값이 생성됩니다.

 

참조 타입:

참조 타입의 경우 useState를 사용하여 상태를 관리할 때 원본 데이터를 직접 수정하는 것이 아니라, 새로운 데이터 구조를 생성하여 상태를 업데이트하는 것이 일반적입니다. 이렇게 함으로써 React는 상태의 변경을 감지하고, 그에 따라 DOM을 적절하게 리렌더링할 수 있습니다.

 

예시

import React, { useState } from 'react';

function App() {

  const [userInfo, setUserInfo] = useState({ name: 'John', age: 30 });

  function updateAge() {

    // 새로운 객체를 생성하여 상태를 업데이트

    setUserInfo({ ...userInfo, age: userInfo.age + 1 });

  }

  return (

    <div>

      <h1>{userInfo.name}: {userInfo.age}</h1>

      <button onClick={updateAge}>나이 증가</button>

    </div>

  );

}

 

-윗 예시 설명-

{ ...userInfo, age: userInfo.age + 1 } 구문에서 발생하는 일은 다음과 같습니다:

1. ...userInfo는 현재 userInfo 객체의 모든 속성을 새 객체로 복사합니다. 즉, { name: 'John', age: 30 }가 복사됩니다.
2. 이어서 age: userInfo.age + 1 부분이 실행되며, 이는 age 속성을 userInfo.age + 1, 즉 30 + 1로 설정합니다.
3. 만약 동일한 속성이 객체 내에서 여러 번 정의될 경우, JavaScript는 마지막에 정의된 값을 사용합니다. 따라서 age: 30은 age: 31로 덮어씌워집니다.

결과적으로 { ...userInfo, age: userInfo.age + 1 } 구문은 { name: 'John', age: 31 }과 같은 객체를 생성합니다. 이는 name 속성이 그대로 유지되면서 age 속성만 새로운 값으로 업데이트된 것을 의미합니다.

 

즉, 상태 변화함수는 {기존 정의 복사, 일부 새정의} 만으로 기존 정의를 덧씌울 수 있다

 

 React에서 상태 변화 함수를 사용할 때 객체의 일부 속성만 업데이트하고자 할 때, 스프레드 연산자(...)를 사용하여 기존의 상태를 새 객체에 복사하고, 변경하고자 하는 속성만 새로 정의하면, 해당 속성이 기존 정의를 덮어씌웁니다.

 

---

예를 들어, useState 훅을 사용하여 상태가 다음과 같이 정의된 경우:

 

이 상태의 a 속성만 변경하려면 다음과 같이 setState를 호출할 수 있습니다:

const [state, setState] = useState({ a: 1, b: 2 });

setState({ ...state, a: 3 });

---

 

가상돔은 메모리 새로 할당 받는 걸 바탕으로 그 메모리주소 차이를 감지하여 랜더링 해줌

기왕이면 새롭게 배열이든 변수든 새롭게 만들어서 불변성 유지도 하고 더 좋음.

 

그러니 윗처럼 스프레드 연산자를 통해서 새롭게 배열이나, 객체를 생성하는 일이 잦다.

---

불변성

불변성은 아예 참조타입들을 새롭게 생성해서 기존 데이터가 침해 받지 않는 것을 의미.

이게 불변성 유지의 핵심인데 이것은 새로운 객체, 배열을 새로 생성하는 것이 기본이다.

 

 

• 불변성을 유지하기 위해서는 참조 타입의 상태를 변경할 때 새로운 객체나 배열을 생성해야 합니다. 이 방식은 React가 상태 변경을 정확하게 감지하고 필요한 컴포넌트를 효과적으로 재랜더링하는 데 도움이 됩니다.
• useState는 상태를 변경하고 관리하는 데 사용되며, 참조 타입의 상태를 변경할 때는 불변성을 유지하는 방법을 따라야 합니다.

---

불변성과 useState가 서로 헷갈려서 1시간이나 집중적으로 상관관계를 비교해보고 정확한 정의를 읽어보고, 예제들을 살펴보는 등 많은 시간을 들였다.(계속 글도 업데이트함) 불변성은 뒤에서 memo를 써야하는데 거기까지는 내가 아직 미치지 못해서 나중에 가서야 더 제대로 이해가 될듯 싶다.