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

요즘은 대부분 함수형 컴포넌트를 사용하지만 클래스형 컴포넌트가 무엇인지는 알고 있어야 합니다!

두 컴포넌트를 구분짓는 차이점은 클래스형 컴포넌트의 경우 state, lifeCycle 관련 기능 사용이 가능하지만,
함수형 컴포넌트의 경우 state, lifeCycle 관련 기능 사용이 불가하고 Hook을 통해 해결합니다.

 

1. 클래스형 컴포넌트

import React, {Component} from 'react';

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

export default App;

// state 사용 시 예시1
constructor(props){
	super(props);
    
    this.state = {
    	name: 'name',
        items: []
    }
}

// state 사용 시 예시2
class App extends Component {
	name: 'name',
    items: []
}

// props 사용 시
class App extends Component {
  render() {
    const {name, age} = this.props;
    return <div className="react">{name} and {age}</div>
  }
}

* class 키워드가 필요함

* extends를 통해 component 상속 받아야 함

* render() 메소드가 꼭 필요함

* state 사용 시, constructor 안에서 혹은 없이 this.state로 초기값 설정할 수 있음

+ 클래스형 컴포넌트의 state는 객체 형식임

* props 사용 시, this.props로 불러와서 사용

 

2. 함수형 컴포넌트

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

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

export default App;

// state 사용 시
const App = () => {
	const {name, setName} = useState('name');
    const onClickBtn = () => setName('userName');
}

// props 사용 시
const App = ({name, age}) => {
	return(
    	<div>
        	{name} and {age}
        </div>
    )
}

* 컴포넌트 선언이 더 간결함

* 함수 자체가 렌더 함수이기 때문에 render() 메소드를 사용하지 않고, component 상속 필요 없음

* state 사용 시, useState로 핸들링함

* props 사용 시, 렌더 함수의 parameter로 props를 전달받아 사용함

 

=> 클래스형 컴포넌트보다 가볍고 최적화를 더 쉽게 수행할 수 있어 함수형 컴포넌트 쓰는 것이 권장됨

 

Resources

https://soopiri.tistory.com/23