[React] Life Cycle의 개념

1) LifeCycle 정의

• React는 컴포넌트 단위로 UI를 화면에 보이게하고, UI를 바꾸고, 현재 UI를 화면에 없앤다.
• 각각의 컴포넌트들은 생성-> 업데이트 -> 제거 단계를 겪는 생명주기(LifeCycle)를 가지고 있다.

2) LifeCycle API

• React는 컴포넌트를 DOM 위에 생성하여 Rendering(화면에 보이기) 한다.
• 여기서 컴포넌트가 DOM 위에 생성 시간 상황에 따라 실행되는 메소드들이 LifeCycle API
• 컴포넌트가 DOM 위에 생성 할 때 나타나는 상황 : 컴포넌트가 DOM 위에 처음 생성될 때(Mounting), props나 state와 같은 데이터가 변경되어 업데이트 되었을 때(Update), 컴포넌트가 DOM에서 사라질 때(Unmonting) 

 

• 컴포넌트 생성시: constructor -> componentWillMount -> render -> componentDidMount 순으로 진행
• 컴포넌트 제거시: componentWillUnmount 메소드만 실행
• 컴포넌트의 props 변경시: componentWillReceiveProps -> shouldComponentUpdate -> componentWillUpdate-> render -> componentDidUpdate 순으로 진행
• 컴포넌트의 state 변경시: shouldComponentUpdate -> componentWillUpdate-> render -> componentDidUpdate 순으로 진행

LifeCycle API는, 컴포넌트가 DOM 위에 생성되기 전 후 및 데이터가 변경되어 상태를 업데이트하기 전 후로 실행되는 메소드들이다.(constructor / componentWillMount / componentDidMount ...)

 

생명 주기, 즉 Life Cycle은 리액트에서 컴포넌트를 다루는 중요한 개념으로 라이프사이클을 다루는 것은 컴포넌트가 생겨나고, 변화하고, 없어지는 일련의 프로세스를 프로그래머가 통제하는 것을 뜻합니다.

우리는 실제로 HTML을 작성한 것이 아니고 JSX를 작성했기 때문에, 이런 부분들을 알아야 합니다.

 

라이프사이클은 순차적으로 실행되고, 굉장히 효율적으로 업데이트 됩니다.

 

Lifecycle API 메소드는 클래스형 컴포넌트에서만 사용이 가능합니다. 함수형 컴포넌트에선 useEffect Hook이 대신 그 역할을 합니다.

 

컴포넌트 화면 렌더링 관련 LifeCycle(Mounting)

1. constructor 클래스 생성자 : 컴포넌트가 처음 컴파일되고 만들어질 때 실행되며, 기본 state를 지정할 수 있다. 이후 화면이 변경하거나 다시 나타나도 실행되지 않음.

2. componentWillMount : 컴포넌트가 DOM 위에 만들어지기 전에 실행됩니다.

3. 실제 로딩이 이루어지는 render : 컴포넌트 렌더링을 담당합니다.

constructor메소드가 실행된 이후에는 render 메소드가 실행됩니다. 이 메소드가 실행되면서 JSX가 HTML로 변환되어 우리가 보는 웹 브라우저에 나타나게 됩니다.

 

그러나 한가지 명심해야 할 점은, render메소드는 컴포넌트가 로딩될 때에도 실행되지만 컴포넌트의 데이터 (state, props)가 업데이트 되었을 때에도 동작한다는 점 입니다. 그렇기 때문에, render 메소드에서 setState나 props를 변화시키는 메소드를 가능하면 수행하지 않는 것을 추천합니다.(무한루프가 발생할 가능성이 있음)

 

3. 처음 로딩이 끝난 뒤에 수행되는 componentDidMount : 컴포넌트가 만들어지고 첫 render를 한 후 실행되는 메소드로 여기서 비동기처리, 기타 자바스크립트 프레임워크를 연동합니다.

 

mounting의 마지막 부분입니다. render 메소드에 있는 모든 부분들이 브라우저에 나타나게 되었을 때만 실행되는 메소드 입니다. 컴포넌트의 데이터가 업데이트 되어도 이 메소드는 다시 수행되지 않습니다.

 

오직 초기 컴포넌트의 로딩 이후에 한번만 실행되는 라이프사이클 메소드 입니다. 이제 여기서 DOM을 직접 조작할 수 있게 됩니다. (하지만 리액트는 DOM조작을 직접 하지 않고도 많은 일을 할 수 있습니다.)

 

상태 변경 관련 LifeCycle(Update)

리액트는 컴포넌트의 업데이트 감지를 오직 현재 컴포넌트에서 state나 props의 변경 유무로만 판단합니다.

 

state의 변경이 일어나면 리액트는 효율적으로 state의 변경사항을 감지해 다시 변경된 부분을 그려줍니다.

 

변경이 완료된 이후 수행되는 componentDidUpdate : 컴포넌트에서 render()를 호출하고 난 다음에 발생. 최초의 render에서는 호출되지 않는다. component가 없데이트 되었을 때 작동합니다.

 

컴포넌트의 변경이 완료되었을 때에 수행되는 메소드로, 조금 복잡한 작업을 수행하기에 최적화 되어있는 메소드 입니다. render메소드가 실행되어 업데이트 된 state, props와 업데이트 되기 전인 state, props를 가지고 비교 작업을 가능하게 해 줍니다.

 

컴포넌트 화면 사라지는 경우(Unmounting)

컴포넌트에게 안녕을, componentWillUnmount : 컴포넌트가 DOM 에서 사라진 후 실행되는 메소드입니다.

여기서는 우리가 컴포넌트 내에 할당해 놓았던 여러가지 변수들을 해제시켜줄 수 있습니다. 필수적인 제거, 유효하지 않은 타이머, 네트워크 요청 취소, 구독 해제 같은 일들을 할 때 호출.(setInterval, eventListener 같은 것들)

 

(출처 : https://velog.io/@sdc337dc/Class-Component%EC%9D%98-Life-Cycle , https://ljh86029926.gitbook.io/coding-apple-react/2/undefined-1/what-is-life-cycle )

라이프 사이클이 뭔데? - React