GaramX

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
===== React =====
Facebook에서 공개한 Open Source. 2013년에 소개

공식튜토리얼은 [[https://reactjs.org/tutorial/tutorial.html|여기]]에서 확인하세요.

  * JSX - React에서 문법으로 사용
==== React를 위한 기초 지식들 ====
  - [[typescript:home|TypeScript]]
  - NODE Module들
    * Component
    * typestyle
    * React-router
    * Redux
      * redux
      * react-redux
    * Mobx
    * RxJS
      * [[http://sculove.github.io/blog/|RxJS - 순찬욱Blog]]
    * Jest
      * yarn add -D enzyme enzyme-to-json
      * yarn add -D @types/enzyme @types/enzyme-to-json
    * Next.js
  - [[http://webframeworks.kr/tutorials/react/getting-started/|React시작하기]]
  - [[react:tictactoe|Tic Tac Toe 게임]]
  - [[https://medium.com/chequer/react-datagrid-component-제작기-with-es6-typescript-4efcbfe1b442|React data grid component제작시(with ES6, TypeScript)]]
  - [[webpack:home|Webpack]]
  - [[study:angluar|Angular]]
  - [[https://www.getpostman.com/|Postman]] - server request확인하기위해서
==== create-react-app ====
Hello World!를 만들기 위해서는 create-react-app을 이용하는 것이 좋은 방법이다.
처음에는 이것이 무엇을 하는지 이해하는 것은 어렵지만 프로젝트생성시에는 많은 도움이 된다는 것을 알 수 있을 것입니다.
사전준비사항
  * Node.js
    * 최신버전확인
      * <code bash>npm -v</code>
      * <code bash>node -v</code>
    * npm upgrade
      * sudo npm install -g npm
  * Project 생성방법
    - Node.js최신버전확인
      * npm -v
      * sudo npm install -g npm
    - create-react-app
      * <code bash>npm install -g create-react-app</code>
    - create PROJECT
      - <code bash>create-react-app boeun</code>
      - <code bash>create-react-app boeun --scripts-version=react-scripts-ts</code>
    - 확인
      - <code bash>npm start</code>
        - http://localhost:3000에서 확인하세요.
      - npm run build
      - npm test
      - npm run eject

==== ES6( ECMAScript6, ES2015 ) ====


{{:react:1*culi_8t0e-xvklqj5ttdyw.png}}

==== React란 무엇인가요? ====
React는 유저 인터페이스 구현을 위한 선언적이고 효율적이며 유연한 JavaScript라이브러리입니다.
React는 여러 종류의 컴포넌트들을 가지고 있지만 우리는 React.Component의 서브클래스를 사용하여 시작할 것입니다.
<code js>
class ShoppingList extends React.Component{
  render(){
    return(
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

//Example usage:<ShoppingList name="Mark"/>
</code>

XML과 비슷한 재밌는 태그들을 사용할 것입니다. 작성한 컴포넌트는 React에게 무엇을 랜더링하고 싶은지 알려줍니다. 그러면 React는 데이터가 변경될 때 올바른 컴포넌트들을 업데이트하고 랜더링합니다.

여기에서 ShoppingList는 React컴포넌트 클래스 혹은 React컴포넌트 타입입니다. 하나의 컴포넌트는 props라 불리는 파라미터를 사용하고, render메서드를 통해 표시할 뷰 계층 구조를 반환합니다.

render메서드는 랜더링하길 원하는 내용을 반환하면 React는 그 내용을 가져와 스크린에 랜더링합니다. 특히 render는 랜더링할 간단한 내용인 React엘리먼트를 반환합니다. 대부분의 React개발자들은 이 구조를 더 쉽게 작성할 수 있게 해주는 JSX라는 특별한 문법을 사용합니다.
<nowiki><div/></nowiki>라 쓰면 빌드시 React.createElement('div')로 변환됩니다. 위의 코드는 아래의 코드와 동일합니다.

<code javascript>
return React.createElement('div',{className:'shopping-list'},
  React.createElement('h1', /* ... h1 children ... */),
  React.createElement('ul', /* ... ul children ... */));
</code>

코드를 정리하면 
<code html>
<div className="shopping-list">
  <h1>
    Shopping List for {props.name}
  </h1>
  <ul>
    <li>Instagram</li>
    <li>WhatsApp</li>
    <li>Oculus</li>
  </ul>
</div>;
</code>

<code javascript>
React.createElement(
  "div",
  { className: "shopping-list" },
  React.createElement(
    "h1",
    null,
    "Shopping List for ",
    props.name
  ),
  React.createElement(
    "ul",
    null,
    React.createElement(
      "li",
      null,
      "Instagram"
    ),
    React.createElement(
      "li",
      null,
      "WhatsApp"
    ),
    React.createElement(
      "li",
      null,
      "Oculus"
    )
  )
);
</code>

createElement()에 대해 더 많은 내용이 궁금하다면 [[https://reactjs.org/docs/react-api.html#createelement|API reference]]에 자세한 설명이 있습니다. 튜토리얼에서는 createElement()를 직접적으로 사용하지 않습니다. 대신 JSX를 사용할 것입니다.

JSX에서는 중괄호 안에 JavaScript문법을 사용할 수 있습니다. 각 React엘리먼트는 변수에 저장하거나 프로그램에 여기저기에 전달할 수 있는 실제 JavaScript객체입니다.

ShoppingList컴포넌트는 내장된 DOM컴포넌트만 랜더링하지만<ShoppingList/>코드를 작성하여 커스텀React컴포넌트를 쉽게 구성할 수 있습니다. 각 컴포넌트는 캡슐화되어 독립적으로 동작할 수 있습니다. 이때문에 간단한 컴포넌트들로 복잡한 UI를 구현할 수 있습니다.
GaramX

사용자 도구

사이트 도구

문서 도구
