React 블록문 고민해볼 내용

https://codesandbox.io/s/modest-jackson-sxltyq?file=/src/App.js:0-741 

import { useState } from "react";

export default function Scoreboard() {
  const [isPlayerA, setIsPlayerA] = useState(true);
  return (
    <div>
      {/* 1 */}
      {isPlayerA && <Counter person="Taylor" />}
      {!isPlayerA && <Counter person="Sarah" />}

      {/* 2 */}
      {isPlayerA ? <Counter person="Taylor" /> : <Counter person="Sarah" />}
      <button
        onClick={() => {
          setIsPlayerA(!isPlayerA);
        }}
      >
        Next player!
      </button>
    </div>
  );
}

function Counter({ person }) {
  const [score, setScore] = useState(0);

  return (
    <div>
      <h1>
        {person}'s score: {score}
      </h1>
      <button onClick={() => setScore(score + 1)}>Add one</button>
    </div>
  );
}

 

첫 번째 방식에서는

{isPlayerA && <Counter person="Taylor" />}
{!isPlayerA && <Counter person="Sarah" />}

isPlayerA의 값이 변경될 때마다 한 컴포넌트는 DOM에서 완전히 제거되고 다른 컴포넌트가 새롭게 생성된다.

즉, Counter 컴포넌트의 인스턴스가 새로 만들어지기 때문에 상태도 초기화 된다.

이에 반해 두 번째 방식에서는

{isPlayerA ? <Counter person="Taylor" /> : <Counter person="Sarah" />}

React는 동일한 블록의 위치일 경우 Counter 컴포넌트의 인스턴스를 재사용하고자 한다. 따라서 Counter를 초기화 시키지 않고 그대로 사용한다.

즉, 다음과 같이 이해하면 쉽다.

 

1번은
{ isPlayerA가 있으면 테일러 }
{ isPlayerA가 없으면 사라 }

2번은
{ isPlayerA가 있으면 테일러, 그게 아니라면 사라 }

 

만약, 2번 방식처럼 하는데도 Counter 재사용을 하고 싶지 않다면, key를 추가하여 재사용을 방지할 수 있다.

{isPlayerA ? <Counter key="playerA" person="Taylor" /> : <Counter key="playerB" person="Sarah" />}