[React] Component

JSX

JSX는 React 엘리먼트를 생성한다.

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

위의 코드는 아래와 같이 컴파일 된다.

React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)

JSX는 자바스크립트가 확장된 형태로 브라우저가 바로 실행할 수 있는 자바스크립트 코드가 아니다. 그렇기 때문에 JSX코드를 Babel을 이용하여 자바스크립트 코드를 변환한다. 이 때 JSX코드는 React.createElement를 호출하는 코드로 컴파일 되기 때문에 React 라이브러리는 JSX 코드와 같은 스코프 내에 존재해야한다.

엘리먼트

엘리먼트는 React 앱의 가장 작은 단위이다. 엘리먼트는 화면에 표시할 내용을 기술한다.
엘리먼트는 컴포넌트의 구성요소이다.

const element = <h1>Hello, world</h1>;

React 엘리먼트를 루트 DOM노드에 렌더링하려면 둘 다 ReactDOM.render()로 전달하면 된다.

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

React 엘리먼트는 불변객체이다.

리액트의 컴포넌트

React 컴포넌트를 사용하면 UI를 독립적이고 재사용할 수 있는 부분으로 나누고 각 부분을 분리하여 다룰 수 있다.

React에서는 컴포넌트를 class 또는 함수로 정의할 수 있다. class로 정의된 컴포넌트는 함수형 컴포넌트보다 많은 기능을 제공한다. class 컴포넌트는 React.Component를 상속받아야한다.
컴포넌트는 props(속성을 나타내는 데이터) 객체 인자를 받은 후 React 엘리먼트를 반환한다. React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달하는데 이것을 props라고한다.

props는 읽기전용이다.
React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야한다.
순수 함수란 입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환하는 함수이다.

나의 정리

JSX는 React 컴포넌트를 지정하고, babel을 통해 컴파일 되어 javascript로 바뀐다. 이 때 React.createElement를 호출하고 React element가 생성된다. 이 React element를 ReactDOM.render()함수로 전달하여 렌더링한다.