Component 🐾

1. Component

1-1. 컴포넌트의 정의

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

1-2. 컴포넌트의 특징

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

1-3. 컴포넌트는 언제 필요할까?

- 반복해서 출현하는 HTML UI
- 자주 변경되는 HTML UI
- 다른 페이지를 만들때 컴포넌트 사용 (컴포넌트 대신 withRouterHOC 사용 가능)

1-4. 컴포넌트 사용시 유의점

- 컴포넌트의 첫글자는 대문자로 작성해야 한다. (소문자 입력 시 에러 발생)
- 컴포넌트를 과하게 많이 사용하면 복잡해질 수 있다. (state 사용할 때)

2. Class vs Functional Component

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

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

1) Class Component

import React from 'react'

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

export default Component

• 클래스형 컴포넌트에서는 위와같이 render 함수가 꼭 있어야 하고, 그 안에 보여 주어야 할 JSX를 반환한다.
• state 기능 & 라이프사이클 기능 사용 가능
• 임의메서드 정의 가능

2) Functional Component

import React from 'react'

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

export default Component

• 선언하기 간편하다.
• 메모리 자원이 덜 사용된다.(프로젝트가 종료되고 빌드 후 배포시에도 결과물 파일크기가 더 작다.)
• state와 라이프사이클 API 사용이 불가능하다는 단점이 있었지만 앞으로 배울 Hooks기능 도입되면서 해결✨!

🐥 결론 - 클레스형과 함수형은 역할과 성능은 같다. 그리고 분명히 함수형이 더 편리하고 많이 사용되고 있다. 하지만 클레스형으로 기본기를 익힌후 Hooks를 완벽히 이해하고 함수형으로 다다다닥 작성할거다 ..🤪