리액트는 페이스북에서 개발하고 관리하는 UI 라이브러리인데, 전역 상태 관리, 라우팅, 빌드 시스템 등은 제공하지 않고 오로지 UI 기능만 제공한다. 시스템을 구축하고 각자의 환경에 맞도록 최적화할 수 있는 장점이 있지만, 설정해야할 것이 많기 때문에 진입장벽이 존재한다. 이에 따라 리액트 팀에서는 create-react-app 명령어를 통해 개발환경을 쉽게 구축할 수 있도록 한다.
리액트를 포함하여 FE 라이브러리 / 프레임워크를 사용하는 가장 큰 이유는, UI를 자동으로 업데이트 해준다는 점 이다. 프로그램의 상태 가 변하면 UI도 변경되는데, 다음과 같이 함축적으로 표현할 수 있다.
UI = render(state)상태가 변경되는 경우는 다음과 같을 것이다 : API 통신 혹은, 사용자의 이벤트
리액트는 변경되는 상태값들을 추적하여 UI를 자동으로 업데이트 해준다.
리액트를 사용하는 또 다른 이유는, 가상 돔(virtual dom)을 통해 UI를 빠르게 업데이트 하는 것이다.
가상 돔이란, 이전 UI 상태를 메모리에 유지하여 변경될 UI들을 최소로 계산한다.
createElement 함수는 리액트 요소를 반환한다.
구조는 다음과 같다.
React.createElement(component, props, ...children) => ReactElement첫 번째 매개변수는 문자열이나 리액트 컴포넌트인데, 문자열인 경우 HTML 태그에 해당하는 돔 요소가 생성된다.
createElement('p', null, 'hello')는
<div>
<p>hello</p>
</div>와 같은 형태이다.
두 번째 매개변수 props 는 컴포넌트가 사용하는 데이터를 나타내는데, style이나 className 같은 것들이다.
세 번째 매개변수 children 은 해당 컴포넌트가 감싸고 있는 내부의 컴포넌트를 가리킨다.
대부분은 createElement를 직접 작성하지 않고, 바벨을 통해 JSX를 사용한다.