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

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

• 클래스형 :

  state, lifeCycle 관련 기능사용 가능하다.

  메모리 자원을 함수형 컴포넌트보다 조금 더 사용한다.

  임의 메서드를 정의할 수 있다.

• 함수형 :

  state, lifeCycle 관련 기능사용 불가능 [Hook을 통해 해결 됨]

  메모리 자원을 함수형 컴포넌트보다 덜 사용한다.

  컴포넌트 선언이 편하다.

2. 함수형 컴포넌트를 사용함에따라 생기는 이점

this문제 해결

함수형 컴포넌트를 사용함에 따라 “함수 표현식”으로 함수를 작성할수 있게 되었다. (const , let 등을 사용함으로써 어디서든 접근이 가능했던 함수가 차례대로 생성했을시 접근이 가능 )

tip) 함수 표현식은 변수 호이스팅

class ProfilePage extends React.Component {

  showMessage(); // 이렇게 해도 접근가능

  showMessage = () => { // 함수 선언식 + arrow function
    alert("Followed " + this.props.user);
  };

  handleClick = () => {
    setTimeout(this.showMessage, 3000);
  };

  render() {
    return <button onClick={this.handleClick}>Follow</button>;
  }

}

const ProfilePage = (props) => {
  showMessage(); // 불가능

  // 함수 표현식,
  const showMessage = () => {
    alert("Followed " + props.user);
  };

  const handleClick = () => {
    setTimeout(showMessage, 3000);
  };

  return <button onClick={handleClick}>Follow</button>;
};

메모리 자원을 함수형 컴포넌트보다 조금 더 사용한다.

이런 이유에서 함수형 컴포넌트를 사용하면서 hook을 사용하도록 권장