리마운트를 막아보자!

https://codesandbox.io/s/unmount-test-with-keys-sl0o3

회사에서 리마운트 될 필요가 없는 컴포넌트가 있는데 자꾸 리마운트가 되서..

Test1 컴포넌트는 리마운트 될 필요가 없는 얘다. 리액트 diff 알고리즘상 Test1은 Test2가 append되서 새로운 컴포넌트로 판단된다. 그래서 key를 이용하여 얘는 동일 컴포넌트입니다? 라는걸 알려줘서 리마운트 안되도록 해결.

사실 key가 동일 컴포넌트입니다? 라고 말하는 건지 모르겠지만 일단 적어놓고 나중에 조사해야지..

요약의 요약

Diff 알고리즘을 O(N^3)에서 O(N)으로 줄이기 위한 2가지 가정

1. 2개의 다른 타입의 엘리먼트는 다른 트리를 생성한다

2. 개발자는 key prop으로 어떤 자식 요소가 stable한지 리액트에게 알려줄 수 있다.

3. 2개의 다른 타입 엘리먼트

4. 루트 엘리먼트가 다를 경우

<div>
  <Counter />
</div>

<span>
  <Counter />
</span>

기존 컴포넌트 언마운트되고 새로운 컴포넌트 마운트되서 DOM이 추가된다.(기존 컴포넌트의 상태 사라짐)

• (반대로) 동일한 타입의 DOM 엘리먼트

DOM노드를 유지하며 (리마운트 하지 않고) 변경된 속성만 업데이트 한다.(이로 인해 기존 컴포넌트 상태 유지)

<div className="before" title="stuff" />

<div className="after" title="stuff" />

1. key를 이용하여 stable한 컴포넌트 알려주기

리액트는 뒤에 추가되는 컴포넌트에 대해서만 효율적으로 동작한다. 즉, 1,2번 컴포넌트 뒤에 3번 컴포넌트가 추가된 경우 "1,2번 컴포넌트 뒤에 3번이 추가됐으니까 1,2번은 그대로 두고 3번 컴포넌트만 추가하면 되구나"라는 걸 안다.

하지만 1번 컴포넌트 앞에 3번 컴포넌트가 추가된 경우 모든 트리를 언마운트 후 리마운트 한다. 이를 해결하기 위해 key를 이용한다.

• key는 가급적 유니크 ID를 이용

  • 재정렬 할 컴포넌트가 아니라면 인덱스로 사용해도됨.

• 만약 재정렬되는 컴포넌트에 index를 사용할 경우, 문제 발생한다.

  • 문제는 컴포넌트 인스턴스는 키에 따라 업데이트되거나 리마운트 되거나 재사용되기 때문이다.

FAQ

Q. Diffing 알고리즘이란? A. 2개의 트리의 차이점을 비교하는거다. 리액트는 먼저 2개의 root element를 비교한다. diffing 동작은 루트 엘리먼트의 타입에 따라 다르다.