<React> 클래스형과 함수형 컴포넌트의 차이?

 

 

 

클래스형과 함수형 컴포넌트의 차이가 무엇일까?

이 질문을 받았을때 제대로 답하지 못한게 부끄러워서 급하게 정리하게 되었다. 

사용하면서도 제대로 알지 못하는게 조금 부끄러웠다... 공식문서에서는 React 16.8.0 버전부터 Hook을 지원해 함수형 컴포넌트를 사용하길 권장하지만 옛날에 만들어진 리액트 관련 라이브러리의 경우 Hooks 지원이 안되는 경우도 있고  react-native 관련 라우터 라이브러리인 react-native-navigation 의 경우 클래스형 컴포넌트가 필요할 수 도 있다.

 

 

바로 고!!

 

클래스형 컴포넌트란?

 

import React, { Component } from 'react';

class Hello extends Component {
  render() {
    const { color, name } = this.props;
    return (
      <div style={{ color }}>
        안녕 {name}
      </div>
    );
  }
}

export default Hello;

특징

• class 키워드로 선언해야한다.
• { Component } 를 import해서 상속받아야 한다.
• 클래스형 컴포넌트에는 render() 메서드가 꼭 필요하다. 이 메서드 안에 JSX 코드를 작성하면된다.
• props를 받아서 써야할때에는 this.props로 사용하면 된다.
• 컴포넌트 내부에서 바뀔 수 있는 값은 state로 관리해야한다.

차이점

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

 

 

함수형 컴포넌트란?

 

import React, {useState} from 'react';

function Hello(props) {
	const [userNick, setUserNick] = useStat()

const useHook = (e) =>{
	setUserNick(e.value);
}

const sayHello = () =>{
	console.log('인사를 했다')
}

  return (
  <div>
    <div>안녕하세요 제 이름은 {props.name}</div>
    <div> 제 별명은 : </div>
    <input type="text" onChange ={useHook}> </input>
    <button conKeyPress={sayHello}> 인사했다면 클릭 </button>
  </div>
  
  )
}

export default Hello;

특징

• props 를 불러올 필요없이 바로 호출이 가능하다.
• 함수를 사용할 때 this가 필요없다. const 키워드로 선언 후 함수형으로 사용하면된다.
• 함수를 이벤트에 등록할때 () 없이 등록해야한다. (그렇지 않으면 랜더린된 즉시 함수가 실행된다. 경우에따라 필요할 수 도 있지만 대게 경우에만 발동되도록 하기때문에 주의하자)
• return() 메소드 안에 JSX 코드를 작성하면 된다.

 

차이점

• 클래스 형에서 상태관리를 할때 state를 사용했지만 함수형에서는 Hook을 사용한다.