React - 라이프사이클 & 라이프사이클 함수

 

라이프사이클

- 컴포넌트의 라이프 사이클은 정말 중요한 개념이다.

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

State and Lifecycle – React

 

• 컴포넌트 생성 → 수정(업데이트) → 제거
• 생성은 처음으로 컴포넌트를 불러오는 단계
• 수정(업데이트)는 사용자의 행동(클릭, 데이터 입력 등)으로 데이터가 바뀌거나, 부모 컴포넌트가 렌더링할 때 업데이트 된다.
  • props가 바뀔 때
  • state가 바뀔 때
  • 부모 컴포넌트가 업데이트 되었을 때(=리렌더링했을 때)
  • 또는, 강제로 업데이트 했을 경우 (forceUpdate()를 통해 강제로 컴포넌트를 업데이트할 수 있다.)
• 제거는 페이지를 이동하거나, 사용자의 행동(삭제 버튼 클릭 등)으로 인해 컴포넌트가 화면에서 사라지는 단계

 

StrictMode

- render, constructor가 두번씩 동작.

- src/index.js 파일을 보면 <React.StrictMode>라는 녀석이 <App/>을 감싸고 있다.

- strictmode는 우리가 만든 애플리케이션이 문제는 없는지, 좀 더 깐깐히 검사해주는 모드.

- 우리 로컬 환경에서만 활성화되니, 실제 배포때는 동작하지 않는다.

 

반응형

 

라이프사이클 함수

- 라이프 사이클 함수는 클래스형 컴포넌트에서만 사용할 수 있다.

- 함수형에서는 React Hooks으로 라이프 사이클 함수를 대체할 수 있다.

React.Component – React

 

import React from "react";

// 클래스형 컴포넌트는 이렇게 생겼습니다!
class LifecycleEx extends React.Component {

// 생성자 함수
  constructor(props) {
    super(props);
    
    this.state = {
      cat_name: '나비',
    };

    console.log('in constructor!');
  }

  changeCatName = () => {
    // 다음 강의에서 배울, state 업데이트 하는 방법
    // 지금은 componentDidUpdate()를 보기 위해 씀.
      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() 안에 들어갈 내용은 컴포넌트의 모양에만 관여하는 것이 좋다.

- 즉, state나, props를 건드려 데이터를 수정하려고 하면 안된다.

 

componentDidMount() 

- 컴포넌트가 화면에 나타나는 것을 마운트(Mount)한다고 표현

- didMount()는 마운트가 완료 되었다는 뜻

- 이 함수는 첫번째 렌더링을 마친 후에만 딱 한 번 실행.

- 컴포넌트가 리렌더링할 때는 실행되지 않는다.

- 보통은 이 안에서 ajax 요청, 이벤트 등록, 함수 호출 등 작업을 처리

- 또, 이미 가상돔이 실제돔으로 올라간 후니까 DOM 관련 처리를 해도 된다.

 

componentDidUpdate(prevProps, prevState, snapshot)

- DidMount()가 첫 렌더링 후에 호출 되는 함수라면, DidUpdate()는 리렌더링을 완료한 후 실행되는 함수

- prevProps와 prevState 파라미터 -> 각각 업데이트 되기 전 props, state

- 이전 데이터와 비교할 일이 있을때 사용

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

 

componentWillUnmount()

- 컴포넌트가 DOM에서 제거 될 때 실행하는 함수

- 만약 우리가 스크롤 위치를 추적 중이거나, 어떤 이벤트 리스너를 등록했다면 여기에서 꼭 해제를 해줘야 한다.