아래 내용은 생활코딩님 강의를 듣고 이해한 내용을 기반으로 작성하였습니다.

컴포넌트 형식

React에서는 다음과 같은 방식으로 컴포넌트를 정의합니다.

import { Component } from 'react'

class Comp1(컴포넌트명) extends Component {
    render() {
        return(
            //최상위 container안에 들어있는 html 작성
            <div class="greeting">
            	Hello!!
            </div>
        );
    }
}

위의 코드는 정확히 말하자면 html도, javascript도 아닙니다. React를 만든 페이스북이 개발한 jsx라는 구문 확장 문법입니다.
컴포넌트의 첫 글자는 대문자이어야 하는데, 이를 소문자로 한다면 React는 컴포넌트를 HTML태그로 착각할 가능성이 높기 때문입니다.

위와 같이 정의한다면 create-react-app에서 만든 App클래스에서 컴포넌트들을 보기쉽게 사용할 수 있습니다.

class App extends Component {
  render() {
    return (
      <div className="App">
        <Comp1></Comp1>
        <Comp2></Comp2>
      </div>
    );
  }
}

Props

React 공식 문서에서는 props(properties, 특징)를 Arbitrary Input이라고 말합니다.
위의 코드들을 props를 이용하도록 변형시켜 보자면

import { Component } from 'react'

class Comp1(컴포넌트명) extends Component {
    render() {
        return(
            //최상위 container안에 들어있는 html 작성
            <div class="greeting">
            	Hello!! {this.props.name}
            </div>
        );
    }
}

class App extends Component {
  render() {
    return (
      <div className="App">
        <Comp1 name="JW"></Comp1>
        <Comp2></Comp2>
      </div>
    );
  }
}

즉, html의 속성처럼 컴포넌트를 사용할 때 props로 무언가를 정의해준다면 해당 컴포넌트에서 this.props.props이름 을 통해 받아와서 사용할 수 있게 됩니다.
즉, 컴포넌트의 재사용성을 늘리기 위해 리팩토링을 한 것입니다.

propTypes

React는 어떤 props에 어떤 형태가 와야하는지 알 수 없습니다. 따라서 문법에만 맞다면 에러를 출력하지 않습니다. 그래서 예를들어 특정 props에 대해 문자열을 받고싶다, 숫자를 받고싶다고 지정하려면 propTypes를 사용하면 됩니다.

<script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>
함수명.propTypes = {
    prop명: PropTypes.string
    prop명: PropTypes.number
}

PropTypes로 사용할 수 있는 종류는 React 공식 문서에서 확인할 수 있습니다.

개발자도구에서 확인

크롬 확장자 중 React Developer Tools를 통해 html로 분리된 elements가 아니라 components로 분리된 웹페이지를 확인할 수 있습니다.

오른쪽에는 각 컴포넌트의 props도 확인할 수 있습니다.

참고
JSX: https://reactjs.org/docs/introducing-jsx.html
PropTypes: https://reactjs.org/docs/typechecking-with-proptypes.html
Dev Tools: https://reactjs.org/tutorial/tutorial.html#developer-tools