컴포넌트가 사라지면 컴포넌트 안에 작성한 기능도 함께 사라진다 ?

안녕하세요 프런트엔드 개발자 웹 코기입니다.

리액트로 작업하던 중 console.log가 찍히지 않아 헤매다가 새로운 사실을 발견해 정보 공유합니다.

 

 

원하는 작업순서

1. 로그인을 하면 <Signup /> 컴포넌트를 보이지 않게 만든다.

2. 아래 이미지와 같이 <Signup /> 안에 useEffect에 있는 console.log를 찍어 value를 확인한다.

 

 

특정값이 모두 만족될 때만 컴포넌트를 호출하도록 설정

 

console.log() 로 value 확인

 

콘솔이 찍히지 않는다?

위처럼 작업했지만 콘솔이 찍히지 않고 증발(?)했어요

그래서 컴포넌트를 유지한 채로 콘솔을 찍어보니 찍혔습니다.

 

<Signup />를 display:none 하지 않은채로 콘솔을 찍으니 정상동작 확인 !

 

당연해 보일 수 있는 결과지만,

기존에는 컴포넌트 안에 return()에 있는 DOM만 사라지게 하고 영향을 끼치지 않는 줄 알았습니다.

하지만 컴포넌트안에 함수 변수 등 작성된 모든 기능에도 영향을 준다는 사실을 알 수 있었어요!!