2. 첫번째 프로젝트 만들기

자, 한번 첫번째 리액트 프로젝트를 만들어봅시다! 나중에는 여러분들의 컴퓨터에서 직접 프로젝트를 구성해보고, 여러분이 좋아하는 에디터로 코드도 에디팅 해볼텐데요, 지금 단계에서는 CodeSandbox 라는 아주 멋진 웹 IDE 를 사용하여 리액트를 학습해보도록 하겠습니다.

다음 링크에 들어가주세요: http://bit.ly/reactprj

위 링크에 들어가면 이미 사전에 준비된 리액트 프로젝트를 열 수 있습니다. 이 프로젝트에 들어있는 App.js 파일을 보시면 다음과 같은 코드가 있습니다.

https://codesandbox.io/ 에 들어가서 파란색 큐브를 선택하여 리액트 프로젝트를 생성하실수도 있습니다. 하지만 CodeSandbox 의 기본 리액트 템플릿 프로젝트에서는 하나의 index.js 파일에 모든 코드가 다 들어가있으므로 강의에서는 편의상 미리 분리시켜놓은 프로젝트 링크를 사용하겠습니다.

우선 App.js 를 열어보세요.

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>안녕하세요 리액트</h1>
      </div>
    );
  }
}

export default App;

이는 App 이라는 컴포넌트 입니다.

컴포넌트

컴포넌트는 재사용가능한 UI (유저인터페이스) 입니다. 이는 단순 템플릿 이상의 구현체로서, UI 개발에 필요한 필수적인 기능들이 탑재되어있습니다. 주요 기능들은 다음과 같습니다.

UI 의 생김새를 정의합니다
부모에게서 값을 받아와서 적당한곳에서 보여주거나, 사용합니다.
자기 자신이 사용 할 값을 정의하고 필요할 때 업데이트합니다.
UI 에서 보여줘야하는 값이 바뀌면 DOM 에 변화를 줍니다.

class

컴포넌트를 작성할땐 위와같이 class 라는 ES6 라는 문법을 사용합니다.

컴포넌트는 class가 아닌 함수형태로도 작성할 수 있는데 이에 대해선 나중에 알아보겠습니다.

ES6 의 class 는 객체 생성 및 상속을 더욱 쉬운 문법으로 구현 할 수 있게 해줍니다.

class Dog {
  constructor(nickname) {
    this.nickname = nickname;
  }
  bark() {
    console.log('멍멍!');
  }
  showName() {
    console.log(this.nickname);
  }
}

const dog = new Dog('멍뭉이');
dog.bark();
dog.showName();

class Husky extends Dog {
  constructor(nickname) {
    super(nickname); // Dog 의 constructor 를 호출
    // 다른거 하고 싶은거 있으면.. 여기서 더 입력
    // 하고싶은거 따로 없다면 constructor 를 생략해도됨
  }
  howl() {
    console.log('아우우우~~');
  }
}

const husky = new Husky('허스키');
husky.howl();
husky.showName();

class 로 만든 리액트 컴포넌트

클래스 문법을 사용하여 만든 컴포넌트에는, render 라는 함수가 있습니다.

  render() {
    return (
      <div className="App">
        <h1>안녕하세요 리액트</h1>
      </div>
    );
  }

return 함수는 컴포넌트의 생김새를 정의하는 곳입니다. 여기서 return 하는 내용이 화면에 렌더링됩니다.

보시면 HTML 같은 문법이 있는데.. 이는 JSX 라고 하는데 다음 섹션에서 더 자세히 알아보겠습니다.

이제 코드의 위 쪽을 보면 이렇게 있을텐데요,

import React, { Component } from 'react';
import './App.css';

첫번째 줄은 라이브러리로 설치되어있는 리액트를 불러와서 사용하겠다는 의미입니다.

두번째 줄은 이 프로젝트에 특정 css 파일을 적용하겠다는 의미입니다.

이번엔 index.js 를 열어볼까요?

import React from 'react';
import { render } from 'react-dom';
import App from './App';

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

여기서는 우리가 아까 봤던 App 을 불러와서 root 라는 엘리먼트에 렌더링해주고 있습니다. 여기서 사용된 react-dom의 render 함수는 실제 DOM 에 리액트 컴포넌트를 그려줍니다.

이 DOM 은 어디에 있는거냐 하면요, public/index.html 을 열어보시면 찾으실 수 있습니다.

body 태그 안에 다음과 같은 엘리먼트가 있는데

<div id="root"></div>

자바스크립트상에서 id 를 사용하여 위 DOM 을 선택하고 여기에 렌더링된 결과물을 넣어주는 작업이 현재 진행되고 있는 것입니다.

2. 첫번째 프로젝트 만들기