React Life Cycle 테스트

저번 포스팅에서 라이프 사이클을 Hook으로 제어하는 방법에 대해 알아봤다.

그런데 그것만으론 좀 부족한거 같아서 테스트를 해보기로 했다.

---

Mount, Unmount되는 조건은 무엇일까?

우선 가장 궁금한 부분은 '조건에 의해 컴포넌트를 출력된다면 어떻게 될까?' 였다.

다음과 같은 코드를 구성해봤다.

function TextComp() {
  const [foo, setFoo] = useState<number>(0);

  useEffect(() => {
    console.log("Component Did Mount");
    
    return () => {
      console.log("Component Will Unmount")
    }
  }, []);

  useEffect(() => {
    console.log("Foo update: " + foo);
  }, [foo]);

  return (
    <button onClick={() => setFoo(foo + 1)}>{foo}</button>
  )
}

function App() {
  const [visible, setVisible] = useState<boolean>(false);

  return (
    <>
      {visible
        ? <TextComp />
        : null
      }
      <button onClick={() => setVisible(!visible)}>내가 사라져볼게</button>
    </>
  )
}

'내가 사라져볼게'버튼을 누르면 visible변수가 바뀌면서 TextComp가 출력될수도 아닐수도 있게 되는 경우다.

결과는 과연?

다음과 같이 visible이 바뀌자 component가 mount되었다가 unmount되는 것을 확인할 수 있었다.