[React] 클래스형 컴포넌트, 함수형 컴포넌트 차이점

HJ·2022년 4월 18일
0

Interview prep

목록 보기
4/12

클래스형 컴포넌트

  • 라이프사이클 메서드 사용 가능
  • 임의 메서드 정의 가능
  • 반드시 render 메서드를 통해서 JSX로 작성된 내용을 렌더링 해주어야 함

함수형 컴포넌트

  • 클래스형에 비해 선언이 좀 간편하고 메모리 자원을 적게 사용한다는 장점이 있음
  • 과거에는 state 및 라이프사이클 메서드를 사용할 수 없다는 단점이 있었지만 리액트 훅의 도입으로 해결됨

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 반환

출처: https://velog.io/@ricky0813/클래스형-컴포넌트-vs-함수형-컴포넌트

0개의 댓글