리액트 공부하기 - class형 컴포넌트 생명주기

 

클래스형 컴포넌트야 .. 우리 이제 그만 만나면 안될까 .. 

 

응 안돼.. 기술 면접도 봐야하고, 예전 코드도 읽을 줄 알아야지 .. 

 

---

💡✨class형 컴포넌트의 생명 주기

 

클래스형 컴포넌트가 생성될 때, 내부에 생성된 인스턴스에 상태값이 변경 될 경우, 바뀐 값에 맞춰서 리렌더링 된다.

그리고 화면에서 없어지면 인스턴스 사용이 끝나며, 생명 주기를 마치게 된다.

화면에 다시 표시할 땐, 새로운 인스턴스를 새롭게 생성하게 되고, 겪었던 생명주기 같이 겪게 된다.

 

 

1. 생성될 때.

클래스 문법으로 정의된 컴포넌트를 화면에 표시한 인스턴스가 생성되는 것과 같다.

생성될 때에는 클래스 컴포넌트에서의 컨스트럭터 함수가 실행이 되며, 인스턴스가 생성되고

생성된 인스턴스에서 렌더라는 메소드를 사용해서 화면에 컴포넌트가 표시되는 것 이다 !

 

2. 업데이트 될 때. 변경될 때

setState 함수 혹은 forceUpdate, 또는 새로운 프롭스를 받아서

뭔가 화면에 변경이 필요한 상황이 되었을 때는, 다시한번 렌더 메소드를 실행해서 리렌더링 되는 것이다.

 

3. 없어질 때

제거 되는 것은 다시 렌더함수 호출 할 필요 없으니, 그런 단계는 거치지 않게 된다.

---

 

이러한 생명 주기를 갖는데..

생명 주기에 따라, 또는 중간 중간에 따라 뭔가 특정한 조작을 해주고 싶을때 ! 사용할 수 있는 함수들이 있다.

* 클래스형에서만 사용 가능하다.

 

컴포넌트가 생성 될 때 >> 뭔가 조작하고 싶다 >> componentDidMount

 

컴포넌트가 리랜더링 될 때 >> 뭔가 조작하고 싶다 >> componentDidUpdate

 

컴포넌트가 언마운트 될 때 >> 뭔가 조작하고 싶다 >> componentWillUnmount 라는 함수를 사용할 수 있게 된다.

 

→ 이러한 함수들은 클래스형 컴포넌트의 생명 주기 메소드이다.

 

---

✨componentDidMount

→ 컴포넌트가 처음으로 화면에 나타났을 때(= 마운트될 때) 실행하는 함수.

이게 왜 필요하냐면... 또는 주로 어떨 때 사용하냐면..

- API 호출

- DOM 조작

- 타이머 설정

- 외부 라이브러리 초기화 등

✨componentDidUpdate

→ 컴포넌트가 업데이트된 후 실행 (state나 props가 바뀐 후)

이게 왜 필요하냐면... 또는 주로 어떨 때 사용하냐면..

 

특정 props나 state가 바뀌었을 때, 뭔가 반응하고 싶을 때,

이전 값과 비교해서 조건 처리할 때

✨componentWillUnmount 

→ 컴포넌트가 화면에서 사라지기 직전에 실행되는 함수.

이게 왜 필요하냐면... 또는 주로 어떨 때 사용하냐면..

 

리소스 정리를 할 필요가 있을 때 사용해.

예: 타이머 제거, 이벤트 리스너 제거, 웹소켓 연결 종료, 메모리 누수 방지 등

 

 

하지만 클래스형은 비교적 사용이 덜 하는 추세이다 ! 

---

출처 : 챗지피티, 오즈코딩스쿨