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

1. 선언방식

🏭 클래스형 컴포넌트

• class 키워드로 시작합니다.
• Component로 상속을 받아야합니다.
• reunder() 메소드가 반드시 필요합니다.
• state, lifeCycle 관련 기능사용이 가능합니다.
• 함수형보다 메모리 자원을 더 사용합니다.
• 임의 메소드를 정의할 수 있습니다.

📦 함수형 컴포넌트

• state, lifeCycle 관련 기능을 사용할 수 없습니다. (Hook을 통해 해결)
• 클래스형보다 메모리 자원을 덜 사용합니다.
• 컴포넌트 선언이 편합니다.

2. state

🏭 클래스형 컴포넌트

• constructor 안에서 this.state 초기 값 설정 가능합니다.
• counstructor 없이도 바로 state 초기값을 설정 가능합니다.
• this.setState() 를 통해 state값을 변경합니다.
• 클래스형의 state는 객체형식입니다.

📦 함수형 컴포넌트

• useState 함수로 state를 사용합니다.
• useState 함수를 호출하면 배열이 반환되는데 첫 번째 원소는 현재 상태, 두번째 원소는 상태를 바꿔주는 함수입니다.

3. props

🏭 클래스형 컴포넌트

• this.props로 통해 값을 불러올 수 있습니다.

📦 함수형 컴포넌트

• props를 불러올 필요 없이 바로 호출 할 수 있습니다.

4. 이벤트 핸들링

🏭 클래스형 컴포넌트

• 함수 선언시 화살표 함수로 바로 선언 가능합니다.
• 요소에 적용할때 this.를 붙여줘야 합니다.

📦 함수형 컴포넌트

• const + 함수 형태로 선언해야 합니다.
• 요소에 적용할때 this가 필요없습니다.

5. Life Cycle

🏭 클래스형 컴포넌트

Mounting(생성 될 때): 컴포넌트가 인스턴스로 생성되고 DOM 트리에 삽입되어 브라우저상에 나타나는 과정

• constructor, static getDerivedStateFromProps, render, componentDidMount

Updating (업데이트 할 때): 컴포넌트 props 또는 state가 바뀌었을 때

• static getDerivedStateFromProps, shouldComponentUpdate, render, getSnapShotBeforeUpdate

Unmounting (제거할 때): 컴포넌트가 브라우저상에서 사라질때

• componentWillUnmount

- 컴포넌트 에러가 발생했을 때 -

• componentDidCatch

📦 함수형 컴포넌트

• Hooks
  • useState
  • useEffect
  • useContext
  • useReducer
  • useMemo
  • useCallback
  • useRef

참고

자세한 내용과 예시들을 보고 싶다면 아래의 링크들로 이동해서 읽어주세요. 아래의 글들을 참고하여 작성했습니다.

함수형 컴포넌트와 클래스형 컴포넌트의 차이

React 공식 문서 Hook (2) : Hook 개요