How Are Function Components Different from Classes?

hooks가 나오기 전 한동안은 클래스가 더 많은 기능에 대한 엑세스를 제공한다는 것이 차이점 이었지만 더 이상은 아니다.

이 글에서 둘 사이의 가장 큰 차이점을 살펴볼 것이다.

함수형 컴포넌트가 2015년에 도입 된 이래로 존재 했지만, 종종 간과되었다.

함수형 컴포넌트는 렌더링 된 값을 캡처 한다.

이것이 무엇을 의미하는가

function ProfilePage(props) {
	const showMessage = () => {
		alert('Followed ' + props.user);
	}

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

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

• 예를 들어 위 코드에서 props.user 는 'Dan' 이다.
• 클릭 시 3초 후 'Followed Dan' alert가 생성 될 것이다. 이것은 간단하다.

이것을 클래스로 작성해 보자

class ProfilePage extends React.Component {
  showMessage = () => {
    alert('Followed ' + this.props.user);
  };

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

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

• 이 두 가지 코드 스니펫은 동일하다고 생각하는 것이 일반적이다.
• 사람들은 흔히 의미를 모른 채 이러한 패턴들 사이에서 코드를 리팩토링 한다.
• 그러나 이 두 코드는 미묘하게 다르다. 그 차이가 보이지 않는가? 개인적으로, 이것을 보는데 오래 걸렸다.
• 직접 알아내고 싶다면 라이브 데모가 있다. 글의 나머지 부분에서는 차이점에 대해 설명한다.
  • 위에 힌트가 있었다.

계속하기 전 이 글의 차이점은 React Hooks와 아무런 관련이 없다. 이것은 React fuction과 class의 차이점 이다.