[react] 함수형 컴포넌트와 클래스형 컴포넌트의 차이점

0. 들어가기에 앞서

현재 필자는 클래스형 컴포넌트의 존재를 알지 못하고 함수형 컴포넌트만 사용해 본 상태에서 쓴 글이다. 그러므로 실제와 다른 내용이 있을 수 있다.

0 - 1. 컴포넌트란?

화면 상에 보이는 여러 항목들을 쪼갤 수 있는 하나의 단위로 코드에서는 흔히 하나의 클래스 또는 함수로 나타난다.

1. 클래스형 컴포넌트

과거에는 클래스형 컴포넌트를 주로 사용했지만 2019년 v16.8부터 함수형 컴포넌트에 리액트 훅(hook)을 제공해주어서 현재는 공식문서에서 함수형 컴포넌트와 훅을 사용할 것을 권장한다.

1-1. 클래스형 컴포넌트 구현 예시

<클래스형 컴포넌트 구현 규칙>

• 클래스형 컴포넌트는 React.Component 객체를 반드시 상속받아야 한다.
• 또한 render() 함수가 반드시 존재해야 한다.
• render() 함수에서 단 하나의 JSX 객체를 반환해야 한다.

import React, {Component} from 'react';

class Welcome extends Component {
  	render(){
    	return <h1>Hello, {this.props.name}</h1>;
    }
}

1-2. 함수형 컴포넌트 구현 예시

import React from 'react';

function Welcome (props) {
  	return <h1>Hello, {props.name}</h1>;
}

export default Welcome;

2. 클래스형 컴포넌트의 기능

2-1. State

컴포넌트 내부에서 바뀔 수 있는 값을 state라고 하는데 이 state 기능을 클래스형 컴포넌트에서만 지원했었다. (함수형 컴포넌트에서는 사용 불가능 했음)
-> 이것이 추후 훅(hook)이 추가되면서 함수형 컴포넌트에서는 useState()를 사용해 해결할 수 있게 됐다.

• this.state : state를 조회할 때 방법, object 형태
• this.setState() : state를 변경할 때 사용하는 함수

2-2. 생명주기 (Lifecycle)

생명주기 메서드

• componentDidMount() : 리소스 할당, 마운팅(mount) 한다고 함
  컴포넌트 출력물이 DOM에 렌더링 된 후 실행되는 함수
• componentWillMound() : 리소스 반납, 언마운팅(unmount) 한다고 함
  컴포넌트가 DOM에서 한 번이라도 삭제된 적이 있으면 실행되는 함수

<1초마다 실시간으로 바뀌는 타이머 예제>
여기서는 타이머 생성을 위해 componentDidMount() 사용,
타이머 삭제를 위해 componentWillMound()사용

import React from 'react';

class Clock extends React.Component {
  constructor(props){
    super(props);
    this.state = {date: new Date()} // state 초기화 -> constructor에서만 가능
  }
  
  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(), 1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }
  
  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

+. 참고사이트

react 공식 문서 : https://ko.reactjs.org/docs/components-and-props.html
개인 tistory : https://devowen.com/298