[React] 함수형 컴포넌트 VS 클래스형 컴포넌트

안녕하세요. 오늘은 컴포넌트에 대해서 알아보겠습니다.

컴포넌트는 인터페이스를 설계할 때 사용자가 볼 수 있는 여러가지 요소들을 뜻합니다.

컴포넌트는 props를 받아서 elelement를 출력하는 함수와 같습니다.

이러한 컴포넌트를 선언하는 방식으로는 두가지가 있습니다. 바로 함수형 컴포넌트와 클래스형 컴포넌트!

과연 둘은 어떤 차이가 있고, 어떤 기준으로 사용할 컴포넌트를 정하는게 좋을까요?

저는 이에 대한 내용을 '리액트를 다루는 기술' 책과 리액트 공식문서를 사용하여 공부했습니다.

(ko.reactjs.org/docs/components-and-props.html#function-and-class-components)

제가 이해한 개념을 쓰는 것이기 때문에, 틀릴 수도 있다는 점!

 

✔코드비교

//함수형 컴포넌트
import React from 'react';
import './App.css';

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


const App = () => {
	const name = '리액트';
    return <div className = "react">{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;

 

✔ 함수형 컴포넌트

props(속성을 나타내는 데이터) 객체 인자를 받은 후, react element(예, props.name)를 반환

 

✔ 함수형 컴포넌트의 특징

• 선언하기 편함
• 메모리 자원 적게 사용
• 파일 크기가 클래스형과 비교해서 더 적음(별 차이 없음)
• Hooks 사용

 

✔ 클래스형 컴포넌트의 특징

• render 함수 필수
• state와 라이프사이클 API 기능 사용가능
• 임의 메서드 정의

 

✔ 클래스형 컴포넌트

클래스형 컴포넌트는 state 초기값을 constructor메서드에서 생성해줘야한다. constructor사용할 때는 super(props)를 반드시 호출해야한다. this.state로 조회하며, this.setState를 통해서 state값을 바꿔준다.

constructor메서드를 쓰고 싶지 않을 때는 화살표함수를 써서 새 메서드를 만들 때마다 constructor를 수정해야하는 부작용을 막아준다.

 

리액트 hook이 나타나면서 클래스형의 state가 쓰여지지 않는 함수형 컴포넌트의 단점을 극복했습니다.

리액트 훅은 다음의 포스트에서 알아보겠습니다.