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

react컴포넌트 선언하는 방법

1. 클래스형 컴포넌트
2. 함수형 컴포넌트

차이점

선언 방식

• 함수형

import React from 'react';
import './App.css';

function App() {
  const name = 'react';
  return <div className = "react">{name}</div>
}

export default App;

• 클래스형

import React, {Component} from 'react';

class App extends Component {
  render() {
    const name = 'react';
    return <div className="react">{name}</div>
  }
}

export default App;

클래스형의 핵심

• class라는 키워드가 반드시 필요하다.
• component로 상속(부모의 모든 속성&메서드 물려)받아야한다.
• render()메소드가 반드시 있어야한다.

+render()

• 컴포넌트가 어떻게 생겼는지 정의하는 역할을 하는 html형식의 문자열을 반환하지 않고, 뷰가 어떻게 생기고 작동하는지 정보를 지늰 객체를 반환한다.
• 컴포넌트 안에 또다른 컴포넌트가 들어갈 수 있는데 render함수를 실행하면 그 내부에 있는 컴포넌트들도 재귀적(어떤 사건이 자신을 포함하고 다시 자기 자신을 사용해 정의 될 때)으로 랜더링한다.

클래스형은

• state, lifecycle 관련 기능 사용이 가능하다.
• 메모리 자원을 함수형 컴포넌트보다 좀더 사용한다.
• 임의 메서드 정의를 할 수 있다.

+state()
일반 자바 스크립트의 객체.

+LifeCycle

• lifeCycle API는 컴포넌트가 DOM위에 생성되기 전 후 및 데이터가 변경되어 상태를 업데이트 하기 전 후로 실행되는 메소드들이다
• 종류 constructor, componentWILLMount, conponentDidMount

함수형은

• state, lifecycle 관련 기능사용이 불가하다. (hook를 통해 해결한다)
• 메모리 자원을 함수형 컴포넌트보다 덜 사용한다.
• 컴포넌트 선언이 편하다.

클래스는 state(컴포넌트 내부에서 바뀔수 있는 값)가

• constructor 안에서 this.state 초기값 설정이 가능하다.
• constructor 없이 바로 state 초기값을 설정할 수 있다.
• 객체 형식이다.
• this.setState함수로 state 값을 변경 가능하다.

함수는 state가

• useState 함수로 사용한다.
• useState함수를 호출하면 배열이 반환되는데 원소는 현재 상태이다.
• 두번째 원소는 상태를 바꾸어주는 함수이다.

+props

• 컴포넌트의 속성을 설정할때 사용하는 요소이다.
• 읽기 전용이다
• 컴포넌트 자체 props를 수정해서는 안된다.
• 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수함수처럼 동작해야한다.
• 수정 되는것은 state다.

클래스는 컴포넌트의 props를

• this.props로 통해 값을 불러올 수 있다.
• 부모 객체의 키값, 자식 props 활용
• props를 불러올 필요 없이 바로 호출 가능하다.

클래스형 컴포넌ㄴ트에서 이벤트 핸들링

• 함수 선언시 에로우 화살로 바로 선언이 가능하다.
• 요소에서 적용하기 위해서는 this를 붙여야 한다.

함수형 컴포넌트에서 이벤트 핸들링

• const키워드 + 함수 형태로 선언해야한다.
• 요소에서 적용하기 위해서는 this가 필요없다.