생명주기

프론트엔드분야를 공부하며 생길수 있는 의문점과 가져야할 지식에 대하여 공부하는 바를 적은 글입니다.

1. 생명주기 (Life Cycle)?

• 컴포넌트가 생성되고 사라지기까지, 즉 앱이 실행되고 종료될때까지 실행되는 일련의 과정을 말한다.

• 앱이 실행되고 종료되기까지, 메서드로 나누어 관리되는데 이것을 라이프 사이클 메서드 라고 한다.

• 크게 3가지 생명 주기를 가지는데, 마운트, 업데이트, 언마운트 이다.

1 - 1. 마운트

마운트란, DOM이 생성되어 브라우저에 나타나는 과정이다

• constructor

  • 컴포넌트를 생성할 때마다 실행되는 메서드 (가장 먼저 실행된다.)
    • 해당 컴포넌트의 state나 객체를 선언할때 사용된다.

  constructor(props){}

• getDerivedStateFromProps

  • 컴포넌트의 props로 받아온 값을 state에 넣을때 사용되는 메서드.
  • 컴포넌트가 렌더링 되기 전에 실행된다. (리렌더링때도 마찬가지)

  getDerivedStateFromProps(props, state){}

• render

  • 컴포넌트를 브라우저에 렌더링 할 때 사용되는 메서드.
    • 메서드 뒤 중괄호안에 있는 JSX를 보여준다.

  render (){JSX}

• componentDidMount

  • 컴포넌트가 첫 렌더링을 마친 뒤에 실행되는 메서드.
  • 호출시점에 컴포넌트는 브라우저에 나타나 있다.
    • axios, fetch 등의 메서드를 이용해 해당 컴포넌트에서 요청하는 작업을 실행한다.

  componentDidMount(){}

1 - 2. 업데이트

컴포넌트의 변경사항이 있을때 실시한다. (4가지의 경우 존재)
업데이트를 거친 컴포넌트는 리렌더링을 통해 브라우저에 표시.

• getDerivedStateFromProps

  • 컴포넌트의 props, state의 변경이 일어났을때 호출되는 메서드
  • 마운트 과정에서 실행된 것과 동일하다.

  getDerivedStateFromProps(props, state) {}

• shouldComponentUpdate

  • 컴포넌트의 리렌더링 여부를 결정하는 메서드.
  • 반환값이 boolean이고, 이 값에 따라 리렌더링을 결정한다.

  shouldComponentUpdate(nextProps, nextState) {}

• render

  • 컴포넌트의 리렌더링을 위해 마운트와 마찬가지로 가지고 있는 메서드.

• getSnapshotBeforeUpdate

  • 컴포넌트의 리렌더링 직전에 실행되는 메서드.
  • 렌더링 직전의 렌더링 요소 크기나 스크롤 위치등의 DOM의 정보에 접근할 때 사용된다.

  getSnapshotBeforeUpdate(preProps, preState) {}

• componentDidMount

  • 컴포넌트가 모든 업데이트 과정을 마친 후에 실행되는 메서드.
  • 3번째 파라미터인 snapshot은 getSnapshotBeforeUpdate 메서드로 부터 받아온 DOM 정보이다.

  componentDidUpdate(preProps, preState, snapshot) {}

1 - 3. 언마운트

DOM에서 컴포넌트를 제거하는 과정.

• componentWillUnmount
  • 컴포넌트가 브라우저에서 사라지기 전에 실행되는 메서드.
  • DOM에 직접 등록했던 이벤트들을 제거한다.

  componentWillUnmount() {}

2. 함수형 컴포넌트의 생명주기

위에서 언급한 생명주기 메서드와 과정은 클래스형 컴포넌트의 경우이고, 함수형 컴포넌트의 경우 기능은 같지만 다른 방식으로 구현된다.

2 - 1. 마운트

• constructor, getDerivedStateFromProps

  • 클래스형 컴포넌트에서 constuctor 메서드가 수행하는 기능을 함수형 컴포넌트에선 컴포넌트 내부에서 수행한다.
  • useState를 사용하여 state를 선언하고, 컴포넌트 내부에서 사용될 메서드를 선언한다.

• render

  • 함수형 컴포넌트의 return 부분이 수행한다.
  • return안에 작성된 JSX를 바탕으로 브라우저에 렌더링 한다.
  • 위의 constructor 부분에서 선언한 state를 사용할 수 있다.
    • 하지만 state를 변경하는 setState 메서드는 사용할 수 없다.

• componentDidMount

  • 함수형 컴포넌트는 이 기능은 useEffect를 통하여 구현한다.
  • 컴포넌트의 렌더링 이후 실행되는 메서드

  import React, {useState, useEffect} from "react";

  function App(){
    /**
     * 컴포넌트 호출 시 가장 먼저 호출이 되는 공간
     * 이 공간에서 state, 컴포넌트 메서드들을 선언한다.
     */
      const name = "함수형 컴포넌트";
      const [age, setAge] = useState(20);

      useEffect(() => {
      	console.log("렌더링 이후 수행된다.");
      }, [])

      return (
          <div>
              <p>{name}</p>
              <p>{age}</p>
          </div>
      )
  }
export default App;

2 - 2. 업데이트

• 클래스형 컴포넌트의 모든 과정
  • 함수형 컴포넌트는 useEffect를 통하여 업데이트 과정의 모든 메서드를 대신한다.
    • 컴포넌트 내부의 변화가 발생했을때 실행된다.
    • props, 부모 컴포넌트의 리렌더링, 해당 컴포넌트 state의 변화 가 일어났을때 실행된다.

  import React, {useState, useEffect} from "react";

  function App(props){
      const [info, setInfo] = useState(
      	{
        	name : "업데이트 과정",
            age : 20,
            isOperate : false
        }
      );

      useEffect(() => {
      	console.log("인자로 들어간 props.data, info.name이 변경될때 리렌더링되며 수행된다.");
      }, [props.data, info.name])

      return (
          <div>
          </div>
      )
  }
export default App;

2 - 3. 언마운트

• componentWillUnmount
  • 업데이트 과정과 동일하게 useEffect 메서드가 대신하여 수행한다.

App.js

  import React, {useState, useEffect} from "react";
  import unmountComponent from "./unmountComponent";

  function App(props){
  
      const [unmountState, setUnmountState] = useState(true);
      
      const unmount = () => {
      	setUnmountState(!unmountState);
      };
	
      return (
          <div>
          	<button onClick = {unmount}>제거</button>
            {
            	unmountState && (
                	<unmountComponent />
                )
            }
          </div>
      )
  }
export default App;

unmountComponent.js

import React, {useState, useEffect} from "react";

function unmountComponent(){
	useEffect(() => {
    	return () => {
        	console.log("컴포넌트 언마운트");
        }
    }, [])
	return (
    	<div>언마운트 컴포넌트</div>
    )
}

• 위의 코드에서는 unmountComponent라는 컴포넌트를 불러와 App컴포넌트에서 사용중이다.
• App 컴포넌트에서 unmountState의 상태에 따라 unmountComponent컴포넌트를 렌더링 또는 언마운트 하는 조건부 렌더링을 실시하고 있다. 이 경우 언마운트 사이클이 발생한다.

3. 요약