라이프사이클

라이프사이클에 대해서 알아보기전에 "가상돔"에서 대해서 먼저 알아보자!

 

1. DOM이란?

DOM은 html 단위 하나하나를 객체로 생각한다.

예를 들면, 'div태그'라는 객체는 텍스트 노드, 자식 노드 등등, 하위의 어떤 값을 가지고 있는데 이런 구조를 트리 구조 

라 한다. 

 

DOM 트리 구조 중, 어느하나가 수정되면, 그럴때마다 모든 DOM을 뒤지고 수정을 한다면 필요없는 연산이 많아진다.

그러한 과부하를 방지하기위해 "가상돔"을 사용한다.

 

2. 가상돔이란?

 메모리에서 돌아가는 가자 DOM이라고 생각하면된다.

 

※ 동작방식 : 기존 DOM과 어떤 행동이 이루어진 이후 새로 그린 DOM(가상돔에 올라갔다고 표현) 을 비교해서 

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

 

→ DOM은 "페이지를 처음 진입했을떄" , "데이터가 변했을때" 와 같은 행동이 이루어졌을때 DOM을 새로그린다. 

 

3. 라이프사이클이란?

이것은 쉽게말해서 컴포넌트의 생명주기와 같다.

컴포넌트가 랜더링을 준비하는 순간 부터 페이지에서 사라질때까지가 하나의 라이프사이클이라고 보면된다. 

 

자세한 내용은 공식문서를 참고하자.

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

State and Lifecycle – React

 

또한, 공식문서에서 라이프사이클에 대한 흐름을 도표로도 간단하게 보여주고있다.

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

React Lifecycle Methods diagram

 

컴포넌트는 크게 생성, 업데이트(수정), 삭제 되는 과정을 라이프사이클이라고 보면은되는데

 

- 생성 : constructor 생성자 함수를 통해 불러오는 단계

- 업데이트(수정) : 데이터가 바뀌거나 부모 컴포넌트가 렌더링할때 등등 

                        "props 가 바뀔떄" , "state가 바뀔때" , "부모 컴포넌트가 업데이트 될떄(=리랜더링)" ,

                        "강제 업데이트 할떄(forceUpdate())" 

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

 

4. 자주사용되는 라이프사이클 함수

* LifecycleEx.js 

import React from "react"; // 클래스형 컴포넌트! class LifecycleEx extends React.Component { // 생성자 함수      constructor(props) {          super(props);           this.state = { cat_name: '나비', };            console.log('in constructor!'); }        changeCatName = () => {        // state 업데이트 하는 방법        this.setState({cat_name: '바둑이'});        console.log('고양이 이름을 바꾼다!'); }        componentDidMount(){            console.log('in componentDidMount!'); }        componentDidUpdate(prevProps, prevState){             console.log(prevProps, prevState);            console.log('in componentDidUpdate!'); }         componentWillUnmount(){            console.log('in componentWillUnmount!'); } // 랜더 함수 안에 리액트 엘리먼트를 넣어준다. render() {     console.log('in render!');          return (       <div>          {/* render 안에서 컴포넌트의 데이터 state를 참조할 수 있습니다. */}         <h1>제 고양이 이름은 {this.state.cat_name}입니다.</h1>         <button onClick={this.changeCatName}>고양이 이름 바꾸기</button>       </div>    );   } } export default LifecycleEx;

* 참고내용

① constructor() : 생성자함수라고불리우며, 컴포넌트가 생성되면 제일 처음 불리는 녀석

② render() : 컴포넌트 모양을 정의하는 녀석이다. state, props 에 접근하여 데이터를 보여줄수있다. 하지만 수정을 할

                 순 없다. 리액트 요소는 return에 넣어 반환을 하므로 render는 컴포넌트 모양에만 관여하는것이 가장 좋다.

③ componentDidMount() : 컴포넌트가 화면에 나타내는것을 일컫는다.(=Mount) 즉, DidMount는 마운트가 완료되었다

                                    는 의미!

                                    첫번째 랜더링 될때만 실행이되며, 리랜더링될떄에는 실행되지않음 

                                    (보통, ajax 요청, 이벤트 등록, 함수호출 등 작업을 처리) 

                                     → 가상돔이 실제돔으로 올란간 이후이므로, DOM관련 처리도 가능하다. 

④ componentDidUpdate(prevProps, prevState, snapshot) : 

    DidUpdate()는 리렌더링을 완료한 후 실행되는 함수이다. 

     ※ 여기에서 가장 중요한 함수 2가지 → prevProps , prevState 이다.  각각 업데이트 되기 전 props, state인데

        이전 데이터와 비교할 일이 있다면 가져다 쓰도록 한다.

        DidUpdate()가 실행될 때도 가상돔이 실제돔으로 올라간 후니까 DOM 관련 처리를 해도 된다. 

⑤ componentWillUnmount() : 컴포넌트가 DOM에서 제거될때 실행되는 함수, 예를들어 스크롤 위치를 추적하거나 

                                        이벤트 리스너를 등록했다면 꼭 해제를 해줘야한다. 그렇지않으면 컴포넌트없이 

                                         이벤트만 남겨두는 상황이 발생할 수 있다. 

 

 

※ 참고

strictmode → <React.StrictMode> 라는 녀석이 <App/> 를 감싸고있을때 이 기능이 실행이 되는데 

                   내가 만든 어플리케이션이 문제가 없는지 좀더 깐깐하게 확인하기 위한 모드 

                   (그래서 render , constructor 가 두번씩 찍히는거다.)