사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리. 리액트와 같은 프론트엔드 라이브러리 혹은 프레임워크를 사용하는 가장 큰 이유 중 하나는 UI를 자동으로 업데이트해 준다는 점. 리액트는 가상 돔(Virtual Dom) 을 통해 UI를 빠르게 업데이트.
CRA는 리액트로 웹 애플리케이션을 만들기 위한 환경을 제공한다. CRA를 이용하면 하나의 명령어로 리액트 개발환경을 구축
Yarn or npm. It lets you take advantage of a vast ecosystem of third-party packages, and easily install or update them.
webpack or Parcel. It lets you write modular code and bundle it together into small packages to optimize load time.
Babel. It lets you write modern JavaScript code that still works in older browsers.
<div id="root"></div>
ReactDOM.render( <App /> , document.getElementById('root'))
<Login />
컴포넌트, <Main />
컴포넌트를 그 자리에 대체하여 작업하면 된다.<Routes />
컴포넌트가 최상위 컴포넌트로 그 자리에 위치하게 된다.Nav 컴포넌트와 Main 컴포넌트, 그리고 Main 컴포넌트 안에는 Feed 컴포넌트와 MainRight 컴포넌트로 나눌 수 있음.
특징
import React, { Component } from 'react';
export class ReactComponent extends Component {
render() {
return <div>This is Class Component!</div>;
}
}
export default ReactComponent;
클래스형 컴포넌트에서는 위와같이 render 함수가 꼭 있어야 하고, 그 안에 보여 주어야 할 JSX를 반환해야 함.
import React from 'react';
const ReactComponent = () => {
return <div>This is functional component</div>;
};
export default ReactComponent;