react에서 key값이 변하는경우, 조건부렌더링의 경우 컴포넌트는 Mount, unMount과정을 거친다.
<>
const [seconds, setSeconds] = useState(0);
useEffect(()=>{
setTimeout(()=>{
setSeconds( v => v+1);
},1000)
})
return(
<Counter key={seconds} /> //key 값이 바뀔떄마다 mount
{seconds % 2 === 0 && <Counter />} //조건을 만족할떄마다 mount
)
</>
mount시에 새로 엘리먼트를 그리기 떄문에 개발자툴에서 해당 엘리먼트를 찍어보면 div가 펼쳐졌다가 감춰졌다한다.
Tip!!
조건부 렌더링은 &&앞의 조건이 모두 만족할때 뒤의 코드를 실행한다.
ex) { seconds % 2 == 0 && <Counter />}
이는 seconds가 짝수일떄마다 Counter컴포넌트를 그린다.