Class 컴포넌트의 생명주기 메서드

연관 내용
[useEffect: 함수형 컴포넌트의 생명주기]

컴포넌트의 생명주기는 컴포넌트가 브라우저에 나타나고 업데이트 되고, 사라질 때 호출되는 메서드이다.
이를 활용하면 특정 시점에 코드가 실행되도록 설정할 수 있다!

Class Component의 생명주기 메서드

사용 방법

1. render

• 화면에 그려준다.

2. componentDidMount

• 화면이 렌더됐을 때 한번 실행된다.
• 활용: input창 자동 포커싱

  componentDidMount() {
    console.log("마운트됨!");
    this.inputRef.current?.focus();
  }

3. componentDidUpdate

• 리렌더 될 때마다 실행된다. (state가 변경될 때)

  componentDidUpdate() {
    console.log("수정되고 다시 그려짐!");
  }

4. componentWillUnmount

• 컴포넌트가 화면에서 사라질 때 실행된다.
• 활용: 나가기 버튼을 누르지 않고 비정상적인 방법으로 (ex.다른 메뉴를 눌러서) 채팅방을 나갈 경우, 채팅방 나가기 api 요청

  componentWillUnmount() {
    console.log("컴포넌트 사라짐!");
  }

componentDidMount에서 ref 활용하기

1. createRef 메서드를 import 받는다.

2. Ref 코드를 생성한다.

3. 접근할 태그에 Ref를 적용한다.

4. 함수에서 사용한다.