functional component , class component +(react.FC)

what is the component?

컴포넌트(Component)란 프로그래밍에 있어 재사용이 가능한 각각의 독립된 (단위)모듈을 뜻한다.

 

 

functional components

함수 컴퍼넌트의 정의

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

이 함수는 데이터를 가진 하나의 “props” (props는 속성을 나타내는 데이터입니다) 객체 인자를 받은 후
React 엘리먼트를 반환하므로 유효한 React 컴포넌트입니다. 이러한 컴포넌트는 JavaScript 함수이기 때문에 말 그대로 “함수 컴포넌트”라고 호칭합니다.

-react 공식 사이트-

 

특징

• UI에 집중되어있는 방식
• 함수형은 상태를 저장할 수 없다. 기본적으로 함수는 한번 실행되고 나면 메모리 상에서 사라진다. (가비지 컬렉팅)
• 함수형 컴포넌트는 클래스형 컴포넌트보다 선언하기가 좀 더 편하고, 메모리 자원을 덜 사용한다는 장점
• 함수형 컴포넌트에서만 사용할 수 있는 hooks는 로직을 state와 분리할 수 있게 해주기 때문에 로직을 재사용할 수 있게 해준다.

EX>

use basic function

import react from "react";

interface AppProps{
}

function App({}:AppProps){
	return (
	<div>
		Hello React
	</div>
	)
}
export default App;

use arrow function by react.FC

import react from "react";
/*
function과의 차이
- props에 children이 기본적으로 내장이 되어있다.
- defaultProps가 적용이 안된다

사용을 권장하지 않음

화살표함수를 사용하고 싶으면 react.FC를 생략하고 사용하는 걸 추천합니다
*/
interface AppProps{
}
const App:react.FC<AppProps>=({})=>{
return (
	<div>
		Hello React
	</div>
	)
}
export default App;

 

arrow function by react.FC

• 기본적으로 children이 들어가있다.(컴포넌트 props의 타입이 명백하지 않습니다. ⇒ 결국 Props 타입 안에 children을 명시해야 합니다.)
• defaultProps, propTypes, contextTypes를 설정 할 때 자동완성이 될 수 있다.

 

class components

특징

• 상태를 저장할 수 있고, React Life Cycle Method 를 사용할 수 있다.
• render() 함수가 필수적으로 있어야 한다.
• 클래스가 인스턴스를 찍어내면 마치 그 인스턴스는 그 때부터 독자적인 생명체처럼 메모리에 상주하고 있기 때문이다. (생명체라고 생각하면 상태를 부여하고 라이프 사이클을 부여하는 것이 어색하지 않다.)
• State 와 Action을 분리하기 어렵다는 단점이 있다.

EX>

import React, { Component } from 'react'

export default class test extends Component {
    render() {
        return (
            <div>Hello React</div>
        )
    }
}