[ReactJS] 리액트 200제 _ ex001 ~ 005

003

component: 특정 코드 뭉치를 다른 부분에 이식하거나 재 사용하기 위해 사용하는 코드 블록 단위

004

생명주기: component의 생성, 변경, 소멸 과정을 뜻함

• component 생성 함수
  • render()
  • constructor()
  • getDerivedStateFromProps()
  • componentDidMount()

005

contructor 함수가 헷갈려 검색해봤다

• 참고 문서
  • https://corini.tistory.com/entry/리액트React-학습자를-위한-기초지식-컴포넌트-생명주기
  • https://www.javatpoint.com/react-constructor
• contructor(props)
  • 컴포넌트가 실행될 때 가장 먼저 호출되는 함수
  • 생명주기 함수 중 가장 먼저 실행됨
  • 처음 한 번만 호출됨
  • 그리고 state를 정의하거나 state에 초기값을 넣고 싶을 때 이 함수 안에 작성하면 됨
  • 또한 이 함수는 파라미터값으로 props가 들어가며, 함수 내부에 super(props)를 먼저 작성해야 함
  • The constructor in a React component is called before the component is mounted.
    • mount
      • 컴포넌트에서 작성한 요소를 DOM에 넣어 확인하는 것
      • 이 mount에 관련된 함수가 render(), constructor(), getDerivedStateFormProps(), componentDidMount()임
  • When you implement the constructor for a React component, you need to call super(props) method before any other statement.
  • If you do not call super(props) method, this.props will be undefined in the constructor and can lead to bugs.
• In React, constructors are mainly used for two purposes:
  1. It used for initializing the local state of the component by assigning an object to this.state.
  2. It used for binding event handler methods that occur in your component.
     1. bind 개념 > https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
     2. bind 활용 > https://siosio3103.medium.com/react-binding-어떤-방식을-써야할가-be5894ba1dae

 

예제 코드

import React, { Component } from "react";

class R005_LifecycleEx extends Component {
    constructor(props) {
        super(props);
        this.state = {};
        console.log('1. constructor Call')
    }
    
    render() {
        console.log('3. render Call')
        return(
            <h2>[THIS IS CONSTRUCTOR FUNCTION]</h2>
        )
    }
}

export default R005_LifecycleEx;

위 component를 App.js에 import하여 render하였을 때 constructor()가 제일 먼저 실행되므로 1. constructor Call이 콘솔에 가장 먼저 뜨는 것을 확인할 수 있다