컴포넌트와 props (2)

컴포넌트 만들기

함수형 컴포넌트

요즘 많이 쓰는 컴포넌트. 훅(Hooks)와 관련되어 있다.

javascript

function Welcome(props){
	return <h1>안녕, {props.name}<h1>;
}

클래스 컴포넌트

리액트 초창기에 사용한 컴포넌트.

javascript

class Welcome extends React.Component{
	render() {
		return <h1>안녕, {props.name}<h1>;
	}
}

자바스크립트의 클래스 기능을 이용
항상 React.Component를 상속받아 만든다.

컴포넌트 합성

여러 개의 컴포넌트를 합쳐서 하나의 컴포넌트를 만드는 것.

복잡한 화면을 구현할 때 주로 쓰는 방식.

javascript

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

function App(props) {
	return (
		<div>
			<Welcome name="Mike" />
			<Welcome name="Steve" />
			<Welcome name="Jane" />
		</div>
	)
}

ReactDOM.render(
	<App />,
	document.getElementById('root')
)

컴포넌트 추출

큰 컴포넌트에서 일부를 추출해서 새 컴포넌트를 만드는 것.

좀 더 코드를 간결하게 짤 수 있음.