컴포넌트는 javascript의 함수와 유사하다. props를 통해 입력을 받고 화면에 어떻게 표시되는지 기술하는 React Element이다.

즉, 컴포넌트의 props는 arguments이고, return은 react Element이다.

컴포넌트는 함수고, 함수는 값이고, 그 값은 React Element이니까, 결국 컴포넌트는 props를 input으로 가지고 만든 React Element이다.

함수 컴포넌트와 클래스 컴포넌트

• 함수 컴포넌트

function Welcome(props) {
	return <h1>Hello, {props.name}</h1>
}

• 클래스 컴포넌트

class Welcome extends React.Component {
	render() {
		return <h1>Hello, {this.props.name}</h1>
	}
}

컴포넌트 렌더링

컴포넌트는 일반적인 DOM을 렌더링할 수도 있고, 사용자 정의 컴포넌트로도 나타낼 수 있다.

• 일반적인 DOM 컴포넌트

const element = <div />

• 사용자 정의 컴포넌트

const element = <Welcome name="Cheol" />

React가 사용자 정의 컴포넌트를 만나면 attribute값과 자식을 props라는 단일 객체를 통해 전달한다.

function Welcome(props) {
	return <h1>Hello, {props.name}</h1>;
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Welcome name="Cheol" />);

컴포넌트 합성