[D+78] React Lifecycle

 

 

D+78

- React Lifecycle -

( 리액트 생명주기 )

 

---

 

 

Lifecycle

리액트에서의 라이프싸이클은 우리의 인생과도 비슷한 면이 있는데

인생에 있어서 중요한 순간을 적어보자면

• 태어날 때

• 성인이 될 때

• 결혼을 할 때

• 죽음을 앞두고 있을 때

보편적으로 이러한 것들이 있을 수 있겠다.

 

이처럼 리액트에서 컴포넌트에서도 중요한 순간이 존재하는데

 

크게 3가지로 생성, 업데이트, 제거로 나눌 수 있다.

 

이때 컴포넌트에서는 중요한 순간마다 컴포넌트를 렌더링하게 되는데

이를 다이어그램으로 표현한 그림이 바로 이 사진이다.

 

리액트에서는 이 3가지를 표현해주기 위해서 사용하는 메서드가 있는데

바로 componentDidMount, componentDidUpdate, componentWillUnmount 이다.

 

해당 메서드들을 사용해 주기 위해서 가장 기본적인 조건은

라이프사이클 메서드는 함수에서 쓸 수 없고 클래스에서 사용해야 한다는 점이다.

 

이 메서드들을 사용하는 이유는 만약 우리가 요청을 보낼 때

render와 constructor 같은 경우는 비동기 요청을 호출할 수 가 없다.

 

하지만 라이프사이클 메서드 같은 경우에는 비동기 요청이 가능해 진다고 한다.

 

( 반드시 외우고 있자!! )

 

 

Lifecycle method 사용해 보기

일단 리액트에서 클래스를 사용해 버튼을 누르면 숫자가 올라가는 컴포넌트를 만들어 보았다.

 

이때 여기서 라이프사이클 메서드를 추가해주었을 때의 모습을 확인해 보자

 

componentDidMount( )

componentDidMount는 생성될때 현상이 나오는 것으로 새로고침을 눌렀을때

콘솔창에서 자연스럽게 바로 내용이 떠있는 것을 확인할 수 있다.

 

componentDidUpdate( )

componentDidUpdate는 상태가 변할때마다 콘솔창에서 결과를 보여주는 것을 확인할 수 있다.

 

componentWillUnmount( )

componentWillUnmount는 만약내가 임의로 count up버튼을 지웠을때 나오는 것을 확인할 수 있다.

 

이때, 버튼이 지워지면서 콘솔창에 '제거할 때'만 보여지는 것이 아닌 '생성할 때'가 보여지는 것은

버튼이 지워지면서 어찌되었든 렌더가 되었기 때문이라고 할 수 있다.