class component - lifecycle (생명주기)

클래스형 컴포넌트의 생명주기

1. componentDidMount(컴포넌트가 처음 그려질때 자동으로 실행되는 함수)

다른 패이지에서 이 페이지로 들어와서 컴포넌트가 그려질때 자동으로 실행되는 함수

componentDidMount(): void {
    console.log("그려지고 나서 실행!!")
  }

2. componentDidUpdate (컴포넌트가 변경되면 자동으로 실행되는 함수)

onClick으로 state가 변경되면 밑의 함수는 자동으로 실행되는 함수

즉 따로 호출하지 않아도 무언가가 변경되면 자동으로 실행되는 함수라는 뜻

componentDidUpdate(): void {
    console.log("변경되고 나서 실행!!") 
 // 
  }

3. componentWilUnmount (컴포넌트가 사라지면 자동으로 실행되는 함수)

onClick으로 router.push로 다른곳으로 이동하면 이것도 자동으로 실행됨)

따라서 채팅방 나가기 같은걸 실행하면 이게 자동으로 실행되게 하면 좋음, 로그아웃도 마찬가지

예시 ) 채팅방 나가기 api, 채팅방 나가기를 모든곳에 하나하나 적용하면 불필요하니깐 채팅방 내에 willamount를 넣어서 유저정보 사라지기 전에 실행

componentWillUnmount(): void {
    console.log("사라지기 전에 실행!!")
    // 
  }