Lifecycle 함수들 이해 하기

리액트는 문서화가 잘되어 있기 때문에 필요한 지식을 금방 얻을 수 있다....(아래 참고사이트 참조)

 

라이프사이클을 클래스에 어떻게 추가하는지에 대해서 나와있다.

habit이라는 것은 동적으로 생서되서 추가가 되는데 이미 세 가지가 들어있는 경우도 있고 추가하게 되면 새로운 컴포넌트가 만들어진다.

새로운 데이터를 네트워크 통신을 통해서 받아 오거나 타이머를 시작하거나 하게 하는 것이 라이프사이클 함수이다.

컴포넌트 클래스를 상속하게 되면 PureComponent도 컴포넌트를 상속하기 때문에 똑같다.

이렇게 클래스를 이용하면 라이프사이클 메소드를 이용할 수 가 있는데, 컴포넌트가 DidCatcth할 때

에러같은 것을 캐치 했을 때 컴포넌트가 등록이 되었을 때, 업데이트 되었을 때, 마운트가 될 때 이런것들 컴포넌트가 props을 받을 때 컴포넌트가 언마운트 될 때, 컴포넌트가 업데이트 할 때 각각 이런 상황일 때 각각 라이프사이클에 따라서 함수를 구현해 놓으면 리액트가 알아서 함수를 호출 해준다. 

그래서 이런 함수들 중에 원하는 상황에 따라서 특정한 기능을 수행해야 된다면 리액트가 자동적으로 해당하는 상황에 맞게 구현한 함수를 호출해준다. 기본적으로 ComponentDidMount랑 WillUnmount 이런것을 많이 구현한다.

간단하게 로그만 출력해보면

Eating을 추가하게 되면 eating mounted라고 나온다. 그리고 삭제를 하면 eatng will unmount라고 나온다.

그래서 ComponentDidMount는 컴포넌트가 UI상에 등록되었을 때 사용자에게 보여질 때 호출이 되고 WillUnmount는 지우기 전에 호출이 된다. 컴포넌트가 마운트가 되고 나서 데이터를 받아 오거나 컴포넌트가 보여질 때 로딩스피너를 보여줘야 한다던지 그런 작업을 할 때 함수를 구현 해놓으면 리액트가 자동적으로 이런 함수를 호출해준다. 반대로 컴포넌트가 언마운트될 때 즉 UI상에서 내려올 때 없어질 때 해줘야 되는 그런 기능도 있다면 구현하면 된다.

 

보통은 타이머라면 타이머를 시작하고 중지하고 실시간 채팅 대화가 이루어지면 소켓이나 이런 거 초기화 하는 부분을 여기에서 다시 정리하고 리소스를 지우고 하는 것은 이러한 함수에서 한다. 이러한 라이프사이클 메소드를 상황에 맞게 알아보고 구현해보면 된다.

 

 

 

 

 

 

 

<출처 : DreamCoding 리액트 개념 정리+유튜브 클론코딩: ellie>

참고: https://academy.dream-coding.com/courses/react-basic

리액트 강의 (유튜브 클론 코딩 + 실시간 전송 명함 카드 만들기 웹앱 만들기)

https://reactjs.org/docs/state-and-lifecycle.html

State and Lifecycle – React