항해99 - 6주차 WIL

클래스형 컴포넌트

import React, { Component } from 'react';

class App extends Component {
  render() {
    const name = 'dzeko';
    return <h1>{name}</h1>
  }
}

라이프사이클

생성될 때 (마운트 될 때 - Mounting) : constructor, render, componentDidMount
업데이트할 때(Updating) : render, componentDidUpdate
제거할 때 (마운트 해제 될 때 - Unmounting) : componentWillUnmount

클래스형 컴포넌트에서는 render() 함수를 이용하여, UI를 구성할 JSX 코드를 반환해주는 형식으로 구성되어야 한다.

함수형 컴포넌트

import React from 'react';

const App = () => {
  const name = 'dzeko';
  return <h1>{name}</h1>
}

라이프사이클

함수형 컴포넌트는 리액트 훅에 의해 실행된다.

생성될 때 (마운트 될 때 - Mounting) :

useEffect(() => {
 console.log(“ComponentDidMount”);
 }, []);

업데이트할 때(Updating)

useEffect(() => {
 console.log(“ComponentDidMount”);
 }, []);

제거할 때 (마운트 해제 될 때 - Unmounting)

useEffect(() => {
 return () => {
 console.log(“ComponentWillUnmount”);
 };
 }, []);

리액트는 함수형 컴포넌트와 훅을 함께 사용하는 것을 권장하고 있다.

비교적 더 간결한 코드와 로직으로 최적화를 할 수 있기 때문이다. 이는 라이프 사이클 메소드가 없으니 명확하고, 리렌더링 되는 단순한 규칙을 사용하기 때문이다.