리액트를 왜 쓰는가?

1. 사용자 경험이 좋아진다.
2. 데이터와 화면의 일치
3. 재사용 컴포넌트 사용

리액트를 가장 간단하게 작성하기

React.createElement

매개변수들의 내용에 따라 어떤 태그를 만들어주는 역할을 담당

ex)

const e = React.CreateElement

return e('button',null,'Like')	//1
return <button>Like</button>	//2

두 리턴 결과는 같은 결과이다.
리액트에서 1번과 같은 방법을 사용하였으나
가독성이 안좋기 때문에 태그와 같은 것을 리턴할 수 있도록 하는 2번과 같은 방법을 사용할 수도 있다.
해당 부분은 ReactDom.render의 첫번째 매개변수에서도 마찬가지로
태그를 통해 처리할 수 도 있다.
=> createElement의 필요성이 없어졌다

ReactDom.render

렌더링하여 처리하는데 첫번째 매개변수는 어떤 태그(컴포넌트)이고 두번째 매개변수는 해당 부분이 붙을 대상이다.

위의 내용에서는 render를 통해 반환한 클래스 컴포넌트 LikeButton이 가진 내용을#root 부분에 추가한다.

JSX

기존에 React.createElement를 통해 사용하던 방법을 개선하기 위해
return 대상에 태그를 넣는 방식이 이용되었고 이는 JS+XML와 유사한 형태로
해당 문법을 지원하기 위해서는 babel을 통해서 사용을 해야한다.
(react-create-app의 경우 babel이 이미 존재하는 것 같다)

출처 ZeroCho