리액트 - 불변성

이한결·2023년 2월 4일

불변성 스파르타코딩 여정 27일차 항해99

부트 캠프

목록 보기

38/98

2월 4일 여정 27일차이다.

리액트에서 상태 업데이트를 위해서는 불변성을 지켜줘야 한다.

자바스크립트에서의 불변성은 들어보았지만, 리액트에서 불변성은 왜 지켜주어야 되는 걸까?

오늘의 Today I Learned

problem

자바스크립트에서 불변성은 원시값을 말하는 것이다. String, Number, undefined, Symbol이 원시값이었다. 이것들은 값을 복사해서 만들어도 데이터 영역에 새롭게 만들어지기 때문에 불변성이 있다고 했다. 그럼 리액트의 불변성은 무엇일까?

try

구글 검색과 항해99에서 준 자료와 영상을 같이 찾아보게 되었다.

solve

일단 먼저 리액트의 state에 대해 알아야 한다. 리액트는 화면을 리렌더링 할지 말지를 결정할때 state의 변화를 확인하게 된다.
state가 변했으면 리액트는 리렌더링을 수행하고, 변하지 않았으면 수행하지 않는다.

이때 리액트는 메모리 주소를 비교하게 된다. 그러나 객체의 속성 하나하나를 비교하는게 아니라 이전 참조값과 현재 참조값만을 비교하여 상태 변화를 감지한다. 즉 리액트는 상태값 업데이트를 할 때 얕은 비교를 수행하게 되는 것이다.

이런 이유 때문에 배열 혹은 객체를 업데이트 할 때 불변성을 지켜주지 않으면, 값은 바뀌지만 메모리주소는 변하지 않게 된다. 그럼 결국 메모리 주소는 안바뀌었기 때문에 리렌더링은 일어나지 않게 된다.

그러나 불변성을 지키게 될 경우, 메모리에 새로운 주소로 값이 할당되기 때문에 리액트는 새로운 주소를 인식하고 리렌더링이 일어나게 된다.

import React, { useState } from "react";

function App() {
  const [dogs, setDogs] = useState(["말티즈"]);

  function onClickHandler() {
		// spread operator(전개 연산자)를 이용해서 dogs를 복사합니다. 
	  // 그리고 나서 항목을 추가합니다.
    setDogs([...dogs, "시고르자브르종"]);
  }

  console.log(dogs);
  return (
    <div>
      <button onClick={onClickHandler}>버튼</button>
    </div>
  );
}

export default App;