React - Component(Class/Functional)

▪️ Component

리액트에서 컴포넌트란 앱을 구성하는 최소한의 단위로서,
리액트의 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 독립적으로 관리할 수 있는 요소이다.
즉, 컴포넌트를 디자인,개발,경영과 같은 하나의 부서라고 비유한다면 리액트 앱은 여러 부서가 모인 하나의 회사이다.

컴포넌트의 종류는 두 가지가 있다.

• 클래스형 컴포넌트 ( Class Component )
• 함수형 컴포넌트 ( Functional Component )

두 가지의 사용 방법은 다르지만 기본적으로 컴포넌트의 이름은 대문자로 시작한다. 소문자로 사용할 시 리액트에서 DOM 태그로 취급하게 된다.

▪️ 클래스형 컴포넌트 ( Class Component )

import React, {Component} from "react";

class App extends Component{
	render() {
    	return (
        	<div>
            	안녕
            </div>
        )
    }
}

export default App;

클래스 컴포넌트는 자바스크립트의 class 기반 컴포넌트로, React 16.8 버전에서 함수형 컴포넌트와 React Hooks가 나오기 전까지 사용되었다.

클래스 컴포넌트를 사용하기 위해서 class 키워드가 반드시 필요하며, React 모듈로부터 Component를 상속받아야만 리액트 컴포넌트임을 자바스크립트 엔진이 알 수 있다. 또한 render() 메소드가 반드시 필요한데, 이를 통해 실제로 보여지는 DOM이 된다.

클래스 컴포넌트는 컴포넌트가 실행되거나 업데이트되거나 제거될 때, 특정한 이벤트들이 발생하는 생명 주기(Life Cycle) 를 가지고 있다. 생명 주기는 크게 세 가지로 구분된다.

🟢 마운트 ( Mount ) - 컴포넌트가 처음 실행되는 단계

: 컴포넌트가 화면에 나타난 후 호출된다. 주로 초기 데이터 로딩이나 외부 API 호출 등에 사용한다.

<관련 메서드>
- constructor
- getDerivedStateFromProps
- render
- componentDidMount

🟠 업데이트 ( Update ) - 컴포넌트가 업데이트 되는 단계

: 컴포넌트의 상태나 속성이 변경되어 업데이트가 발생한 후 호출된다. 이전 상태와 현재 상태를 비교해서 필요에 따라 추가적인 작업을 수행한다.

<관련 메서드>
- getDerivedStateFromProps
- shouldComponentUpdate
- render
- getSnapshotBeforeUpdate
- componentDidUpdate

🔴 언마운트 ( Unmount ) - 컴포넌트가 언마운트 되는 단계

: 컴포넌트가 화면에서 사라지기 전에 호출된다. 이벤트 리스너의 해제나 리소스의 정리 등에 사용한다.

<관련 메서드>
- componentWillUnmount

▪️ 함수형 컴포넌트 ( Functional Component )

import React from 'react';

function App() {
  return (
    <div>
      안녕
    </div>
  );
}

export default App;

함수형 컴포넌트는 함수 기반 컴포넌트로 선언이 클래스 컴포넌트에 비해 간편하다. React 16.8 버전부터 사용되었으며, React Hooks에서 useEffect()를 통해 클래스 컴포넌트의 생명 주기( Life Cycle ) 기능을 구현한다.

( 참고로 이제 클래스 컴포넌트는 잘 사용하지 않는 추세이며, 함수형 컴포넌트를 사용하도록 권장하고 있다. 그래도 기존의 작성된 클래스 컴포넌트를 읽고, 유지 보수하기 위해서 알아야 한다. )

1. useEffect(() => {
2. console.log('mount');
3. 	return () => {
4.		console.log('unmount');
5.	}
6. }, [update]);

위의 코드는 useEffect()를 사용하는 코드이다.

② ---> Mount / Update 역할
④ ---> Unmount 역할

* 참고 :
Component
https://ko.legacy.reactjs.org/docs/components-and-props.html
Life Cycle
https://react.vlpt.us/basic/25-lifecycle.html
React Hooks - useEffect
https://www.zerocho.com/category/React/post/5f9a6ef507be1d0004347305