반응형
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" />}
반응형
'Basic > React' 카테고리의 다른 글
Vite에서 CORS에러 해결하는 방법 (0) | 2023.09.06 |
---|---|
react-query와 fetch (0) | 2023.06.14 |
React Query의 staleTime과 cacheTime 차이 (0) | 2023.06.08 |
concurrently 라이브러리 사용 방법 (0) | 2023.03.22 |
[React] Minified React error 해결 (0) | 2023.03.20 |