📲 컴포넌트란?

• Component : 재활용 가능한 UI 구성 단위

• Ex) Webucks Detail 페이지

->  Ex) Webucks main 페이지를 Component로 나눈다면, 크게 Nav 컴포넌트와
Main 컴포넌트로 나눌 수 있으며, 화면의 구성 요소들을 컴포넌트로 나눌 수 있다.

-> 컴포넌트의 특징

• 재활용하여 사용할 수 있다.
• 코드 유지보수에 좋다.
• 해당 페이지가 어떻게 구성되어 있는지 한 눈에 파악하기 좋다.
• 컴포넌트는 또 다른 컴포넌트를 포함할 수 있다. (부모 컴포넌트 - 자식 컴포넌트)

-> 컴포넌트의 종류 (Class & Functional)

컴포넌트의 종류, 즉 컴포넌트를 선언하는 방식에는 다음의 두 가지가 있습니다.

• Class형 컴포넌트(Class Component)
• 함수형 컴포넌트(Functional Component)

-> Class Component

import React from 'react'

class Component extends React.Component {
  render() {
    return (
			<div>
				<h1>이것은 Class Component입니다.!</h1>
			</div>
		)
  }
}

export default Component

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

-> Functional Component

import React from 'react'

function Component(){
  return (
			<div>
				<h1>This is Functional Component!</h1>
			</div>
		)
};

export default Component

-> 함수형 컴포넌트는 클래스형 컴포넌트에 비해서 훨씬 간단하고 단순하지만 state를 관리하지 못한다는 단점이 있다.
-> React 16.8 버전에서 Hook 기능이 추가되면서 함수형 컴포넌트에서도 state를 사용할 수 있게 되었고 그 후부터 클래스형 컴포넌트보다는 함수형 컴포넌트를 사용하는 추세로 전환되고 있다.