React 시작하기

리액트 환경

리액트를 사용할 수 있는 환경인지 확인한다.

!!React    // true
!!ReactDOM // true

컴포넌트 시스템

<div id="app"></div>

// [설계] React Component (Functional)
function App() {
  return <div>React Element</div>
}

// [인스턴스 생성] React Element (JSX)
// 마치 HTML 문법인 것 처럼 보인다. 
var app = <App/>

// ReactDOM (rendering)
// ReaetDOM.render(가상DOM(React 요소), 실제 DOM 요소)
// ReaetDOM.render()에 의해서 실제 돔 요소에 붙여지게 된다. 
ReactDOM.render(app, document.querySelector('#app'))

컴포넌트가 브라우저에 렌더링 되기 까지 거치는 과정

컴포넌트 시스템

App(), AppMain(), MenuList(), MenuListItem() 과 같은 컴포넌트를 만들어 사용한다. 마치 HTML <tag>처럼 보인다.

컴포넌트 연결

각 컴포넌트가 연결되는 것을 그림으로 볼 수 있다.

MenuListItem()은 MenuList()에 불러와지고 MenuList()는 AppMain()에 불러와지고 Appmain()은 App()에 불러와지고 App()은 app이라는 변수에 담아진다.

그리고 담아진 가상DOM은 render()과정을 거쳐서 <div id="app"></div>에 바인딩 된다.

JS

// React Component (Functional)
function MenuListItem() {
  return (<li class="ediya-menu__item">
      <a href="#" role="button" aria-haspopup="dialog" aria-pressed="false">
        <figure>
          <img src="//raw.githubusercontent.com/yamoo9/assets/master/images/ediya/iced-cherry-blossoms-latte.png" alt="" width="323" height="323" />
          <figcaption>ICED 벚꽃라떼</figcaption>
        </figure>
      </a>
      <div role="dialog" aria-modal="false" aria-labelledby="dialog-1-label">
        <h3 id="dialog-1-label" class="a11y-hidden">ICED 벚꽃라떼</h3>
      </div>
    </li>
    )
}
function MenuList() {
  return <ul className="ediya-menu reset-list">
    <MenuListItem/>
    <MenuListItem/>
    <MenuListItem/>
    <MenuListItem/>
  </ul>
  
}
function AppMain() {
  return <main className="app-main">
    <h2 class="a11y-hidden">이디야 음료</h2>
    <MenuList/>
  </main>
}
function App() {
  return <AppMain/>
}

// React Element (JSX)
var app = <App/>

// ReactDOM (rendering)
ReactDOM.render(app, document.querySelector('#app'))

렌더링 결과

정적 데이터를 갖고 있는 MenuListItem()을 4번 불러왔기 때문에 같은 4개의 콘텐츠가 그려진다.

function MenuList() {
  return <ul className="ediya-menu reset-list">
    <MenuListItem/>
    <MenuListItem/>
    <MenuListItem/>
    <MenuListItem/>
  </ul>
}

React 컴포넌트와 전달 속성 (Props)

• MenuList()에 설정한 속성을 MenuListItem()의 첫번째 매개변수인 props의 인자로 받는다.

  • 함수형 컴포넌트의 첫번째 인자는 연결한 컴포넌트의 데이터를 받아온다.

• props.image, props.caption으로 속성에 접근할 수 있다.

• MenuLietItem()의 HTML코드를 개행해서 보려면 괄호(())로 묶어준다.

컴포넌트의 속성

컴포넌트의 속성에 접근하여 데이터를 불러온다.

JS

// React Component (Functional)
// props는 함수형 프로그래밍의 첫 번째 매개변수가 된다.
// props는 사용자가 속성을 통해 전달한 데이터를 인자로 받는다. 
function MenuListItem(props) {
  var imagePath = '//raw.githubusercontent.com/yamoo9/assets/master/images/ediya/' + props.image
  return (<li class="ediya-menu__item">
      <a href="#" role="button" aria-haspopup="dialog" aria-pressed="false">
        <figure>
          <img 
            src={imagePath} 
            alt="" 
            width="323" 
            height="323" />
          <figcaption>{props.caption}</figcaption>
        </figure>
      </a>
      <div role="dialog" aria-modal="false" aria-labelledby="dialog-1-label">
        <h3 id="dialog-1-label" class="a11y-hidden">ICED 벚꽃라떼</h3>
      </div>
    </li>
    )
}
function MenuList() {
  return <ul className="ediya-menu reset-list">
    <MenuListItem image="iced-cherry-blossoms-latte.png"
      caption="ICED 벚꽃라떼ᅦ" />
    <MenuListItem         image="hot-cherry-blossoms-latte.png"
      caption="HOT 벚꽃라떼" />
    <MenuListItem image="iced-brownie-chocolate.png"
      caption="ICED 브라우니 쇼콜라"/>
    <MenuListItem image="hot-brownie-chocolate.png"
      caption="HOT 브라우니 쇼콜라"/>
    <MenuListItem image="jeju-green-tangerine-tea.png"
      caption="제주청귤 오리지널"/>
    <MenuListItem image="jeju-green-tangerine-blossom.png"
      caption="제주청귤 블라썸"/>
    <MenuListItem image="pomegranate-tea.png"
      caption="석류 오리지널"/>
    <MenuListItem image="pomegranate-apple-lime.png"
      caption="석류 애플라임"/>
  </ul>
  
}
function AppMain() {
  return <main className="app-main">
    <h2 class="a11y-hidden">이디야 음료</h2>
    <MenuList/>
  </main>
}
function App() {
  return <AppMain/>
}

// React Element (JSX)
var app = <App/>

// ReactDOM (rendering)
ReactDOM.render(app, document.querySelector('#app'))

React 개발 환경 구성

React로 개발, 컴파이르 번들링 배포하는 과정에 많은 도구의 힘을 빌린다. 그래서 React를 배우기 어렵하고 하는 이유 중의 하나가 이것이다. 해당 도구를 사용할 수 있어야 하기 때문이다.

StackBlitz 실습 환경

이전에 자바 스크립트 실습할 때 사용한 codepen이 아닌 StackBlitz를 사용한다.

Create React App

하지만 번거로운 개발 환경 구성 없이 React를 바로 시작할 수 있도록 create-react-app을 사용할 수 있다.

설치하기

$ npx -v
$ npx create-react-app <프로젝트-이름>

예시 
$ npx create-react-app study-react 

설치 후 생성된 폴더와 파일

현재 저장소에 설치 하기

저장소에 따로 폴더를 만들지 않고 현재 머물고 있는 저장소에 CRA을 설치하고 싶다면 아래와 같이 project name을 입력하는 곳에 .을 입력하면 된다.

npx create-react-app .  

주의!

만약 저장소 또는 프로젝트 이름에 대문자가 들어가면 오류가 발생한다.

CRA 명령어

Create React App이 제공하는 명령

명령어	설명
npm start	React 프로젝트 개발 서버를 시작
npm run build	배포를 위해 앱을 정적(Static) 파일로 번들(Bundle) 한다.
npm run test	테스트 러너(Test Runner)를 시작한다.
npm run eject	사용자 정의 구성(예: Webpack)을 직접 수행할 수 있도록 프로젝트를 준비한다. (※ 주의! 되돌릴 수 없다.)

프로젝트 디렉토리 구조

src 디렉토리는 변하는 소스를 넣는다. 예를들어 이미지의 해시코드가 바뀐다. (이미지경로와 확장자 사이에 해시기호가 붙는다.)

src 소스에 해시코드를 확인 할 수 있다.

public 디렉토리는 변하지 않는 정적 소스를 관리한다. 예를들어 favicon 또는 html, css 등 바꾸지 않을 것들을 관리한다.

.
├── README.md
├── node_modules/ # 개발 의존 모듈 집합 디렉토리
├── package.json
├── public/ # 정적 리소스 디렉토리
│   ├── favicon.ico
│   ├── image.png
│   ├── video.mp4
│   ├── index.html # 애플리케이션 기본 템플릿
│   └── manifest.json
├── src/ # React 애플리케이션 개발 디렉토리
│   ├── App.css
│   ├── App.js # 애플리케이션 파일
│   ├── App.test.js
│   ├── index.css
│   ├── index.js # 엔트리 파일
│   ├── logo.svg
│   └── serviceWorker.js
└── yarn.lock

public

정적 리소스 디렉토리이며 비디오, 이미지, 정적 html 등이 있다. 비디오와 이미지 파일 등을 index.html에서 불러와서 사용한다.

public/ index.html

해당 파일은 React 앱이 구성되는 기본 템플릿 파일이다. 언어(lang)을 설정하거나 필요한 비디오, 이미지와 같은 정적 리소스를 추가할 수 있다.

%PUBLIC_URL%은 변수처럼 사용된다. public 디렉토리를 가리킨다고 보면 된다.

manifest.json 파일은 사용 되는 메타 데이터의 정보를 제공한다.

<!DOCTYPE html>
<!-- en 값을 ko-KR로 변경 -->
<html lang="ko-KR">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <!--
      manifest.json은 웹 앱을 사용자의 모바일 장치 또는
      데스크톱에 설치할 때 사용되는 메타 데이터를 제공한다.
      참고: https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      위의 태그에서 %PUBLIC_URL%을 사용한다.
      %PUBLIC_URL%은 빌드하는 동안`public` 폴더의 URL로 대체 된다. 
      public 폴더 안에 있는 파일들만 HTML에서 참조 할 수 있다.

      "/favicon.ico"또는 "favicon.ico"과 달리, "%PUBLIC_URL%/favicon.ico"는
      클라이언트 사이드 라우팅(CSR)과 non-root public URL에서 문제없이 작동한다.
      `yarn build` 명령을 실행하면 non-root public URL에 대해 알 수 있다. 
    -->
    <title>React 앱</title>
  </head>
  <body>
    <noscript>이 앱을 실행하려면 JavaScript가 사용가능한 환경이어야 합니다.</noscript>
    <div id="root"></div>
    <!--
      이 HTML 파일은 템플릿이다.
      브라우저에서 직접 열면 빈 페이지가 나타난다. 

      이 파일에 웹 폰트, 메타 태그 또는 Google 애널리스틱(통계, 분석)을 추가 할 수 있다.
      빌드 단계에서 번들 된 스크립트는 <body> 태그 내부에 삽입된다.

      개발을 시작하려면`npm start` 또는 `yarn start`를 실행한다. 
      배포를 위한 번들 파일을 생성하려면 `npm run build` 또는 `yarn build`를 실행한다. 
    -->
  </body>
</html>

src/ index.js

React 애플리케이션의 엔트리(Entry) 파일로 애플리케이션을 구성하는 설정이 포함된다.

React, ReactDOM을 불러오며 App.js 파일도 여기서 불온다. 그리고 지막으로 가상 돔요소를 실제 돔요소에 render()하는 작업을 이곳에서 한다

src/App.js

React의 컴포넌트 파일로, 필요한 컴포넌트를 설정하는 작업을 이 파일에서 한다.