리액트의 라이프사이클

[ 라이프 사이클(Life Cycle) ]

리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리

그러다보니 각각의 컴포넌트에는 라이프사이클 즉 컴포넌트의 수명 주기가 존재함

컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질때 끝이 남

 

라이프 사이클을 다루는 것은 컴포넌트가 생성, 업데이트, 제거의 일련의 프로세스를 프로그래머가 통제하는 것을 뜻함

실제로 HTML을 작성한 것이 아니고 JSX를 작성했기 때문에 이런 부분들을 알아야 하는 것

라이프 사이클을 이해하게 되면 왜 그동안 리액트에 render 메서드를 작성만 했는데도 브라우저에게 어떻게 HTML을 만들어 주었는지 알 수 있게 됨

생성자를 통해서 필요한 메모리를 할당하고 객체의 역할이 끝나면 소멸자를 통하여 메모리를 반환

컴퓨터의 자원은 한정적이기 때문에 역할이 끝나면 모든 메모리를 반환해야 메모리 누수에 대한 문제가 생기지 않고 더 좋은 성능을 발휘할 수 있음 라이프 사이클이 있는 이유는 메모리 비우기가 가장 큰 이유

 

▶ 라이프 사이클의 분류

라이프 사이클은 9가지로 분류되며 크게 세 가지 유형으로 나눌 수 있음

• 생성될 때(마운트)
• 업데이트 될때(업데이트)
• 제거할 때(언마운트)

클래스형 라이프 사이클(https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/)

Component 단위로 UI를 화면에 보이게 하거나 다른 UI로 변경하거나 현재 보이는 UI를 화면에서 제거할 수 있음

따라서 각 Component들을 생성(Mounting)하고 업데이트(Updating)하고 제거(Unmounting)하는 단계를 차례로 겪는 생명주기(Life Cycle)를 가지고 있는 것

제대로 된 기능을 수행하려면 자동으로 업데이트되는 과정에 끼어들어서 데이터를 가공하기도 해야함

따라서 라이프사이클에서 각 단계별로 필요한 순간에 필요한 작업들을 끼워넣을 수 있는 메서드들이 존재

 

함수형 라이프 사이클 (https://wavez.github.io/react-hooks-lifecycle/)

 

React 16.8 Hooks 업데이트되면서 함수형 방식에서도 라이프사이클을 다룰 수 있게 됨

 

함수형 컴포넌트의 생명주기는 컴포넌트가 호출이 되면 컴포넌트 내부에서 return을 통해 화면을 렌더링하고 useEffect가 실행되게되는데 useEffect를 통해서 상태의 변경 컨포넌트의 소멸등의 이벤트를 관리함

 

함수형의 라이프 사이클 순서

1. 컴포넌트가 호출(부모 컴포넌트에서 import됨)
2. state가 초기화 되는 등 컴포넌트 내부의 코드가 실행(컴포넌트 return문 바깥의 코드들)
3. 컴포넌트가 렌더링(컴포넌트 return문 안의 렌더링 될 html(JSX)요소들)
4. useEffect 내부의 코드가 실행(useEffect return문 바깥의 코드들)
5. useEffect의 return 콜백 함수가 실행
6. state가 업데이트 될 때마다 2~5번의 과정을 반복

 

▶ 라이프 사이클 메서드

용어	설명
~ will	어떤 작업을 수행하기 전에 실행되는 메서드와 관련된 용어
~ did	어떤 작업을 수행한 이후에 실행되는 메서드와 관련된 용어
mount	컴포넌트 내에서 DOM이 생성되고 웹 브라우저 상에 나타나는 메서드와 관련된 용어
unmount	컴포넌트 내에서 DOM을 제거하는 메서드와 관련된 용어
update	컴포넌트 내에서 변화가 발생하였을 때 수행하는 것

 

Mount

• constructor: 컴포넌트의 생성자 메소드. 컴포넌트가 만들어지면 가장 먼저 실행됨
• getDerivedStateFromProps: props로 받아온 것을 state에 넣어주고 싶을 때 사용
• render: 컴포넌트를 렌더링하는 메소드
• componentDidMount: 컴포넌트의 첫번째 렌더링이 끝나면 호출되는 메소드
  • 이 메소드가 호출되는 시점에서 우리가 만든 컴포넌트가 화면에 나타난 상태
  • 여기서 주로 D3, masonry처럼 DOM을 사용해야하는 외부 라이브러리 연동을 하거나 해당 컴포넌트에서 필요로하는 데이터를 요청하기 위해 axios, fetch 등을 이용하여 ajax 요청을 하거나 DOM의 속성을 읽거나 직접 변경하는 작업을 진행

 

Update

업데이트는 4가지 상황

1. Props가 바뀔 때
2. State가 바뀔 때
3. 부모 컴포넌트가 리렌더링 될 때
4. this.forceUpdate로 강제로 렌더링을 trigger하는 경우
   
   • input이 달라지니 output도 달라져야 하기 때문
   • 상위 component가 update되면 하위 component도 rendering되고 다시 mount됨

• getDerivedStateFromProps: 컴포넌트의 props나 state가 바뀌었을때도 이 메소드가 호출됨
  
• ShouldComponenetUpdate: 컴포넌트가 리렌더링 할지 말지를 결정
  
• render: mount와 상동
  
• getSnapshotBeforeUpdate: 컴포넌트에 변화가 일어나기 직전의 DOM 상태를 가져와서 특정 값을 반환하면 그 다음 발생하게 되는 componentDidUpdate 함수에서 받아와서 사용할 수 있음
  
• componentDidUpdate : 리렌더링을 마치고 화면에 우리가 원하는 변화가 모드 반영되고 난 뒤 호출되는 메소드

 

Unmount

• componentWillUnmount: 컴포넌트가 화면에서 사라지기 직전에 호출

 

▶ 클래스형과 함수형 컴포넌트 라이프사이클 메소드 비교

분류	클래스형 컴포넌트	함수형 컴포넌트
Mounting	constructor()	함수형 컴포넌트 내부
Mounting	render()	return()
Mounting	ComponenDidMount()	useEffect()
Updating	componentDidUpdate()	useEffect()
UnMounting	componentWillUnmount()	useEffect() - cleanUp(return 콜백 함수)

 

클래스 컴포넌트는 라이플 사이클 메소드를 함수형 컴포넌트는 Hook을 사용