[REACT] 함수형 컴포넌트(Hooks) & 클래스 컴포넌트

[React] 클래스 컴포넌트 (class)

클래스 컴포넌트의 기본 구조

import React, { Component } from 'react';

class classComponent extends Component{
	state = {
    	example = ''
    }
    
    render(){
        return (
        	<div>{this.state.example}</div>
        )
    }
    
}

export default classComponent

• class형으로 Component를 extends 한다.
• state를 설정
• render() 안에 return 하기
• state 값 접근 → this.state
• state 값 변경 → this.setState()

[React] 함수형 컴포넌트 (Hooks)

함수형 컴포넌트의 기본 구조

import React from 'react';

const hooksComponent = () => {
	const [example, setExample] = useState('');
    
    return (
    	<div>{example}</div>
    )
}

export default hooksComponent

• 함수형 변수로 사용 가능.
• useState를 사용하여 state 값 저장
• this.state 없이 직접적으로 값(변수) 호출 가능