[4장]Component의 이해

Component의 사용은 React에서만 지원해주는 개념은 아니다. Angular, Vue등 React와 어깨를 나란히 하는 굵직한 프레임워크 및 라이브러리에서 Component라는 것을 지원하고, Component를 사용해서 화면을 만들어 가도록 권장한다.

Component란??

만약 우리가 홈페이지 메인 화면을 구성한다고 생각해보자. 이 메인 화면에는 기본적으로 사이트의 머리말이 들어갈 header와 본문이 들어갈 body 그리고 회사 정보 및 규약을 나타내기 위한 footer로 구성 될 것이다. 메인 화면을 구성하는데 3개의 구성 요소가 포함 되는 것을 알 수 있다. 이 3개의 구성 요소는 서로 독립적이고 자기만의 표현 방식을 가지고 있다. 여기서 우리는 이 각 구성 요소들을 Component라고 부른다.</br>

Component의 특징

여기에 Component 특징에 대해서 잘 정리 되어 있으며, 몇가지 특징에 대해 나 나름대로 React 관점에서 설명을 추가 해보고자 한다.

1. 독립적 소프트웨어 모듈
   React에서 Component를 여러 개 뭉쳐서 개발 하면 필연적으로 Component간의 의존성이 생긴다. 하지만 여기서 말하는 “독립적”이라는 말은 객체지향 설계 중에 단일 책임 원칙(Single Responsibility Principle: SRP)을 지킨다라는 의미로 볼 수 있다. 예를 들어 Walk라는 Component와 Place라는 Component가 합쳐져서 Place로 Walk한다라는 의미의 Move Componet를 나타 난다고 하자. Walk와 Place는 의존되어 동작하지만 SRP를 지켜 서로의 책임에 대해서 독립적이므로 Walk를 Fly라는 Component로 바꿔주면 ‘Place로 Fly한다.’로 Move Component를 변경 할 수 있다.
   
2. 컴포넌트는 구현, 명세화, 패키지화, 그리고 배포 예를 들어 A라는 회사에서 B, C라는 홈페이지를 동시에 개발 할 때 사이트의 Header를 공통으로 사용하고자 한다면, Header라는 컴포넌트를 구현한 뒤 배포하여 모듈로서 사용 할 수 있다.
   

React에서의 Component

React에서는 함수형 Component와 클래스형 Component를 지원한다. 함수형의 경우 아래와 같이 일반 JS 함수의 리턴 값이나 변수 값을 JSX로 나타내 주면 된다.

function Welcome(props) {
    return <h1>Hello, 우현</h1>;
}

클래스형의 경우 아래와 같이 React.Component를 상속하여 render라는 함수의 return문을 JSX로 작성해주어야 한다.

class Welcome extends React.Component {
    render() {
    return <h1>Hello, 우현</h1>;
  }
}

Component를 생성해서 사용하는거 정말 간단하다.