[복습]React 주요 개념정리 - 라이프사이클

1. 가상돔이란?

DOM은 html 단위 하나하나를 객체로 생각하는 모델인데, div태그라는 객체는 텍스트 노드, 자식노드 등등 하위 어떤값들을 가지고 있기때문에 DOM은 트리구조라고한다.

 

DOM 트리 중 하나가 수정될때 필요없는 연산을 없애기 위해 나온게 가상돔이다.

 

* 가상돔의 동작방식

 1) 기존 DOM에서 어떤 동작을 수행한다.

 2) 새로 그린 DOM과 비교를 한다.(가상돔에 올라갔다고 표현)

 3) 바뀐부분만 갈아끼워준다.

 

DOM이 새로그려지는 상황은 처음 페이지 진입했을때, 데이터가 변했을때 다.

 

2. 라이프 사이클이란?

컴포넌트가 렌더링을 준비한 순간부터 페이지에서 사라질때까지가 라이프 사이클이다.

 

참고 공식문서

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

State and Lifecycle – React

 

1. 생성

  - 처음으로 컴포넌트를 불러오는단계

2. 업데이트(수정)

  - 사용자의행동(클릭,데이터입력 등)으로 데이터가 바뀌거나 부모 컴포넌트가 렌더링 할 떄

     props가 바뀔때, state가 바뀔때, 부모 컴포넌트가 업데이트 되었을때(=리렌더링), 강제로 업데이트할때 

3. 제거

  - 페이지를 이동하거나 사용자 행동(삭제버튼 클릭 등)으로 컴포넌트가 화면에서 사라질경우 

 

참고로 라이프 사이클 함수는 클래스형 컴포넌트에서만 사용이된다.

실제로 리액트에서는 함수형컴포넌트를 사용하기를 권장하고 있고 실제로도 더 많이 쓰이고 있다.

라이프사이클 함수를 리액트 훅 으로 대체가 가능하기때문!

 

그렇기때문에 라이프사이클 함수들이 어떤 역할을 하는지 정도는 복습하고 넘어가자.

 

1. constructor() : 생성자 함수이고, 컴포넌트가 호출되면 가장 먼저 호출되는 함수

2. render() : 컴포넌트의 모양을 정의해주는 친구, state,props에 접근해서 데이터를 보여줄수도있다.

3. componentDidMount() :

   이 함수는 첫번째 렌더링 된 이후 딱 한번만 실행이 되는 함수이다. 리렌더링 할때는 실행되지 않는다.

   ajax요청, 이벤트 등록, 함수 호출 , DOM관련 처리 등에 대한 작업을 처리한다.

4. componentDidUpdate(prevProps, prevState, snapshot) :

    리렌더링을 완료한 후 실행되는 함수이다. prevProps 와 prevState는 각각 업데이트 되기 전의 props 와 state 

    이고 이 값을 비교할 일이 있다면 가져다 사용하면된다. 여기에서도 DOM관련처리를 해도 좋다.

5. componentWillUnmount() : 

     컴포넌트가 DOM에서 제거될때 사용하는 함수이다. 

      만약 스크롤 위치 추적, 이벤트 리스너를 등록했다면 여기에서 필수로 해제 해줘야한다. 이벤트를 남겨둘 필요X