class vs function 구현 차이

Lifecycle

componentDidMount

const FunctionalComponent = () => {
  React.useEffect(() => {
    console.log("Hello")
  }, [])
  return <h1>Hello, World</h1>
}

class ClassComponent extends React.Component {
  componentDidMount() {
    console.log("Hello")
  }
  
  render() {
    return <h1>Hello, World</h1>;
  }
}

componentWillUnmount

const FunctionalComponent = () => {
  React.useEffect(() => {
    return () => {
      console.log("Bye");
    };
  }, []);
  return <h1>Bye, World</h1>;
};

class ClassComponent extends React.Component {
  componentWillUnmount() {
    console.log("Bye");
  }
  
  render() {
    return <h1>Bye, World</h1>;
  }
}

componentDidUpdate

const FunctionalComponent = () => {
  const [input, setInput] = useEffect("")
  React.useEffect(() => {
    console.log("Bye");
  }, [input]);
  
  return <input onChange={(e) => setInput(e.target.value)} />
}

class ClassComponent extends React.Component {
	constructor(props){
      super(props)
      this.state = {
        input: ""
      }
    }
	componentDidUpdate(prevProps,prevState){
      if(prevState.text !== this.state.text) {
        console.log("Bye")
      }
    }

}