[React] 🤜🔥🤛클래스 컴포넌트 vs 함수 컴포넌트

아래 클래스 컴포넌트와 함수 컴포넌트는 같은 동작을 한다.

🔥 클래스 컴포넌트

클래스 컴포넌트로, 5초마다 count가 1이 증가하도록 만들었다.

// React 컴포넌트 class를 정의하려면, React.Component를 상속 받아야한다.
class Count extends React.Component {
  constructor(props) {
    super(props); // 부모의 props
    this.state = { count: 0 }; // state 초기값 지정
  }

  increase() {
    this.setState({ // 초기값 변경
      count: this.state.count + 1,
    });
  }
  
  // 컴포넌트의 출력물이 DOM에 렌더링 된 후에 한번만 실행
  componentDidMount() {
    console.log("mount");
    this.timeIncrease = setInterval(() => this.increase(), 5000);
  }
  
  // 컴포넌트의 업데이트마다 호출. 최초 렌더링 때는 호출되지 않음
  componentDidUpdate() {
    console.log("update");
    console.log(this.state.count);
  }
  
  // 컴포넌트가 제거되기 직전에 한번만 실행
  componentWillUnmount() {
    console.log("unmount");
    clearInterval(this.timeIncrease);
  }

  // React.Component의 하위 class에서는
  // 반드시 render메서드를 정의해야 한다.
  render() {
    return (
      <>
        <h1>Hello world!</h1>
        <h2>Count: {this.state.count}</h2>
      </>
    );
  }
}

🔥 함수 컴포넌트

함수 컴포넌트로, 5초마다 count가 1이 증가하도록 만들었다.

const CountFunction = () => {
  const [count, setCount] = useState(0);

  const increase = () => {
    setCount((count) => count + 1);
  };

  useEffect(() => {
    console.log("mount");
    const timeIncrease = setInterval(increase, 5000);

    // 깨끗하게 정리해야 하는 코드는 return메서드 안에 작성하면 된다.
    return () => {
      console.log("unmount");
      clearInterval(timeIncrease);
    };
  }, []);

  // 이렇게 기능에 맞게 useEffect를 분리하는 것이 좋다.
  useEffect(() => {
    console.log("update");
    console.log(count);
  }, [count]);

  return (
    <>
      <h1>Hello world!</h1>
      <h2>Count: {count}</h2>
    </>
  );
};

👉 지금 바로 (공식문서)React.Component 보러가기
👉 lifecycle diagram 라이프사이클 다이어그램 보러가기