[React] 컴포넌트(Component)와 생명주기

컴포넌트(Component)란?

리액트는 화면에서 UI 요소를 구분할 때 '컴포넌트'라는 단위를 사용한다. 쉽게 말하면 리액트에서 앱을 이루는 가장 작은 조각이라고 할 수 있다. 컴포넌트는 새로운 컴포넌트를 생성할 수도 있고, MVC의 뷰를 독립적으로 구성하여 재사용할 수 있다. 리액트의 중요한 핵심인 '컴포넌트'에는 함수 컴포넌트, 클래스 컴포넌트 2가지가 있다.

컴포넌트 구성 요소

• property(props) : 부모 컴포넌트에서 자식 컴포넌트에 전달되는 데이터이다. 프로퍼티 값은 자식 컴포넌트에서 수정할 수 있다.
• state : 컴포넌트의 상태를 저장하고 수정 가능한 데이터이다.
• context : 부모 컴포넌트에서 생성하여 모든 자식 컴포넌트에게 전달하는 데이터이다.

함수(Function) 컴포넌트 vs 클래스(Class) 컴포넌트

React 함수 컴포넌트와 클래스 컴포넌트는 동일한 작업을 수행할 수 있지만 구문과 특정 기능 사용 방법에서 차이가 있다. React 16.8에서 훅(Hooks)이 도입되면서 클래스를 작성하지 않고도 상태와 다른 React 기능을 사용할 수 있게 되었다. 

함수형 컴포넌트란?
함수형 컴포넌트는 말 그대로 자바스크립트의 "함수(function)"기반 컴포넌트이다. 자바스크립트 함수를 선언하듯이 function으로 컴포넌트를 정의하고, return문에 JSX 코드를 반환한다.

function MyComponent() {
  return (
    <div>
      Hello React!
    </div>
  );
}

또한, 화살표 문법으로도 나타낼 수 있다.

const MyComponent = () => {
    return (
        <div>
            Hello React!
        </div>
    );
};

 

함수형 컴포넌트를 사용하는 이유

• Hooks
  과거에는 함수형 컴포넌트가 state, lifecycle을 지원하지 않았기 때문에 클래스형 컴포넌트를 많이 사용했지만 React v16 이후부터는 Hooks를 통한 state 및 LifeCycle 관리가 가능해져 리액트에서 공식적으로 함수형 컴포넌트 사용을 권장한다. hook의 useState를 사용해 state를 관리할 수 있고, useEffect를 사용해 LifeCycle을 관리할 수 있다.
• 직관적인 코드
  자바스크립트의 함수(function) 선언, 화살표 함수를 그대로 사용해 컴포넌트를 사용 가능하기 때문에 직관적이다.
• 메모리 자원 효율
  클래스형 컴포넌트에 비해 함수형 컴포넌트가 비교적 메모리 자원을 적게 사용한다.

 

 

클래스(Class) 컴포넌트란?

클래스 컴포넌트란 자바스크립트의 "클래스"기반 컴포넌트로, class로 정의하고 render() 함수에서 jsx 코드를 반환한다.

 

 

클래스 컴포넌트 특징

• class 키워드로 클래스 컴포넌트 생성
• React.Component 상속 : React의 ComponentClass를 상속받아 Component상속 필요하다.
• render() 메서드 필수로 사용 :클래스 컴포넌트 안에 render() 메서드가 꼭 필요하고 메서드 안에 JSX를 리턴한다.
• this 키워드 사용하기 : state, props, refs, 컴포넌트 메서드, 생명주기 메서드를 사용할 때 this로 프로퍼티를 참조하여 사용한다.

 

클래스 컴포넌트 생성하기

클래스 컴포넌트는 React의 ComponentClass를 상속받아 구현되기 때문에 반드시 Component를 import 하고 React.Component를 상속받아야 한다.

import React, { Component} from 'react';

class MyComponent2 extends Component {
    render() {
        return (
            <div>
                Hello React!
            </div>
        );
    }
}

 

---

Class Component 생명주기

마운트(mount)

컴포넌트의 인스턴스가 생성되고 DOM에 삽입될 때 시작된다. 이 단계에서 호출되는 메서드는 다음과 같다.

• static getDerivedStateFromProps()
• constructor()
• render()
• componentDidMount()

업데이트(updating)

props 또는 state의 변경으로 인해 다시 렌더링될 때 시작된다. 이 단계에서 호출되는 메서드는 다음과 같다.

• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

언마운팅(Unmounting)

컴포넌트가 DOM에서 제거될 때 시작된다.  즉, 컴포넌트가 화면에서 사라지는 것을 의미한다. 이 단계에서 호출되는 메서드는 다음과 같다.

• componentWillUnmount()

 

Functional Component 생명주기

리액트에서 Hook은 함수형 컴포넌트에서 React state와 생명주기 기능을 연동할 수 있게 해주는 함수이다. Hook은 class안에서는 동작하지 않고, class없이 React를 사용할 수 있게 한다.

 

 

리액트 훅을 도입한 목적

• 기존의 라이프사이클 메서드 기반이 아닌 로직 기반으로 나눌 수 있어서 컴포넌트를 함수 단위로 잘게 쪼갤 수 있다는 이점이 있다.
• 라이프사이클 메서드에는 관련 없는 로직이 자주 섞여 들어가는데, 이로 인해 버그가 쉽게 발생하고, 무결성을 쉽게 해친다.

 

Hook 사용 규칙 

• 최상위에서만 Hook을 호출해야 한다.
  • 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 안된다.
  • 이 규칙을 따르면 컴포넌트가 렌더링될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장된다.
• 리액트 함수 컴포넌트에서만 Hook을 호출해야 한다.
  • 일반 JS함수에서는 Hook을 호출해서는 안된다.