클래스형 컴포넌트와 함수형 컴포넌트 비교

클래스형 컴포넌트와 함수형 컴포넌트 비교

🚀 선언방식

클래스형 컴포넌트

import React, { Component } from 'react';

class class extends Component {
  render() {
    return (
      <div>

      </div>
    );
  }
}

export default class;

함수형 컴포넌트

import React from 'react';

const function = () => {
  return (

  )
};

export default function;

//or

import React from 'react';

function function() {
  return (
    <div>

    </div>
  );
}

export default function;

🚀 State : 상태

• 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값
• 화면상에 보여줄 컴포넌트의 정보(상태)를 지니고 있는 객체

클래스형 컴포넌트

• render함수가 필요하며, return문 안에 JSX요소 작성
• state를 설정할 때 클래스 선언문과 render 사이에constructor 함수 작성

class class extends Component {
constructor(){
	super();
	this.state = {
    key : value
    }
}

  render() {

• this.state값에 컴포넌트 초기 상태값 설정
• 컴포넌트의 state는 객체
• this.setState로 state값 변경

함수형 컴포넌트

const [current, setCurrent] = useState(1);

• Hook인 useState를 사용하며 상태유지값과 그 값을 반환하는 함수를 반환
• state(current)는 첫번째 전달된 인자1과 동일
• setCurrent 함수로 state 값 갱신

🚀 Props : properties(속성)

• 컴포넌트의 속성값
• 부모 컴포넌트로부터 전달받은 데이터를 지니고 있는 객체

클래스형 컴포넌트

this.props.funding_user_Info;
this.props.fundingTotalCount;
this.props.likeTotalCount;

//구조분해할당
const { funding_user_Info, fundingTotalCount, likeTotalCount } = this.props;

• this.props.(props 객체의 특정 key)를 통해 전달받은 데이터 사용

함수형 컴포넌트

const BookingCard = ({ result, initialstate }) => {};

• 바로 호출 가능

🚀 LifeCycle

클래스형 컴포넌트

1. constructor
2. render
3. componentDidMount
4. (fetch 완료)
5. render
6. (setState)
7. componentDidUpdate (setState 되었기 때문에 컴포넌트 업데이트 발생)
8. componentWillUnmount

• 컴포넌트가 DOM 위에서 생성되기 전 후 데이터가 변경되어 상태를 업데이트 하기 전 후 로 실행되는 메소드

함수형 컴포넌트

• useEffect 함수 컴포넌트 내에서 side effects를 수행
• 클래스형 컴포넌트와는 다르게 하나의 API로 통일

useEffect(function);

useEffect(() => {}, [])

🚀 함수형 컴포넌트의 장점

• 클래스형 컴포넌트보다 선언이 간편
• 클래스형 컴포넌트보다 메모리자원 덜 사용
• 컴포넌트 사이에서 상태와 관련된 로직 재사용 가능 (Custom Hook)

• react