리액트 생성 순서

생성: constructor를 먼저 실행을 해 상태를 부여 -> render(HTML,jsx을 DOM에 알맞게 할당. 화면 렌더링) -> componentDidMount(데이터 가져오기 등)

수정: render부터 componentDidUpdate 과정까지 수행

삭제: componentWillUnmount

React Component

Class Component

• 더 많은 기능들 사용
• 코드가 김
• 코드가 복잡
• 성능이 비교적 느림

import React, {Component} from 'react'

export default class Hello extends Component{
    render(){
        return(
        	<div>
            	hello my friends!
            </div>
        )
    }
}

Functional Component

• 사용할 수 있는 기능들이 한정적
• 코드가 간단
• 성능이 비교적 좋음

import React from 'react'

export default function Hello(){
    return(
    	<div>
        	hello my friends
        </div>
    )
}

=> 적은 기능밖에 사용하지 못하는 Functional Component를 사용하기보다 많은 기능을 사용할 수 있는 Class Component를 주로 사용해왔음

React Hooks

React 16.8 ver 부터는 Functional Component에서도 Class Component에서만 사용이 가능했던 Life Cycle과 같은 기능들이 사용이 가능해지면서 Functional Component의 사용도가 증가

Class Component

import React, {Component} from 'react'
import Axios from 'axios'

export default class Hello extends Component{
    constructor(props){
        super(props);
        //상태 지정
        this.state={name:""}; 
    }
    
    //Life Cycle(데이터 가져오기 등등)
    componentDidMount(){
        Axios.get('/api/user/name')
        .then(response=>{
            this.setState({name:response.data.name});
        });
    }
    
    render(){
        return(
        	<div>
            	My name is {this.name}
            </div>
        )
    }
}

Functional Component

import React, {useEffect, useState} from 'react'
import Axios from 'axios'

export default function Hello(){
    //상태 지정(Hooks전에 사용 불가했던 기능)
    const [Name, setName]=useState("") 
   
    //Life Cycle(Hooks전에 사용 불가했던 기능)
    useEffect(()=>{
        Axios.get('/api/user/name')
        .then(response=>{
            setName(response.data.name);
        });
    },[]);
    
    return(
    	<div>
        	My name is {Name}
        </div>
    )
}

참고

www.inflearn.com/course/따라하며-배우는-노드-리액트-기본