[React] 03. Component

🎈 Component란?

재활용 가능한 UI 구성 단위이다.

1. Component의 특징

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

2. Component의 종류

Component를 선언하는 방식에는 두 가지가 있다.

(1) class형 컴포넌트(Class Component)

import React from 'react'

class Component extends React.Component {
  render() {
    return (
	<div>
	   <h1>This is Class Component!</h1>
	</div>
    )
  }
}

export default Component;

❗ Class Component 에서 중요한 점은 반드시 render() 함수가 포함되어야 한며, 그 안에는 보여줄 JSX를 반환한다.

(2) 함수형 컴포넌트(Functional Component)

import React from 'react';

const ReactComponent = () => {
  return <div>This is functional component</div>;
};

export default ReactComponent;

❗ export default 컴포넌트명; 이 오는 이유는 다른 파일에서 import 하기 위함이다.