[React] 함수형 컴포넌트 클래스형 컴포넌트
컴포넌트
이번 포스팅에서는 함수형 컴포넌트와 클래스형 컴포넌트의 차이점을 알아보도록 하겠습니다.
우선 React를 사용하여 개발을 할 때 클래스형, 함수형 두 가지 방법으로 컴포넌트를 선언할 수 있습니다.
예전에는 클래스형 컴포넌트가 많이 사용되었지만 React 16.8v 부터 hook을 지원하였고 현재 React의 공식 문서에서도 함수형 컴포넌트와 훅을 함께 사용하는 방법을 권장하고 있습니다.
함수형 컴포넌트
함수형 컴포넌트의 선언은 두 가지가 있습니다
가장 기본적인 함수형 컴포넌트의 선언은 다음과 같습니다.
import React from 'react';
function App() {
const title = '함수형 컴포넌트';
return <div>{title}</div>;
}
export default App;
또 다른 방법으로는 ES6 문법에서 함수를 표현하는 방식으로 화살표 함수를 사용하는 방법이 있습니다.
import React from 'react';
const App = () => {
const title = '함수형 컴포넌트';
return <div>{title}</div>;
}
export default App;
클래스형 컴포넌트
클래스형 컴포넌트의 선언 방식은 다음과 같습니다.
import React, { Component } from 'react';
class Hello extends React.Component {
render() {
return (
<div>Hello {this.props.name}</div>
);
}
}
export default Hello;
차이점
클래스형 컴포넌트와 함수형 컴포넌트의 역할은 동일합니다. 다만 클래스형 컴포넌트는 state기능 및 라이플 사이클 기능을 사용할 수 있고 임의 메서드를 정의할 수 있습니다 그리고 render 함수가 필수로 존재해야 합니다.
반면 함수형 컴포넌트는 클래스형 컴포넌트보다 선언하기 좀 더 편하게 선언을할 수 있고 메모리 자원을 덜 사용하는 장점이 있습니다.
그러나 위에 언급한 클래스형 컴포넌트에서 state, 라이프사이클 기능을 사용할 수 없지만 리액트 hook이 도입되면서 이러한 단점들은 해결이 되었습니다.
Author And Source
이 문제에 관하여([React] 함수형 컴포넌트 클래스형 컴포넌트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@turret1234/React-함수형-컴포넌트-클래스형-컴포넌트저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)