GaramX

Facebook에서 공개한 Open Source. 2013년에 소개

공식튜토리얼은 여기에서 확인하세요.

• JSX - React에서 문법으로 사용

1. TypeScript
2. NODE Module들
   • Component
   • typestyle
   • React-router
   • Redux
     • redux
     • react-redux
   • Mobx
   • RxJS
     • RxJS - 순찬욱Blog
   • Jest
     • yarn add -D enzyme enzyme-to-json
     • yarn add -D @types/enzyme @types/enzyme-to-json
   • Next.js
3. React시작하기
4. Tic Tac Toe 게임
5. React data grid component제작시(with ES6, TypeScript)
6. Webpack
7. Angular
8. Postman - server request확인하기위해서

Hello World!를 만들기 위해서는 create-react-app을 이용하는 것이 좋은 방법이다. 처음에는 이것이 무엇을 하는지 이해하는 것은 어렵지만 프로젝트생성시에는 많은 도움이 된다는 것을 알 수 있을 것입니다. 사전준비사항

• Node.js
  • 최신버전확인

    • npm -v

    • node -v

  • npm upgrade
    • sudo npm install -g npm
• Project 생성방법
  1. Node.js최신버전확인
     • npm -v
     • sudo npm install -g npm
  2. create-react-app

     • npm install -g create-react-app

  3. create PROJECT

     1. create-react-app boeun

     2. create-react-app boeun --scripts-version=react-scripts-ts

  4. 확인

     1. npm start

        1. http://localhost:3000에서 확인하세요.
     2. npm run build
     3. npm test
     4. npm run eject

React는 유저 인터페이스 구현을 위한 선언적이고 효율적이며 유연한 JavaScript라이브러리입니다. React는 여러 종류의 컴포넌트들을 가지고 있지만 우리는 React.Component의 서브클래스를 사용하여 시작할 것입니다.

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"/>

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

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

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

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

코드를 정리하면

<div className="shopping-list">
  <h1>
    Shopping List for {props.name}
  </h1>
  <ul>
    <li>Instagram</li>
    <li>WhatsApp</li>
    <li>Oculus</li>
  </ul>
</div>;

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"
    )
  )
);

createElement()에 대해 더 많은 내용이 궁금하다면 API reference에 자세한 설명이 있습니다. 튜토리얼에서는 createElement()를 직접적으로 사용하지 않습니다. 대신 JSX를 사용할 것입니다.

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

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