얕은 복사, 리액트에서 자주 사용하고 있다고?

TLDR;

리액트에서는 성능을 위해 얕은 비교를 통해 state의 변경을 감지한다.

기본형 데이터는 기존 값 변경시 값 자체가 변경되어 리액트가 정상적으로 비교를 수행하여 값을 업데이트 할 수 있지만, 참조형 데이터의 경우에는 기존 값의 데이터를 변경한다고 하여도, 참조값은 동일하기에 리액트가 state 변경을 감지할 수 없다. 따라서 참조형 데이터는 Spread Operator 혹은 Object.assign을 이용하여 얕은 복사를 수행함으로서 참조값을 변경시켜줘야 하는데, 중첩 객체의 경우 중첩된 값은 참조값이 끊어지지 않고 사본 변경시 원본을 같이 변경하는 것이기 때문에, 별개의 객체로 보고 마찬가지로 새로운 참조값을 갖도록 중첩된 객체 내부에서 한번 더 얕은 복사를 실시해 줘야 한다. 

 

이 외에도 리액트가 제공하는 React.memo에서 디폴트로 얕은 비교가 사용되는데, 참조형 데이터를 props로 전달할 때에는 동일한 참조값을 유지하여 React.memo를 사용 의도에 맞게 동작하도록 useCallback을 이용해 메모이제이션 해 줄 수 있다.

 

 

얕은 복사와 깊은 복사가 무엇인지는 이제 알았으니, 그래서 리액트에서 이 개념이 어떻게 쓰이고 있는지 알아보도록 하자.

 

얕은 비교를 통해 state 변경을 감지하는 리액트

리액트에서 일반적으로 리렌더가 일어나는 조건은, state가 변경되었을 때, 새로운 props가 전달되었을 때, 그리고 부모 컴포넌트가 리렌더링 될 때이다. 그렇다면 리액트는 state가 변경되었다는 사실을 어떻게 알 수 있을까?

리액트 공식문서의 useState에 관련된 설명 중 다음과 같은 설명이 나온다.

 

If the new value you provide is identical to the current state, as determined by an Object.is comparison, React will skip re-rendering the component and its children. This is an optimization. Although in some cases React may still need to call your component before skipping the children, it shouldn’t affect your code.

 

위 내용에서 알 수 있듯이 리액트는 state 변경을 감지할 때 Object.is를 사용하여 shallow compare을 한다. 다음은 리액트 레포에서 가져온 shallowEqual.js 코드이다.

import is from './objectIs';
import hasOwnProperty from './hasOwnProperty';

/**
 * Performs equality by iterating through keys on an object and returning false
 * when any key has values which are not strictly equal between the arguments.
 * Returns true when the values of all keys are strictly equal.
 */
function shallowEqual(objA: mixed, objB: mixed): boolean {
  if (is(objA, objB)) {
    return true;
  }

  if (
    typeof objA !== 'object' ||
    objA === null ||
    typeof objB !== 'object' ||
    objB === null
  ) {
    return false;
  }

  const keysA = Object.keys(objA);
  const keysB = Object.keys(objB);

  if (keysA.length !== keysB.length) {
    return false;
  }

  // Test for A's keys different from B.
  for (let i = 0; i < keysA.length; i++) {
    const currentKey = keysA[i];
    if (
      !hasOwnProperty.call(objB, currentKey) ||
      !is(objA[currentKey], objB[currentKey])
    ) {
      return false;
    }
  }

  return true;
}

export default shallowEqual;

위 코드를 살펴보면 공식문서에서 설명한 대로 가장 상단에서 Object.is를 사용하고 있는 것을 볼 수 있다. Object is는 기본형과 참조형에서 일반적으로 다음과 같이 동작한다.

• 숫자, 문자열, Boolean과 같은 원시 자료형은 값을 비교한다.
• 배열, 객체 등 참조 자료형은 그 안의 값 혹은 attribute를 비교하지 않고, 그들의 레퍼런스(참조되는 위치)를 비교한다.

리액트가 깊은 비교를 하지 않고 Object.is를 사용하여 값을 비교하는 이유는 공식문서에서 설명한 것처럼 최적화 때문이다.

 

만약 5000개의 값을 가지고 있는 배열이 있고, 이 중 4998번째의 데이터를 변경하였다고 해보자. 변화를 감지하려면 첫 번째 데이터부터 4998 데이터까지 하나하나 비교를 해야할 것이다. 이렇게 되면 성능이 매우 떨어진다. 따라서 리액트에서는 얕은 비교를 통해 참조값이 변경되었다면 안에 있는 값이 변경되었다고 인지하도록 한 것이다.

 

리액트에서의 불변성? state 갈아끼우기로 이해해야 한다.

위에서 살펴봤듯이, 얕은 비교를 통해 state 변경을 감지하기 때문에 리액트에서는 특히 배열과 객체를 변경할 때에는 참조값을 아예 변경하여 새로운 객체를 만들어야 하며, 기존의 객체는 불변성을 유지해야 한다고 공식문서에서 여러번 강조해서 알려주고 있다.
기존 객체의 불변성을 유지해야 한다는 말이 다소 이해하기 어려웠는데, 영어로 보면 훨씬 이해하기 쉽다.

In React, state is considered read-only, so you should replace it rather than mutate your existing objects.

기존의 데이터를 변경한다고 생각하면 안되고, 기존의 state는 그대로 놔둔채, 주솟값이 다른 객체를 만들어 기존의 state를 갈아끼운다라고 생각해야 한다. 그리고 이 때 얕은 복사를 사용한다!! 이 내용을 코드로 이해해 보면 다음과 같다.

// form이라는 state가 기존에 있다고 가정

// 🚩 Don't mutate an object in state like this:
form.firstName = 'Taylor';          // 이런 식으로 업데이트 하는 것이 아니라

// ✅ Replace state with a new object
setForm({
  ...form,        // 아예 주솟값이 다른 새로운 객체를 만들어, 변경하고자 하는 값을 변경하여 갈아끼운다. 
  firstName: 'Taylor'
});

// 배열도 마찬가지이다.

setArtists( // Replace the state
  [ // with a new array
    ...artists, // that contains all the old items
    { id: nextId++, name: name } // and one new item at the end
  ]
);

 

이렇듯 새로운 주소값을 가진 객체나 배열을 전달하여 리액트에게 state 변경을 알려준다! 라고 생각하는 것으로 생각 전환이 필요하다.

 

 

중첩 객체 변경시에 주의할 점

중첩된 객체나 배열을 Spread Operator 혹은 Object.assign을 이용해서 변경할 때 주의할 점이 있다.

 

Spread Operator는 중첩객체에서 1 depth만 주소를 변경하여 값을 복사해준다는 점을 생각해볼 때, 중첩된 객체의 값을 변경해주고 싶다면 아래와 같이 중첩되어 있는 객체의 값도 한번 더 복사를 해줘야만 제대로 값이 변경된다.

const [person, setPerson] = useState({
  name: 'Niki de Saint Phalle',
  artwork: {
    title: 'Blue Nana',
    city: 'Hamburg',
    image: 'https://i.imgur.com/Sd1AgUOm.jpg',
  }
});

// 위 객체에서 city만 변경해주고 싶다고 한다면!!

setPerson({
  ...person,       // person을 복사해서 새로운 객체를 만들어 준다.
  artwork: {       // 그 안의 artwork를 변경할 건데
    ...person.artwork, // person.artwork 객체의 값을 복사한 새로운 객체를 만들어주고
    city: 'New Delhi' // city 프로퍼티의 값을 바꿔준다.
  }
});

 

배열 state 변경 시 주의할 점

중첩 배열로 된 state를 변경할 때도 중첩 객체와 마찬가지로 안에 있는 값까지 한번 더 얕은 복사를 실시해 참조값을 완전히 끊어줘야 한다.

 

또한 배열 state 변경시에 추가로 주의해야 할 점들이 있는데,  아마 리액트에서 배열 state를 변경하다보면 다음과 같은 현상을 겪었던 적이 적어도 한두 번은 있을 것이다.

• react에서 push나 pop 등으로 state변경을 해준다면 리렌더링이 일어나지 않는다.
• sort함수를 그대로 적용하려고 한다면 원본을 변경할 수 없다는 오류가 난다.

기존 배열 state를 그대로 변경해주려고 했기 때문에 위와 같은 오류를 만난 것이다.

다음은 공식문서에서 배열을 이용하여 값을 추가, 삭제, 교체, 정렬을 하는 방법을 소개하고 있는 문서에서 가져온 표이다. 표 왼쪽의 메소드들은 모두 원본 배열 자체를 변경 시키는 메소드고, 오른쪽의 메소드들은 새로운 배열을 만드는 방법이다. 표의 오른쪽 방법을 이용해 새로운 배열을 만들어 전달해야만 배열 state를 정상적으로 변경할 수 있다.

 

얕은 비교와  React.Memo, useCallback

얕은 비교에 대해서 말이 나와서, 공식문서에서 얕은 비교가 또 어디에 사용되고 있는지 찾아보았다. 바로 React.memo에서 사용되고 있다고 나온다.

 

위에서 언급한 것처럼 리액트에서는 props가 변경될 때 리렌더링이 발생한다. props에 변경이 없는데도 불구하고, 매번 재렌더링 된다면 비효율적이기 때문에 React.memo를 사용하면 얕은 비교를 수행할 수 있도록 할 수 있다. 이 때, props에 전달되는 값이 기본형 데이터라면 얕은 비교를 통해서 React.memo가 제대로 작동하겠지만, 참조형 데이터라면 부모에게서 전달받은 데이터가 매번 새로운 주소값을 가지기 때문에 얕은 비교를 하는 React.memo만 통해서는 원하는 대로 최적화를 할 수 없다.

 

예를 들어, A 부모, B 자식 컴포넌트가 있고, 부모 컴포넌트에서 자식 컴포넌트에게 어떤 함수를 props로 내려준다고 해보자. 이 함수는 부모가 렌더링 될 때마다 새로운 참조값을 사용할 것이기 때문에 불필요하게 메모리를 많이 잡아먹을 것이며, 참조값이 매번 다르기에 React.Memo를 사용하더라도 얕은 비교를 통해 props값이 다르다고 생각해서 매번 다시 호출될 것이다.

 

이 때, useCallback을 이용하여 렌더링 간에 함수가 재할당 되더라도 동일한 참조를 유지할 수 있도록 도와주면 React.Memo가 제 역할을 할 수 있도록 할 수 있다.

useCallback Hook을 사용하면 shouldComponentUpdate가 계속 작동하도록 다시 렌더링간에 동일한 콜백 참조를 유지할 수 있습니다.

const memoizedCallback = useCallback(() => {  doSomething(a, b);
}, [a, b]);

 

 

참고

- https://beta.reactjs.org/reference/react/useState

- https://velog.io/@yejinh/useCallback%EA%B3%BC-React.Memo%EC%9D%84-%ED%86%B5%ED%95%9C-%EB%A0%8C%EB%8D%94%EB%A7%81-%EC%B5%9C%EC%A0%81%ED%99%94

- https://www.daleseo.com/react-hooks-use-callback/