React Tutorial: An Overview and Walkthrough

Prerequisites (전제조건)

• HTML 및 CSS에 대한 기본지식
• Javascript 및 프로그래밍에 대한 기본 지식
• DOM에 대한 기본 이해
• ES6 구문 및 기능에 대한 지식
• Node.js 및 npm

알아야 할게 잔뜩 써있지만 아무것도 모르는 상태로 맨땅헤딩

목표

• Babel, Webpack, JSX, components, props, state, lifecycle에 대한 이해
• 위 개념들을 보여주는 React 앱 빌드해보기

리액트란?

• Javascript 라이브러리다
• Angular와 달리 프레임워크가 아니다
• Facebook에서 만든 오픈소스 프로젝트다
• 프론트 엔드에서 UI 구축에 사용된다
• MVC에서 V를 맡고 있습니다

리액트의 중요한 요소는 custom 및 재사용이 가능한 HTML elements인 'components'로 빠르고 효과적으로 UI를 구축할 수 있다. 또한 state 및 props를 사용하여 데이터 저장 및 처리 방법을 간소화한다

React 앱 만들기

Javascript 라이브러리를 static HTML 페이지에 로드하고 react와 babel을 렌더링하는 방법은 효율적이지 않고 유지관리가 어려우므로 패스

Facekbook에서 제공하는 미리 구성된 환경인 Create React App을 사용
(window/linux 모두 nodejs를 미리 설치해 두어야 한다)

$ npx create-react-app react-tutorial

$ cd react-tutorial && npm start

새로운 창이 열리며 아래 화면이 나타나면 성공

Create React App은 초보자와 대규모 엔터프라이즈 애플리케이션을 시작하는데 유용하지만 모든 워크플로우에 완벽하지는 않다, react용 webpack 설정을 직접 만들수도 있다

내용을 수정하고 저장하면 자동 컴파일되고 새 데이터로 화면이 refresh된다

현재는 잡다한 코드가 섞여있을텐데 /src 폴더 안에 index.js와 index.css를 제외하고 다 지워버리자

react, react-dom, css파일을 import하고 App component를 새롭게 생성, 아래 코드에서는 className을 class 대신 사용하였는데 이것이 현재 코드가 HTML이 아니라 Javascript로 쓰여지고 있다는 힌트이다. 그리고 App을 렌더링하여 화면을 보여준다

import React, {Component} from 'react'
import ReactDOM from 'react-dom'
import './index.css'

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Hello, React!</h1>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))