[React] 클래스형 vs 함수형
클래스형
import React, { Component } from 'react';
class App extends Component {
render() {
const hello = 'Hello world!';
return <div>{hello}</div>;
}
}
export default App;
- state 기능 및 라이프 사이클 기능을 사용할 수 있다.
- 임의 메서드를 정의할 수 있다.
- render 함수 안에 화면에 보여줄 JSX 구현
함수형
import React from 'react';
function App() {
const hello = 'Hello world';
return <div>{hello}</div>;
}
export default App;
- 클래스형 컴포넌트보다 선언하기가 편하고, 메모리 자원을 덜 사용한다
- 리액트 훅이 도입되면서 과거에는 불가하던 state와 라이프사이클 API를 사용할 수 있게 되었다.
☝🏻 리액트 훅의 도입으로 인해 클래스형에서만 가능하던 state 기능 및 라이프 사이클 기능을 함수형에서도 구현하게 되면서 선언의 편의성(코드 통일성), 적은 메모리 자원 사용의 이유로 함수형 컴포넌트를 권장하고 있다.
Author And Source
이 문제에 관하여([React] 클래스형 vs 함수형), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@skdud4659/React-클래스형-vs-함수형
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
import React, { Component } from 'react';
class App extends Component {
render() {
const hello = 'Hello world!';
return <div>{hello}</div>;
}
}
export default App;
import React from 'react';
function App() {
const hello = 'Hello world';
return <div>{hello}</div>;
}
export default App;
- 클래스형 컴포넌트보다 선언하기가 편하고, 메모리 자원을 덜 사용한다
- 리액트 훅이 도입되면서 과거에는 불가하던 state와 라이프사이클 API를 사용할 수 있게 되었다.
☝🏻 리액트 훅의 도입으로 인해 클래스형에서만 가능하던 state 기능 및 라이프 사이클 기능을 함수형에서도 구현하게 되면서 선언의 편의성(코드 통일성), 적은 메모리 자원 사용의 이유로 함수형 컴포넌트를 권장하고 있다.
Author And Source
이 문제에 관하여([React] 클래스형 vs 함수형), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@skdud4659/React-클래스형-vs-함수형저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)