클래스형 / 함수형 컴포넌트 (useEffect)

최현규·2023년 2월 5일
0
post-thumbnail

클래스 / 함수형 컴포넌트란?

리액트는 클래스형 컴포넌트 또는 함수형 컴포넌트 두가지로 나누어서 컴포넌트를 작성할 수 있다. 이전까진 클래스형 컴포넌트의 상태값, 생명주기 기능을 할 수 없었지만 2019년 리액트 16.8 버전부터 훅이 추가됨으로써 함수형 컴포넌트에도 클래스형 컴포넌트의 기능을 할 수 있게 되었다.

현재 리액트 공식사이트에서 함수형 컴포넌트와 훅으로 작업하는 것을 간결하고 사용하기 편리하여 권장하고 있어 함수형 컴포넌트로 많이 쓰고있는 추세다.

그렇지만 클래스형 컴포넌트가 오래되었다보니 아직 클래스형 컴포넌트를 사용하는 곳이 있어 공부해야 할 필요성이 있어 알아보았다.

1. 클래스형 컴포넌트

  • 기본 선언 방식

클래스형 컴포넌트는 자바스크립트의 함수와 비슷한 성질이 있다. 자바스크립트의 함수 선언 방식처럼 new "함수"() 해주면 실행된다. 자바스크립트의 new Date() 메소드처럼 그안에 객체의 형태로 데이터를 담고 있다.

  • 클래스 상속

클래스에서 공통 기능을 extends를 통해 공통 기능을 상속 해줄 수 있다. 이때, 기능 상속시 같은 함수를 선언할 때 객체에서처럼 기존 기능에서 새로운 기능으로 덮어진다. 이를 "오버라이딩" 이라고도 한다.

  • 생명주기(LifeCycle)

컴포넌트가 브라우저상에 나타나고, 업데이트되고, 사라지게 될 때 호출되는 메서드들이다.

import { Component } from "react";
import Router from "next/router";

export default class ClassCounterPage extends Component {
  state = {
    count: 0,
  };

  componentDidMount(): void {
    console.log("그려지고 나서 실행!!");        ==> 화면 출력 후 실행!!
  }

  componentDidUpdate(): void {
    console.log("변경되고 나서 실행!!");		==> 값이 변경될 때!!
  }

  componentWillUnmount(): void {
    console.log("사라지기 전에 실행!!");		==> 더는 사용하지 않을 때!!
    // 예) 채팅방 나가기 API
  }

  onClickCountUp = (): void => {
    console.log(this.state.count);
    this.setState({
      count: 1,
    });
  };

  onClickMove = (): void => {
    void Router.push("/");
  };

  render(): JSX.Element {                    ==> 화면 출력!!
    return (
      <>
        <div>{this.state.count}</div>
        <button onClick={this.onClickCountUp}>카운트 올리기</button>
        <button onClick={this.onClickMove}>나가기
</button>
      </>
    );
  }
}
  • render : JSX의 부분을 화면에 출력시켜준다.

  • componentDidMount: 화면이 출력되고 난 후에 실행한다.

  • componentDidUpdate: 값이 변경됐을 때마다 실행한다.

  • componentWillUnmount: 해당 출력 화면을 벗어나가기 전에 실행한다.


2. 함수형 컴포넌트

useEffect - 함수형 컴포넌트 생명주기

  • useEffect란 함수형 컴포넌트가 클래스형 컴포넌트처럼 생명주기 기능을 할 수 있게 만드는 훅(Hook)의 종류이다.
  • [ ]이 있다면, 처음에 한번만 실행되고 그 다음부터는 배열의 값이 바뀔때마다 실행한다. 이를 "의존성 배열"이라 한다.

  • 가장 상단에 있어도 화면이 출력되고나서 실행되므로 setState가 들어가 있는 경우 처음 차례로 한줄 씩 읽고 다시 한번 useEffect를 읽어 추가 렌더링이 된다. (여러번 반복해서 읽기때문에 가급적이면 사용하지 않는 것이 좋다.)
  • 마지막 예시처럼 setState값이 useEffect 안에 있고 배열에 state값이 있으면 무한 루프가 생길 수 있으니 사용할때 유의하자.
profile
나의 개발 지식 저장소

0개의 댓글