리액트 입문기 - 컴포넌트의 종류

컴포넌트는 특정부분이 어떻게 생기지를 정하는 선언체를 말합니다. 컴포넌트는 클래스형, 함수형 두가지가 존재합니다. 지금부터 컴포넌트에 대해서 자세히 알아보겠습니다.

클래스형 컴포넌트

클래스형 컴포넌트의 경우 state기능 및 라이프 사이클 기능을 사용할 수 있습니다.

클래스형 컴포넌트는 render함수가 꼭 있어야 하고, 그안에 보여주어야 할 JSX를 반환해야합니다.

아래는 클래스형으로 작성한 컴포넌트 입니다.

import React, { Componenet } from 'react';
class App extends Component {
	render(){
    	const name = 'react';
        return <div className='react'>{name}</div>
    }
}

함수형 컴포넌트

함수형 컴포넌트는 클래스형 컴포넌트보다 선언하기 쉽고 메모리 자원도 덜 사용합니다. 하지만 클래스형에서 사용하느 state 와 라이프사이클 API를 사용하지 못한다는 단점이 있습니다. 하지만 v16업데이트 후 Hooks기능이 도입되면서 해결이 되었습니다.

아래는 함수형으로 작성한 컴포넌트 입니다.

import Reactfrom 'react';
function App{
	const name = 'react';
	return <div className='react'>{name}</div>
}

참고문서
리액트를 다루는 기술