[React] 클래스형 컴포넌트 vs 함수형 컴포넌트

현수·2022년 4월 18일
0

면접준비

목록 보기
1/10

클래스형 컴포넌트의 경우 라이프사이클 메서드를 사용할 수 있고, 임의 메서드를 정의할 수 있다. 또한 반드시 render 메서드를 통해서 JSX로 작성된 내용을 렌더링해주어야한다.
반면 함수형 컴포넌트의 경우 클래스형에 비해 선언이 좀 더 편하고 메모리 자원을 적게 사용한다는 장점이 있다. 과거에는 state 및 라이프사이클 메서드를 사용할 수 없다는 단점이 있었지만 리액트 훅의 도입으로 해결되었다.



2019년 v16.8에서 함수형 컴포넌트를 위한 리액트 훅을 지원하기 전까지는 클래스형 컴포넌트를 주로 사용해왔다. 함수형 컴포넌트에서는 state와 라이프사이클 메서드를 사용할 수 없었기 때문에 프레젠테이셔널 컴포넌트에만 주로 사용되었다고 한다.

프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트

  • UI를 그리는 컴포넌트와 데이터를 관리하는 컴포넌트로 나누어 프로젝트를 관리하는 방법.

하지만 현재는 공식문서에서도 함수형 컴포넌트를 사용할 것을 권장하고 있으며, 실제로 사용과 선언이 더 간편하고 메모리 자원을 적게 사용한다는 이점도 있다.



state

  • 클래스형 컴포넌트
    - constructor 내에서 this.state로 초기값을 설정 가능.
    - constructor없이도 state = {}로 초기값을 설정 가능.
    - this.setState()를 사용해 state값을 변경
    - state는 객체형식으로 관리.

  • 함수형 컴포넌트
    - useState hook을 사용해 state 사용.
    - useState hook 호출 시 배열을 반환하는데, 첫 번째 요소는 state 값, 두 번째 요소는 state를 변환하는 함수로 사용된다.



this

  • 클래스형 컴포넌트
    - state나 props 등 내부의 요소를 불러와 사용할 때 this.를 사용해야한다.
    - 함수를 선언할 때 바로 화살표함수로 선언할 수 있으며, 이를 jsx 내에서 사용할 때에도 this.가 필요하다.

  • 함수형 컴포넌트
    - 함수를 선언할 때 const를 사용해 선언하며, 이후 호출 시 별도의 this가 없어도 된다.



life cycle

  • 클래스형 컴포넌트
    - 라이프사이클 메서드 사용.
    - render 메서드를 통해 jsx 반환.
  • 함수형 컴포넌트
    - 리액트 훅을 사용해 라이프사이클 메서드의 역할을 어느정도 대체.
    - return으로 바로 jsx 반환.
profile
언젠간 되겠지!

0개의 댓글