[REACT] 함수형 컴포넌트

 

함수형 컴포넌트

 

class 문법 사용

- 컴포넌트에서 라이프사이클 API나 state를 사용할 때 사용하는 형식

import React, {Component} from 'react';
class Hello extends Component {
    state = {
        name: "Hello"
    }
    render(){
        return(
            <div>Hello {this.props.name}</div>
        );
    }
}
export default Hello;

 

함수형 컴포넌트

- 오로지 props를 전달받아 뷰를 랜더링하는 역할만 수행

mport React from 'react';

function Hello(props){
    return(
        <div>Hello {props.name}</div>
    )
}

export default Hello;

 

- ES6의 화살표 함수와 비구조화 할당 문법 사용

import React from 'react';

const Hello = ({name}) => {
    return(
        <div>Hello {name}</div>
    )
}

//{ } 생략 가능
// const Hello = ({name}) => (
//     <div>Hello {name}</div>
// )

export default Hello;

 

 

함수형 컴포넌트를 사용할 경우

- state를 사용하는 컴포넌트 개수 최소화

- 컴포넌트를 만들 때는 대부분 함수형으로 작성하여 state를 사용하는 컴포넌트 개수를 줄이는 방향

- state나 라이프사이클 API를 꼭 써야할 때만 클래스 형태로 변환하여 컴포넌트 작성