React Study(2)

2020-03-24

React 세미나😊(2)

2. Project Setup

2.1. Requirements

먼저 Node.js 가 설치되어 있어야 한다.
Node.js 공식 다운로드 페이지(https://nodejs.org/ko/download/)에서 Window Installer 를 다운로드하고 설치한다.

1 2	$ node -v $ npm -v

에디터로는 MS에서 제공하는 Visual Studio Code(VS Code)를 사용한다. vscode 는 크로스 플랫폼 에디터로 다양한 언어를 서포트하며, IntelliSense 와 Git 기능, 그리고 Extension 을 이용한 확장 기능을 제공하고 있다.
설치 방법은 https://code.visualstudio.com/ 에 접속하여 다운로드 후 설치하면 된다.

React 개발에 좋은 Extension는 ESLint, Prettier, vscode-styled-components, Auto Close Tag, React-Native/React/Redux snippets for es6/es7 등 다양하게 있어 설치하고 사용하면 됩니다.

2.2. Creating React App

기존에는 Webpack, Babel 등 필요한 모듈들을 직접 설치하고 설정하느라 상당한 시간이 소요가 되었다. 2016년에 React 작업 환경을 명령어 하나로 설정 할 수 있는 공식 도구가 나오면서 개발자들과 입문자들에게 많은 도움이 되었다.

먼저 프로젝트 생성을 한다.

주의사항은 npm 5.2.0 이상 버전을 설치해야 합니다. 최신 npm 버전에는 npx 가 설치되어 있다.

$ npm install npx -global

$ npx create-react-app test-project

$ cd test-project
$ code .

설치가 완료되면 Visual Studio Code 편집기로 프로젝트를 연다.
프로젝트 구조
처음 프로젝트가 설치되면 여러가지 파일이 생성되는데 초기 세팅을 위해 불필요한 파일을 제거하는 것이 좋다. src 폴더에서 App.js, index.js 파일을 제외한 파일을 제거하고 import 된 코드를 제거한다.

3. React 개발

3.1. JSX

JSX (JavaScript eXtension) 는 자바스크립트 언어 문법의 확장입니다. 자바스크립트 안에서 HTML 문법을 사용해서 화면을 구성할 수 있게 도와주는 문법으로, React 개발에 엄청난 도움을 줍니다.

import React, { Component } from 'react';

class HelloMessage extends React.Component {
  render() {
    return (
      // JSX 문법
      <div>Hello {this.props.name}</div>
    );
  }
}

export default HelloMessage;

아래는 스타일링의 여러가지 방법이다.

class 대신 className 을 사용한다.
스타일 속성은 중괄호 ({}) 안에 객체 형태로 표시하며 단어 사이의 '-'를 없애는 대신 카멜케이스(Camel Case)를 사용해 CSS 프로퍼티는 나타낸다.
styled-components는 리액트 CSS-in-JS 관련 라이브러리 중에서 가장 잘 나가는 라이브러리로써 자바스크립트 파일 안에 CSS 를 작성하는 형태다.

// App.js
import React, { Component } from 'react';
import styled from 'styled-components';
import './App.css';

const Content = styled.div`
  background-color: 'blue';
  font-size: 16px;
`;

function App() {
  return (
    <div>
      <div className="App"></div>
      <div style={{ backgroundColor: 'black', fontSize: '12px', color: 'white' }}></div>
      <Content />
    </div>
  );
}

// App.css
.App {
  background-color: white;
  font-size: 16px;
  color: black;
}

JSX 는 꼭 지켜야 할 몇몇 제한이 있다.

JSX 를 사용하는 스크립트 파일은 상단에 React 라이브러리를 꼭 불러와야 한다.
1
import React from 'react';

열어 놓은 태그는 꼭 닫아야 한다.

# 에러
<hello>
# 정상 동작
<hello></hello> or <hello />

최상위 태그는 꼭 1개여야 한다.

<Fragment>
  <header>
    <h1>header</h1>
  </header>
  <main>
    <h1>main</h1>
  </main>
</Fragment>

3.2. Component 기반 구조

React 는 Component 기반 라이브러리다. 하나의 코드로 작성하는 것이 아니라 여러 부분을 분할해서 만들기 때문에 코드의 재사용성과 유지보수성이 증가 된다.

<html>
  <head>
    <title>홈페이지</title>
  </head>
  <body>
    <header>
      <!-- 헤더 내용 -->
    </header>
    <div class="content-list">
      <!-- 콘텐츠 리스트 -->
    </div>
    <footer>
      <!-- 푸터 내용 -->
    </footer>
  </body>
</html>

위와 같은 html 코드가 있다고 해보자. 이를 React 로 만들게 되면 다음과 같다.

import React, { Component } from 'react';
import Header from './component/Header';
import Footer from './component/Footer';
import ContentList from './component/ContentList';

class App extends Component {
  render() {
    return (
      <div>
        <Header />
        <ContentList />
        <Footer />
      </div>
    );
  }
}

export default App;

Header 나 Footer, ContentList 등은 컴포넌트로 만들고, 이를 조립해서 루트 컴포넌트를 만드는 방식이다. 컴포넌트의 종류로는 클래스형(stateful)과 함수형(stateless)으로 나누어진다.

3.3. Props

props란 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터를 말한다.
props는 읽기 전용 데이터라고 생각하면 된다. 자식 컴포넌트에서 전달받은 props를 변경이 불가능하고 props를 전달해 준 최상위 부모 컴포넌트만 props를 변경할 수 있다.

3.4. State

state는 동적인 데이터를 다룰 때 사용한다. 사용자와의 상호작용을 통해 데이터를 동적으로 변경을 해야 할 때 사용한다.
state는 클래스형 컴포넌트에서만 사용할 수 있는데 각각의 state는 독립적이라 다른 컴포넌트의 직접적인 접근은 불가능하다.

3.5 LifeCycle API

LifeCycle API는 컴포넌트가 DOM 위에 생성되기 전 후 및 데이터가 변경되어 상태를 업데이트하기 전 후로 실행되는 메서드들이다. 자원낭비를 줄이기 위하여 코드를 최적화할 때 사용된다. 많이 사용하는 LifeCycle 메서드들은 constructor, componentDidMount, render, shouldComponentUpdate 이다.

hgko's IT Blog

ProgrammingFrontendReact