Class component

Class Component
클래스형 컴포넌트
클래스 컴포넌트

Class component, function component - 비교

차이점

클래스 컴포넌트 내부에 선언된 인스턴스들은 리렌더링 시 값이 변경되지 않는다.
함수형 컴포넌트에서 선언된 변수들은 렌더링 될 때마다 다시 생성된다. 해당 변수가 함수를 참조하고 있어도 동일하다.
클래스 컴포넌트는 ref를 attribute로 받을 수 있다. 하지만 함수형 컴포넌트는 ref를 props로 받을 수 없다. 그 이유는 클래스 컴포넌트와 다르게 함수형 컴포넌트는 인스턴스가 없기 때문이다.

예시

예시 1

class AutoFocusTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();
  }

  componentDidMount() {
    this.textInput.current.focusTextInput();
  }

  render() {
    return (
      <CustomTextInput ref={this.textInput} />
    );
  }
}

함수형 컴포넌트에 ref를 넘기기 위해서는 forwardRef를 사용해야 한다.
하지만, 함수형 컴포넌트 내부에서 ref사용이 아예 되지 않는다는 것은 아니다.
다음처럼 component 내부에 있는 HTMLElement에는 ref를 사용할 수 있다.

function CustomTextInput(props) {
  // textInput은 ref 어트리뷰트를 통해 전달되기 위해서
  // 이곳에서 정의되어야만 합니다.
  const textInput = useRef(null);

  function handleClick() {
    textInput.current.focus();
  }

  return (
    <div>
      <input
        type="text"
        ref={textInput} />
      <input
        type="button"
        value="Focus the text input"
        onClick={handleClick}
      />
    </div>
  );
}