Class Component vs Functional Component

📌 참고자료

Differences between Functional Components and Class Components in React
React Docs
React Class Component vs. Functional Component: What’s the Difference
Build the future of communications.

🔍 배경지식

• React에서는 두가지 방법으로 Component를 작성할 수 있는데, function Component와 Class componenet가 그 두가지이다.

• React 16.8에서 hooks가 등장하기 이전에는, 오직 Class Component에서만 state와 lifecycle methods에 접근할 수 있었지만 이제는 UI를 구성하는데 필요한 모든 기능을 hooks로 구현가능하게 되었다.

• 최근에는 function Componenet가 조금 더 대중적으로 사용되고 있다.

📍 클래스형과 함수형 컴포넌트의 차이

📎 function Componenet
	
    - JS의 함수와 같은 기능을 하는 컴포넌트로, props를 전달인자로 받아 React elements를 반환한다. 
	- Class Component 에서 사용되는 lifecycle메소드를 사용할 수 없는 대신,useState 또는 useEffect같은 hooks를 통해 간단하게 UI를 구현할 수 있다.
    


📎 Class Component 

	- Class Comnenet는 기본적으로 React로부터 상속받는다.그리고 Render()을 통해 React element를 반환한다. 
    - componentDidMount()같은 lifecycle methods를 사용할 수 있다. 
    - Constructor을 통해 state를 관리한다.

📍 함수형 컴포넌틀 주로 사용하는 이유

⬇️함수형⬇️

    const FunctionalComponent = () => {
       React.useEffect(() => {
         return () => {
           console.log("Bye");
         };
       }, []);
       return <h1>Bye, World</h1>;
      };

⬇️클래스형⬇️

 class ClassComponent extends React.Component {
 	componentWillUnmount() {
   	console.log("Bye");
 }

 render() {
   return <h1>Bye, World</h1>;
 }
}

Hook을 사용하면 컴포넌트로부터 상태 관련 로직을 추상화할 수 있습니다. 이를 이용해 독립적인 테스트와 재사용이 가능합니다. Hook은 계층의 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와줍니다. 이것은 많은 컴포넌트 혹은 커뮤니티 사이에서 Hook을 공유하기 쉽게 만들어줍니다.

두 작성방법을 비교하였을 때, 더 간결하고 이해하기 쉬운 코드를 작성할 수 있고,
클래스에 비하여 상태관련로직에 있어서 유지보수가 쉬운 점 때문에 react docs에서 권장하고 있다.
이 때문에 불필요한 코드를 최적화하여 클래스보다 나은 성능을 기대할 수 있다.
또한, class에서 사용되는 this를 사용하지 않기 때문에 불필요한 혼동을 줄일 수 있다고 한다.