[React] 컴포넌트란?

1. 컴포넌트? 

리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체이다. 

=> 이것을 보여주는 것이 렌더링 

 

말이 너무 어려운데, 한마디로 앱을 이루는 최소한의 단위이다. 

 

2. 컴포넌트의 종류 

컴포넌트의 종류는 함수형 컴포넌트와 클래스형 컴포넌트 2가지가 있다. 

 

1. 함수형 컴포넌트 

function Componenet(props) {
	return <h1>Hello! World!</h1>
}

JavaScript 함수의 형태로 만들기 때문에 함수형 컴포넌트라고 불린다. 

 

• 장점
  • 클래스형 컴포넌트보다 선언하기 편하다
  • 메모리 자원도 클래스형 컴포넌트보다 덜 사용한다.
  • 결과물의 파일 크기가 더 작다.( 큰 차이까진 아니다)
• 단점
  • state와 라이프사이클 API의 사용이 불가능하다.(Hooks라는 기능이 도입되므로 대부분 해결되었다.)

2. 클래스형 컴포넌트

class Component extends React.Component {
    render () {
    	return <h1>Hello! World!</h1>
    }
}

class 형태로 만들기 때문에 클래스형 컴포넌트라고 불린다. 

 

• state 기능 및 라이프사이클 기능을 사용할 수 있다.
• 임의 메서드를 정의할 수 있다.
• render() 함수가 반드시 필요하고 JSX를 안에서 반환해줘야 한다.