클래스형 & 함수형 컴포넌트

클래스형 컴포넌트 (class component)

import React, {Component} from 'react';

class App extends Component {
  render() {
    const name = 'SH';
    return <div className="react">{name}</div>
  }
}

export default App;

class 키워드 필요
Component로 상속 필요
render() 메소드 필수

함수형 컴포넌트 (function component)

import React from 'react';

function App() {
  const name = 'SH';
  return <div className = "react">{name}</div>
}

export default App;

state, lifeCycle 관련 기능 사용 불가능 → Hook 사용

Lifecycle

mount

: 컴포넌트가 생성될 때

클래스형

useEffect(() => {
	...
},[]);

함수형

componentDidMount()

update

: 컴포넌트가 업데이트 될 때

클래스형

useEffect(() => {
	...
},[state, props]);

함수형

componentDidUpdate(prevProps, prevState, snapshot)

unmount

: 컴포넌트가 사라질 때

클래스형

useEffect(() => {
	return () => {
		...
	};
},[]);

함수형

componentWillUnmount()