[TIL] sparta 20일차 - 리액트 state, 불변성

💻공부한 내용

 

State

컴포넌트 내부에서 바뀔 수 있는 값

 

useState

React 라이브러리에서 제공하는 함수

함수형 컴포넌트에서 상태를 관리할 수 있게 해주는 훅(Hook)

 

 

✅ useState 사용방법

//  React 라이브러리와 useState 훅을 현재 파일로 가져온다
import React, { useState } from 'react';

function ExampleComponent() {
  // useState를 사용하여 초기 상태 값과 상태를 업데이트하는 함수를 선언한다
  // JavaScript의 비구조화 할당(destructuring assignment)을 사용한 코드
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

 

 

불변성

메모리에 있는 값을 변경할 수 없는 것

원시 데이터 (Primitive Data)인 숫자, 문자열, 불리언, null, undefined는 불변성을 가진다

즉, 값을 변경하려면 새로운 값을 할당해야 한다

 

원시데이터가 아닌 값(객체, 배열, 함수)들은 불변성을 가지지 않아서

만약 리액트에서 원시데이터가 아닌 데이터를 수정할 때

불변성을 지켜주지 않고, 직접 수정을 가하면 값은 바뀌지만 메모리 주소는 변함이 없게 된다

 

(개발자가 값은 바꿨지만 리액트는 state가 변했다고 인지하지 못하게 된다

그래서 결국 마땅히 일어나야 할 리렌더링이 일어나지 않게 된다)

 

React는 가상 DOM을 사용하여 화면을 렌더링하고 업데이트하기 때문에

이전 상태와 새로운 상태가 동일한 메모리 주소를 가리키므로

React는 변경된 부분을 인식하지 못해 리렌더링을 하지 않게 된다.

 

 

 

참고자료

JavaScript 배열 메서드가 원본을 변형하는지 또는 불변성을 유지하는지 확인하는 데 도움을 주는 사이트

 

예를 들어 .map() 메서드는 새로운 배열을 반환하므로

원본 데이터를 변형하지 않아서 불변성을 가지고

 

.pop() 메서드는 배열의 마지막 요소를 제거하고 반환하기 때문에

원본 데이터를 변형해서 불변성을 가지지 않는다

 

https://doesitmutate.xyz/

Does it mutate?

 

🤔 어려웠던 점

객체나 배열은 참조 유형(Reference Types)으로

값 대신 메모리에 대한 참조를 저장하는데

 

리액트에서는 그런 데이터들을 불변성을 지켜주려고 useState를 사용해서

불변성을 지키는게 아직 100% 이해가 되지 않는다