React | Component 와 생명주기

Component란
Class vs Functional Component
컴포넌트 생명주기 Component Lifecycle

---

Component란 

component란 재활용 가능한 UI 구성단위를 뜻합니다.
컴포넌트를 사용하면 반복되는 코드가 길어지는 것을 방지해주기 때문에 코드 유지보수에 좋고 해당 페이지가 어떻게 구성되어있는지 한눈에 파악하기가 좋습니다. 또한 컴포넌트는 또 다른 컴포넌트를 포함할 수 있습니다 (부모 컴포넌트 - 자식 컴포넌트)

 

Class vs Functional Component  

컴포넌트를 선언하는 방식에는 크게 class형 컴포넌트와 함수형 컴포넌트가 있습니다. 

 

Class Component

import React from 'react'

class Component extends React.Component {
  render() {
    return (
      <div>
      <h1>This is Class Component!</h1>
      </div>
     )
  }
}

export default Component

클래스형 컴포넌트에서는 render 함수가 꼭 있어야 하고, 그 안에 보여 주어야 할 JSX를 반환합니다.

Functional Component

import React from 'react'

const Component = () => {
  return (
    <div>
    <h1>This is Functional Component!</h1>
    </div>
  )
};

export default Component

 

컴포넌트 생명주기 Component Lifecycle

모든 컴포넌트는 여러 종류의 생명주기 메서드를 가지며 이 메서드를 오버라이딩하여 특정 시점에 코드가 실행되도록 설정할 수 있습니다. 

 

1. 마운트
   아래 메서드들은 컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입될 때 순서대로 호출됩니다.
   constructor( ) → static getDerivedStateFromProps( ) → render( ) → componentDidMount( )
   
   
2. 업데이트 
   props 또는 state가 변경되면 갱신이 발생합니다. 아래 메서드들은 컴포넌트가 다시 렌더링 될 때 순서대로 호출됩니다.
   static getDerivedStateFromProps( ) → shouldComponentUpdate( ) → render( ) → getSnapshotBeforeUpdate( ) → componentDidUpdate( )
   
   
3. 마운트 해제
   아래 메서드는 컴포넌트가 DOM 상에서 제거될 때에 호출됩니다.
   componentWillUnmount( )
   
   
4. 오류처리
   아래 메서드들은 자식 컴포넌트를 렌더링하거나, 자식 컴포넌트가 생명주기 메서드를 호출하거나, 또는 자식 컴포넌트가 생성자 메서드를 호출하는 과정에서 오류가 발생했을 때에 호출됩니다.
   static getDerivedStateFromError( ) componentDidCatch( )