[React] 컴포넌트의 라이프 사이클

모든 리액트 컴포넌트에는 라이프사이클(수명주기)이 존재한다 컴포넌트의 수명은 페이지에 렌더링 되기 전인 준비과정에서 시작해서 페이지에서 사라질 때 끝난다

리액트 프로젝트를 진행하다 보면 가끔 컴포넌트를 처음으로 렌더링 할 때 어떤 작업을 처리해야 하거나 컴포넌트를 업데이트 하기 전후로 어떤 작업을 처리해야 할 수도 있고, 불필요한 업데이트를 방지해야 할 수도 있다

이때는 컴포넌트의 라이프사이클 메서드를 사용해야 한다 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있다 함수형 컴포넌트에서는 사용할 수 없는 대신 Hooks기능을 사용하여 비슷한 작업을 처리하 수 있다 

라이프사이클 메서드의 이해

라이프사이클 메서드의 종류는 총 아홉 가지이다 Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드이고, Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드이다

이 메서드는 컴포넌트 클래스에서 덮어써 선언함으로써 사용할 수 있다

라이프사이클은 총 세가지 마운트, 업데이트, 언마운트  카테고리로 나눈다

마운트

DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트(mount)라고 한다 이때 호출하는 메서드가 있다

constructor -> getDerivedStateFromOrops -> render -> componentDidMount

• constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드이다 
• getDerivedStateFromOrops : props에 있는 값을 state에 넣을 때 사용하는 메서드이다
• render : 사용자가 준비한 UI를 렌더링 하는 메서드이다
• componentDidMount : 컴포넌트가 웹 브라우저상에 나타난 후 호출되는 메서드이다

업데이트

컴포넌트는 다음과 같은 총 네 가지 경우에 업데이트된다

1. props가 바뀔 때
2. state가 바뀔 때
3. 부모 컴포넌트가 리렌더링 될 때
4. this.forceUpdate로 강제로 렌더링을 트리거할 때

이렇게 컴포넌트를 업데이트할 때는 다음 메서드를 호출한다

업데이트 요인 : props, state변경이 있거나 부모 컴포넌트가 리렌더링 될 때

getDerivedSlateFromProps -> shouldComponentUpdate -> render -> getSnapshotBeforeUpdate -> componentDidUpdate

• getDerivedSlateFromProps : 마운트 과정에서도 호출되며 업데이트가 시작하기 전에도 호출된다 props의 변화에 따라 state값에도 변화를 주고 싶을 때 사용한다
• shouldComponentUpdate : 컴포넌트가 리렌더링을 해야할지 말아야할지 결정하는 메서드이다 이 메서드에서는 '참' 또는 '거짓' 을 반환해야하며 '참'을 반환하면 다음 라이프 사이클 메서드를 계속 실행하고 '거짓'을 반환하면 작업을 중지한다 즉 컴포넌트가 리렌더링 되지 않는다 만약 특정 함수에서 this.forceUpdate() 함수를 호출한다면 이 과정을 생략하고 render 함수를 호출한다
• render : 컴포넌트를 리렌더링 한다
• getSnapshotBeforeUpdate : 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드이다
• componentDidUpdate : 컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드이다

언마운트

마운트의 반대 과정 즉 컴포넌트를 DOM에서 제거하는 것을 언마운트(unmount)라고 한다

언마운트 호출하기 -> componentWillUnmount

• componentWillUnmount : 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메서드이다