React Tutorial by Tania Rascia 한글 번역1

www.taniarascia.com/getting-started-with-react/

React Tutorial: An Overview and Walkthrough

 

리액트란 무엇인가?

• 리액트는 가장 유명한 자바스크립트 라이브러리이다.
• 리액트는 프레임워크가 아니다.(엥귤러는 프레임워크이다.)
• 리액트는 페이스북에서 만든 오픈소스 프로젝트이다.
• 리액트는 앞단의 UI를 만들기 위해 사용된다.
• 리액트는 Model View Controller의 뷰층을 담당한다.

 리액트의 가장 두드러지는 특징은 사용자가 직접 재사용가능한 HTML 요소를 만들어 사용한다느 점이다. 이를 컴포넌트라 부르며 빠르고 효율적으로 유저 인터페이스를 만들 수 있다. 또한 state와 props을 이용해 데이터가 어떻게 저장되고 처리되는지 보여준다.

 

 

리액트 앱 만들기

 자바스크립트 라이브러리를 정적 HTML 페이지에 불러서 사용하는 것은 비효율적이며 관리 역시 힘들다. 다행이도 페이스북은 Create React App을 만들었는데 여기에는 필요한 모든 초기설정이 완료되어 있다. 이 앱은 개발 서버를 구동하는데 웹팩을 통해 자동으로 리액트, JSX, ES6, auto-prefix CSS, ESLint 등을 컴파일 해준다.

 

 create-react-app을 설정하기 위해서는 터미널을 켜고 디렉터리를 생성하고 싶은 곳에 위치한 뒤 아래 코드를 직접 입력해야 한다. 

$ npx create-react-app react-tutorial

 설치가 끝났다면 새로 생성된 디렉토리로 이동하여 프로젝트를 실행시켜 보자.

$ cd react-tutorial && npm start

 위 명령어를 실행시키면 localhost:3000에 방금 만든 리액트 앱이 켜진다.

 

 설치오류가 발생하는 경우가 있다. 대부분 global하게 설치된 create-react-app을 삭제한 뒤 다시 실행시키면 해결되지만, 삭제코드가 실행되지 않는 경우도 있다. 이런 경우에는 아래 코드를 실행시키면 설치가 된다,

 npx --ignore-existing create-react-app your-project-name --template typescript
전역으로 설치된 이미 존재하는 create-react-app을 무시하고 새롭게 설치하게하는 코드로 보인다.

 Create React App은 처음 리액트를 접한 사람부터 커다란 규모의 프로잭트에도 사용될 수 있다. 하지만 모든 프로젝트에 사용되지는 않는다. 자기만의 Webpack 설정을 적용시킨 리액트 앱을 생성해야되는 경우도 있다.

새로 생성한 프로젝트 안에 생성된 파일을 살펴보면 /public, /src 그리고 .gitignore 이나 package.json같은 파일을 찾을 수 있다.

/public 디렉터리 안에 존재하는 index.html이 중요한 파일이다. 정적인 html에 파일에 스크립트 형식으로 react를 추가했지만 이번에는 그럴 필요가 없다. React 코드들은 /src 안에 담긴다.

 

이 환경에서 어떻게 React 코드를 컴파일하고 최신화 하는지 보고싶다면 /src/App.js안에 있는 다음 줄을 찾아봐라.

To get started, edit 'src/App.js' ans save to reload.

 이 문장을 다른 텍스트로 변환하고 저장한뒤 localhost:3000을 확인해보면 새로운 데이터로 컴파일, 최신화 된 것을 알 수 있다.

/src에 index.css 그리고 index.js를 제외한 나머지 모든 파일을 삭제하면 초기 설정들을 초기화 할 수 있다.

 

 index.css에서는 Bootstrap이나 다른 CSS framework를 삽입할 수 있다. 물론 그냥 사용해도 된다. index.js에서는 React, ReactDOM 그리고 CSS파일을 import 해주어야 한다.

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'

 import 작업이 끝나면 다시 App 컴포넌트를 만들어 보자. 이전에는 h1테그만 넣었지만 이번에는 클래스에 div테그도 넣어보도록 하자. 코드를 보면 class 대신 className을 사용한 것을 알 수 있다. 이것이 우리가 작성한 코드가 html이 아닌 JS임을 알려준다.

이번에는 React의 property로서 Component를 불러온다. 따라서 더이상 React.component로 extend할 필요는 없다.

 

리액트 개발 도구

 리액트 개발을 더욱 쉽게해줄 리액트 개발 도구가 존재한다. React DevTolls for Chrome을 다운받아보자. 설치 후에 홈페이지 검사를 눌러보면 React를 위한 탭이 생긴 것을 볼 수 있다. 해당 탭들을 클릭해보면 사용된 컴포넌트를 확인 할 수 있고 Elements탭을 눌러보면 웹에 사용된 DOM을 볼 수도 있다. 당장은 필요해보이지 않더라도 react DOM이 더욱 복잡한 구조를 갖게 되면 필요성은 커진다.

 

JSX

 이미 봤듯이 우리는 html과 닮은 코드를 react에서 사용해왔다. 정확하게 이 코드는 html이  아닌 JSX코드이다. JSX를 통해 html과 닮은 코드를 작성할 있다. 그리고 또한 XML과 같이 직접 태그를 생성할 수도 있다. 아래 코드는 어떻게 JSX코드가 변수에 할당되는지 보여준다.

const heading = <h1 className="site-heading">Hello, React</h1>

 JSX는 React사용에 있어 필수적인 요소는 아니다. 깊게 파고들자면 JSX는 createElement를 사용한다. 이 매서드는 html 테그와 관련된 여러 정보들을 담는다. 아래 코드는 위의 JSX코드가 어떻게 변환되는지 보여준다.

const heading = React.createElement('h1', {className: 'site-heading'}, 'Hello, React!')

JSX는 실제로 HTML보다 JavaScript에 가깝다. 따라서 키워드를 작성할 때 조금 다른 점이 있다.

• CSS 클래스를 추가할떄 class라는 이름 대신 className을 사용한다. class는 javaScript에 이미 예약된 키워드이다.
• JSX의 프로퍼티들과 매서드들은 camelCase로 작성한다. 예를들어 onclick은 onClick으로 작성한다.
• 하나의 괄호로 이루어진 테그는 반드시 '/'를 포함하여 닫는다. e.g. <img />

변수, 함수, properties와 같은 JS표현들은 중괄호 안에서 사용 가능하다.

const name = 'Tania'
const heading = <h1>Hello, {name}</h1>

JSX는 바닐라 JS에서 요소를 생성하는 것 보다 쉽고 직관적이다. 이러한 이유가 React가 사랑받는 이유이기도 하다.

 

Components

 지금까지 우리는 App이라는 단 하나의 컴포넌트를 생성해봤다. 리액트에서 거의 모든 것들은 컴포넌트로 이루어져 있다. 컴포넌트의 종류로는 simple components와 class components로 나뉜다. 대부분의 리액트의 앱은 작은 컴포넌트로 이루어져 있으며 이 모든 작은 컴포너는트는 메인 App컴포넌트에 로드된다. 각 컴포넌트는 대개 자신만의 파일을 갖는다. 따라서 우리도 그런 방식으로 프로잭트를 업데이트 해보자. 먼저 index.js에서 App 클래스를 제거해보자. 다음으로 App.js파일을 생성하고 컴포넌트를 붙여넣어 보자.

import React, {Component} from 'react'

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

export default App

 우리는 방금 App 컴포넌트를 export했고 index.js에서 받았다. 컴포넌트를 분할하는 것이 반드시 필수적인 것은 아니다. 하지만 프로잭트의 규모가 커질수록 관리하기가 편해진다.

 

Class Components

 이번에는 다른 컴포넌트를 만들 것이다. Table.js라는 파일을 만들고 아래 코드를 입력해보자.

import React, {Component} from 'react'

class Table extends Component {
	render() {
    	return ()
    }
}

export default Table

 이 컴포넌트 형식을 클래스 컴포넌트라고  한다. 사용자 생성 컴포넌트는 항상 대문자로 시작하는데 이는 일반 html테그와 구분하기 위해서이다. 이제 App,js로 돌아가서 아래코드를 입력해 Table 컴포넌트를 import 해보자.

import Table from './Table'

다음으로 App 클래스 안의 render()매서드 안에 table을 삽입해보자.

import React, {Component} from 'react'
import Table from './Table'

class App extends Component {
  render() {
    return (
      <div className="container">
        <Table />
      </div>
    )
  }
}

export default App

이렇게 class component를 사용한다. 이런 컴포넌트는 재사용 가능하지만, 하드코딩 되어있기 때문에 아직까지는 크게 유용하지 않다.

 

Simple Components

 리액트의 다른 컴포넌트 종류로는 함수형인 simple components가 있다. 이 컴포넌트는 class 키워드를 사용하지 않는다. 다음 코드를 통해 어떻게 simple components를 만드는지 알아보자. 먼저 전에 우리가 작성한 Table Component를 두개의 작은 컴포넌트로 분할해보자. 분할이 끝난 Table파일은 다음과 같다. TableHeader과 TableBody는 같은 파일에 있고 Table 컴포넌트 안에 사용된다.

const TableHeader = () => { ... }
const TableBody = () => { ... }

class Table extends Component {
  render() {
    return (
      <table>
        <TableHeader />
        <TableBody />
      </table>
    )
  }
}

 새로고침 이후에도 랜더링 되는 화면은 동일하다. 위 예시에서 볼 수 있듯이 컴포넌트들은 다른 컴포넌트 안에 사용될 수 있고 simple components와 class components 역시 함께 사용 가능하다.

class component는 반드시 render()매서드를 포함한다. 그리고 return은 반드시 하나의 부모 요소만 반환한다.

 simple component와 class component를 요약하여 비교해보자.

/* Simple Component */

const SimpleComponent = () => {
  return <div>Example</div>
}

/* Class Component */

class ClassComponent extends Component {
  render() {
    return <div>Example</div>
  }
}

만일 return이 한줄에 있다면, 괄호는 필요하지 않다.