클래스형 컴포넌트 vs 함수형 컴포넌트

클래스형 컴포넌트

import React, { Component } from 'react';

class Hello extends Component {
  static defaultProps = {
      name: '이름없음'
  };
   
  render() {
    const { color, name, isSpecial } = this.props;
    return (
      <div style=>
        {isSpecial && <b>*</b>}
        안녕하세요 {name}
      </div>
    );
  }
}

export default Hello;

class 키워드로 시작
Component를 상속 받음
render() 함수로 JSX 반환
props를 조회할 때 this 키워드 사용
defaultProps 설정 시 클래스 내부에 static 키워드와 함께 선언

상태

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0
    };
  }
  handleIncrease = () => {
    this.setState({
      counter: this.state.counter + 1
    });
  };

  handleDecrease = () => {
    this.setState({
      counter: this.state.counter - 1
    });
  };

  render() {
    return (
      <div>
        <h1>{this.state.counter}</h1>
        <button onClick={this.handleIncrease}>+1</button>
        <button onClick={this.handleDecrease}>-1</button>
      </div>
    );
  }
}

state로 상태를 관리
state를 선언할 때는 constructor 안에서 this.state 로 설정
상태를 업데이트할 때는 this.setState 로 업데이트

Life Cycle

마운트 단계

constructor
- 생성자 메서드. 컴포넌트가 만들어지면 가장 먼저 실행되는 메서드.

getDerivedStateFromProps

static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.color !== prevState.color) {
      return { color: nextProps.color };
    }
      
    return null;
}

props로 받아온 것을 state에 넣어주고 싶을 때 사용함.
static 키워드가 필요하고, 함수 내부에서 this 객체에 접근할 수 없다

render
- 컴포넌트 렌더 메서드
- 부수효과를 일으키면 안됨. 서버통신/브라우저 쿠키 받아오기 등의 부수효과는 render 메서드 안에서는 하지 않는다. 부수효과가 필요하면 다른 생명주기 함수에서 사용.
componentDidMount
- render의 첫 반환이 돔에 반영된 직후에 호출됨.

업데이트 단계

getDerivedStateFromProps
- 컴포넌트의 props나 state가 바뀌었을때 호출됨.
shouldComponenetUpdate
- 컴포넌트 최적화시 많이 사용된다.
- 컴포넌트를 리렌더링할지 말지 결정함.
render
- 컴포넌트 반환
getSnapshotBeforeUpdate
- 렌더링 결과가 실제 돔에 반영되기 직전에 호출된다.
- 이전 돔 요소의 상태값을 가져오기 좋음
componentDidUpdate
- 업데이트된 컴포넌트가 실제 돔에 반영된 직후 호출된다.
- 새로 반영된 돔의 상태값을 가장 빠르게 가져올 수 있는 메서드이다.

언마운트 단계

componentWillUnmount
- 컴포넌트가 화면에서 사라지기 직전에 호출된다.
- 등록했던 이벤트나 라이브러리 호출을 제거.

오류 발생시

componentDidCatch
- render 함수에서 에러가 났을때, 에러가 발생할 수 있는 컴포넌트의 부모 컴포넌트에서 작성해야한다.
- 사용자에게 에러화면을 보여주거나, 서버에 로깅할때 사용한다.

함수형 컴포넌트

함수형 컴포넌트는 자바스크립트 함수의 형태로 된 컴포넌트로, 기존에는 state와 생명주기함수를 사용할 수 없었지만, hook을 통해 가능해짐으로써 많이 사용하기 시작했다.

import React, {useState} from 'react';

function Hello({ color, name, isSpecial }) {
  const [count, setCount] = useState(0);
  return (
    <div style=>
      {isSpecial && <b>*</b>}
      안녕하세요 {name}
    </div>
  );
}

export default Hello;

JSX를 return문을 사용해서 반환
hook을 통해 상태를 관리하고, 생명주기함수를 사용할 수 있다.

Hook 생명주기

useEffect hook을 통해 관리할 수있다.

useEffect(() => {
    
    return () => {
        // componentWillUnMount()
    }
}, [/* componentDidUpdate() */]) // dependencies를 안넣으면 리렌더링 될때마다 호출됨.

마운트 될 때

컴포넌트가 실제 돔에 반영된 이후, 함수형 컴포넌트 내 모든 useEffect가 실행됨.

업데이트 될때

useEffect dependencies 에 넣은 state나 props가 업데이트 되었을때 useEffect 호출

언마운트 될 때

useEffect 내 return 문이 실행됨.

useLayoutEffect

useEffect는 컴포넌트가 render 와 paint 된 후 실행된다. 즉 실제 돔에 컴포넌트가 나타난 다음에 호출되어, useEffect 내에 dom에 영향을 주는 코드가 있을 경우 사용자 입장에서는 화면이 깜빡일 수 있다.
useLayoutEffect는 컴포넌트가 render 된 이후 실행되고, 그 이후에 paint 된다. 이 작업은 동기적으로 이루어지며, paint 되기 전에 실행되기에 dom을 조작하는 코드가 존재하더라도 사용자는 깜빡임을 경험하지 않는다. 이때 dom을 조작하는 코드에는 state 업데이트도 포함된다.
내부의 코드가 모두 실행된 후 컴포넌트가 실제 돔에 반영되기에, 로직이 복잡할 경우 사용자가 레이아웃을 보는데까지 시간이 오래걸린다. 따라서 useEffect의 사용이 권장된다.

차이정리

클래스형 컴포넌트

this.state를 통해 상태를 관리한다.
생명주기함수를 작성할 수 있다.

함수형 컴포넌트

hook을 통해 상태와 생명주기를 관리한다.
- 생명주기 hook 비교
  - useEffect : componentDidMount, componentDidUpdate, componentWillUnmount(return문)
  - useLayoutEffect : shouldComponentUpdate

장단점 비교

함수형 컴포넌트

클래스형 컴포넌트보다 메모리 자원을 덜 사용한다.
코드가 간결하다.

출처

https://velog.io/@seong-dodo/React-%ED%81%B4%EB%9E%98%EC%8A%A4%ED%98%95-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-vs-%ED%95%A8%EC%88%98%ED%98%95-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8

https://devowen.com/298

https://born-dev.tistory.com/27

https://koras02.tistory.com/178?category=967574

클래스형 컴포넌트 vs 함수형 컴포넌트