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

함수형 컴포넌트

import React from 'react';

function App() {
  const name = 'react';
  return <div>{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;

클래스형 컴포넌트에는 세가지가 꼭 필요하다.

1) class라는 키워드가 필요하다.

2) Component로 상속을 받아야 한다.   ----> ??아직 모름

3) render()메소드가 반드시 있어야한다.  -----> ??아직 모름

 

 

일반적 차이

클래스형 컴포넌트	함수형 컴포넌트
state, lifeCycle 관련 기능을 사용할 수 있다.	state, lifeCycle 관련 기능을 사용할 수 없다.(hook으로 가능)
메모리 자원을 함수형 컴포넌트보다 조금 더 사용한다.	메모리 자원을 함수형 컴포넌트보다 덜 사용한다,
임의 메서드를 정의할 수 있다.	컴포넌트 선언이 편한다.

state 

:  컴포넌트 내부에서 바뀔 수 있는 값,

props처럼 App컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 가지고 있는 객체지만,

props는 컴포넌트에 전달되는 반면 state는 (함수에 선언된 변수처럼) 컴포넌트 안에서 관리가 된다.

props를 사용했는데도 state를 사용하는 이유는, 사용하는 쪽, 구현하는 쪽을 철저히 분리해 편의성을 각자 도모하기위함.