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

1. 🧐React의 컴포넌트 종류

React의 컴포넌트 종류는 두가지가 있습니다. 클래스형, 함수형
React 버전 16.8이후 HOOK기능이 추가되어 클래스형 컴포넌트에서만 사용할 수 있었던 state, lifecycle를 함수형 컴포넌트에서도 관리가 가능하게되었습니다.

2. ✅클래스형 컴포넌트 와 함수형 컴포넌트의 선언 방식

1) 🎯함수형 컴포넌트

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

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

export default App;

2) 클래스형 컴포넌트

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() 메소드가 반드시 있어야 합니다.

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

1) state, lifeCycle 관련 기능 사용

클래스형 - 사용가능
함수형 - 사용불가능( Hook을 통하여 해결)

2) state 사용

• 🎯클래스형

1. constructor 안에서 this.state 초기 값을 설정합니다.

constructor(props){
  super(porps)
  this.state ={
    cardList= [],
    card = '',
  }
}

2. conststructor 없이 state 초기값 설정

class cardList extends Component{
  state = {
    cardList = [],
    card = '',
  }
}

3. state 객체 형식

this.state = { cardList:[]. card='',}

4. this.setState함수로 state값 변경

onClick={()=>{
  this.setState({number:number+1});
})

• 🎯함수형

const [name, setName] = useSate('');'

useState 함수로 state를 사용합니다.
useState 함수를 호출하면 배열이 반환되며 첫 번째 원소가 현재상태
두번째 원소가 상태를 바꾸는 함수로 사용됩니다.

3) props 사용

• props는 컴포넌트 속성을 설정할대 사용하는 요소입니다.
• 컴포넌트 자체 props를 수정해서는 안됩니다.
• 모든 react 컴포넌트는 자신의 props를 다룰때 순수 함수처럭 동작해야 합니다.
• 수정되는 것은 state가 수정됩니다.

• 🎯클래스형 컴포넌트

  class cardList extends = card{
   render(){
   	const {title, contents, DateDt} = this.props;
      return (
        <>
        카드 제목은 {title} 내용은 {contents} 작성날짜는 {DateDt}입니다.
        </>
      )
   }
  }

• 🎯함수형 컴포넌트

  props를 불러올 필요 없이 바로 호출이 가능합니다.

const cardComponent = ({title, contents}) => {
 	<> 카드 제목은 {title} 내용은 {contents}입니다.<>
}

4) LifeCycle

React에서 컴포넌트는 화면에 보여지고 사라지는 생성 -> 업데이트 -> 삭제 단게의 생명주기를 가집니다.

🎯클래스형 컴포넌트

Constructor
Redner
ComponentWillMount
ComponentDidMount
등의 함수로 각 lifecycle시점마다 함수가 호출되어 업데이트

🎯함수형 컴포넌트

useEffectHook으로 componentDidMount componentDidUpdate를 관리

useEffect(() => {
  console.log('컴포넌트가 화면에 나타남')
  return () => {
    console.log('컴포넌트가 화면에서 사라짐');
  };
},[]);

마무리

최근에는 함수형 컴포넌트를 많이 사용하지만 아직 클래스형 컴포넌트를 사용하는 기업이 있을뿐더러 현재 서비스화 하고 있는 코드들이 클래스형 컴포넌트로 되어있는경우 유지보수를 할려면 클래스형 컴포넌트에 대해서도 숙지하고 있어야 할 것입니다.
하지만 React 공식문서에서는 함수형 컴포넌트를 권장하기에 추후 새로운 프로젝트를 만들때는 함수형 컴포넌트로 진행하는게 좋겠습니다.