Mount, unMount

aptakqmf12·2021년 10월 29일
0

React

목록 보기
1/13
post-thumbnail

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컴포넌트를 그린다.

profile
프론트엔드개발

0개의 댓글