컴포넌트 방식

컴포넌트를 만드는 방법에는 function과 class 두가지가 있다. 예전에는 class를 사용했으나 최근에는 function을 많이 사용한다.

/* function type */
import React from "react";

function App() {
	return <div className="App"></div>;
}

export default App;

/* class type */
import React, { Component } from "react";
class App extends Component {
  render() {
    return (
      <div className="App"></div>
    )
  }
}

함수형을 사용하는 이유는

⭐️ 간결함: 함수형 컴포넌트는 클래스 컴포넌트보다 코드가 간결하고 가독성이 높습니다. 이는 코드를 작성하고 유지 관리하기가 더 쉽다.

⭐️ 훅(Hooks)의 도입: React 16.8부터 훅이 도입되어 함수형 컴포넌트에서도 상태 관리와 생명주기 메서드를 사용할 수 있게 되었다. 이로 인해 함수형 컴포넌트의 기능이 크게 향상되었다.

⭐️ 성능: 함수형 컴포넌트는 클래스 컴포넌트보다 메모리 사용량이 적고, 성능상의 이점이 있다.

⭐️ 테스트 용이성: 함수형 컴포넌트는 순수 함수로 작성되므로 테스트하기가 더 쉽다. 클래스 컴포넌트의 경우 테스트하기 어려운 부분이 있을 수 있다.

⭐️ 커뮤니티 및 라이브러리 지원: React 커뮤니티와 라이브러리는 점점 함수형 컴포넌트에 더 많은 지원을 제공하고 있습니다. 앞으로의 발전 방향을 고려할 때 함수형 컴포넌트를 사용하는 것이 좋다.