[누구든지 하는 리액트] 1. 리액트 프로젝트 시작하기

본격적인 리액트 코드 작성하기

Webpack

웹프로젝트를 만들 때 전체적으로 파일들을 관리해주는 도구

코드들을 의존하는 순서대로 합쳐서 하나 또는 여러 개의 파일로 결과물을 만들어낸다.

예를들어, 이미지들을 압출하고 그 결과물로 특정 경로에 특정 이름으로 따로 저장할 수 있도록 해준다. 자바스크립트에서 해당 결과물을 import로 불러와 조회하려 할 때 실제로 저장된 경로가 문자열로 받아와 보여주게 되는 것이다.

또는 자바스크립트 파일을 여러 개 만들었을 때, 하나로 합쳐서 하나의 파일로 만들어준다. 물론, 추후에 여러개로 규칙에 따라 분리시킬 수 있다.

새로운 문법을 사용할 수 있도록 Webpack을 통해 변화시켜 여러 종류의 브라우저에서 사용할 수 있도록 해준다.
또한, Webpack은 Sass 등의 파일들도 css파일로 변환을 시켜 따로 저장시켜 자동으로 처리해준다.

babel

자바스크립트 변환 도구

ES6에서 모던자바스크립트를 사용할 것이다. 하지만 구형 브라우저에서는 새로운 문법을 사용할 수 없다. 따라서 새로운 문법을 사용할 수 있도록 해주는 것이 babel이다.

CODE SANDBOX에서 실습

해당 사이트 접속 후, 상단의 [fork]버튼 클릭 후 강의 따라하면 된다.

// 1️⃣
import React, { Component } from 'react';

// 2️⃣
class App extends Component {
  // 3️⃣ render 메써드
  render() {
    return (
      <div>
        <h1>안녕하세요 리액트</h1>
      </div>
    );
  }
}

export default App;

• 1️⃣ 설치된 React모듈의 React를 import해줘야 한다.
• 2️⃣ 컴포넌트를 만드는 기본적인 방식은 class를 통해 만드는 것이다.
  또다른 방법으로는 함수를 통해서 컴포넌트를 만드는 방법이 있다.
• 3️⃣ render 메써드에는 JSX를 return해줘야 한다.

• CodeSandbox: https://codesandbox
• 리액트 프로젝트 시작하기: https://bit.ly/beginreact