함수 Component
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
이 함수는 데이터를 가진 하나의 “props” (props 는 속성을 나타내는 데이터입니다.) 객체 인자를 받은 후 React Element를 반환하므로 유효한 Component입니다. 이러한 Component는 JavaScript 함수이기 때문에 말 그대로 “함수 Component”라고 호칭합니다.
클래스 Component
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
React Element는 DOM태그 말고 사용자 정의 Component로도 나타낼 수 있습니다.
const element = <Welcome name="Sara" />;
Component는 자신의 출력에 다른 Component를 참조할 수 있습니다. 이는 모든 세부 단계에서 동일한 추상 Component를 사용할 수 있음을 의미합니다.
React 앱에서는 버튼, 폼, 다이얼로그, 화면 등 의 모든 것들이 흔히 Component로 표현됩니다.
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
일반적으로 새 React앱은 최상위에 단일 App Component를 가지고 있습니다. 하지만 기존 앱에 React를 통합하는 경우에는 Button과 같은 작은 Component부터 시작해서 뷰 계층의 상단으로 올라가면서 점진적으로 작업해야 할 수 있습니다.
Component를 여러 개의 작은 Component로 나누는 것을 두려워하지 마세요