컴포넌트(Component)란?

컴포넌트(component)

컴포넌트란, 재사용이 가능한 각각의 독립된 모듈이다. (재사용 가능한 UI 코드 조각)
우리가 흔히 이용하는 웹사이트들을 살펴보면, 반복되는 요소가 아주 많다는 것을 알 수 있다.

예시로 구글 검색 결과 페이지를 가져왔는데,
사진에서 보이는 관련 검색어만 봐도 벌써 8개의 블록이 반복되는것을 볼 수 있다.
위 사진에서도 볼 수 있듯, 컴포넌트 기반 개발을 한다면 이런 반복되는 요소를 일일히 입력하지 않고 이미 만들어진 컴포넌트들을 조합하여 화면을 구성할 수 있다.

컴포넌트 기반 개발의 특징

• 때에 따라 컨텐츠만 다르게 넘기면 일관적인 UI를 보여줄 수 있다.
• 만약 회사의 경우 다른 사람이 만들어 놓은 컴포넌트를 가져다가 컨텐츠만 변경해서 쓴다면 훨씬 효율적으로 프로그래밍을 할 수 있고, 시간도 절약되고, 웹사이트 전체적으로 일관성이 주어진다는 장점이 있다.
• 최근 웹개발에서 컴포넌트 기반 개발은 당연한 것 이다.
• 리액트 개발의 경우 컴포넌트를 개발하는 것과 동일한 개념이다.

props로 각각 다른 속성 넘겨주기

컴포넌트란 재사용이 가능한 UI 코드 조각이라고 했다.
그렇다면, 컴포넌트를 만든 후 재사용은 어떤식으로 할 수 있을까? 바로 props(properties)로 넘겨주면 된다.

예를들어 카드 컴포넌트를 생성한 후 각각 이미지와 타이틀만 다르게 하려면 이렇게 하면 된다.

<Card emoji={dog} title="멍멍" />
<Card emoji={cat} title="야옹" />

function Card(props) {
  return (
    <div>
	    {props.emoji}
	    <h2>props.title</h2>
    </div>
  )
}

이렇게 사용하면, 어떤 props를 넘기는지에 따라 각각 dog과 cat의 이모지를 동일한 ui의 카드에 나타낼 수 있다. 그래서 재사용이 용이하다!