안녕하세요. 이번시간에는 컴포넌트라는 개념에 대해 알아보겠습니다.
흔히들 리액트는 컴포넌트 단위별로 개발을 한다고 합니다.
컴포넌트란?
컴포넌트를 네이버 영어사전에 component를 검색하면
(구성) 요소, 부품 이라고 나옵니다.
마찬가지로, 리액트에서도 컴포넌트는 웹어플리케이션을 만들기 위한 조각조각의 부품같은겁니다.
예를들어 자동차라는 웹앱을 만들기 위해서
엔진컴포넌트, 핸들컴포넌트, 타이어컴포넌트 많은 부품들이 필요합니다.
컴포넌트 단위로 이루어지기 때문에 어떠한 부품이 고장이나면 빠르게 그것을 찾아 수정이 가능하며 유지/보수가 쉽다는 장점이 있을 수 있습니다.
컴포넌트 만드는 방법
컴포넌트는 크게 클래스형 컴포넌트, 함수형 컴포넌트가 있습니다.
1) 클래스형 컴포넌트
class Engine extends Component {
render() {
return (
<div>
<div>저는 과거에 주로 쓰였던 엔진입니다 :(</div>
</div>
);
}
}
2) 함수형 컴포넌트
function Engine() => {
return (
<div>
<div>저는 훌륭한 최신 엔진입니다. :)</div>
</div>
);
};언뜻 봐도 함수형 컴포넌트가 훨씬 간편해 보입니다.
function Car() {
return (
<div className="Car">
<Engine></Engine>
</div>
);
}이런식으로 만든 엔진 컴포넌트를 자동차라는 본체에 넣어서 조립을 해 나가는 것입니다.
