[뇌가번쩍] React.js

Web › Enlighten
dev
#

React.js

왜 열광 하는가?

  1. Javascript 베이스에요.

    딴거 배울거 없어요. Javascript 만 부수면 됩니다.

  2. Composition

    Component 단위로 부수면 됩니다. 재사용성 겁나 좋아져요.

    JSX (리액트로 html 쓰는 법)를 이용해요.

    function nav(){
        return (
            <nav>
                <ul>
                    <li></li>
                </ul>
            </nav>
        )
    }

    요렇게 쓰는 거에요.

  3. Uni-Directional Data Flow

    데이터는 항상 한 곳에 있고, 거기서만 변경 가능해요.

    데이터가 UI를 변경시키는 것. UI에서 데이터 변경 ❌
    Model -> View

    반면에 Angular 는 Bi-Directional(View <-> Model)이에요.

  4. 생태계

    글로발 남바완 커뮤니티

Webpack?

Trnasfiler

React 코드를 브라우저가 이해할 수 있는 코드로 변경 해줘요.

파일을 바꾸거나 (추가/삭제 등등) 변경이 일어날 때 자동으로 변경 해줍니다.

즉 최신 자바스크립트 버전인 ES6 를 자동으로 브라우저가 이해하게 슥 도와줘요.

   하 무슨말인지 모르겠다....싶으면?

우리같은 뉴비를 위한 페북의 배려

create-react-app

  webpack 을 안쓰고 쟤가 알아서 리액트 앱을 만들어 줘요. (사실 저 안에 webpack 이 들어있는거지만)

Install & Usage

Install

npm install -g create-react-app

Usage

create-react-app tax-app
cd tax-app
npm start

그러면 localhost로 로컬 서버에 리액트 앱이 따단

Command

npm run start
개발용 서버 구동이에요.

npm run start

npm run build
배포용 서버 구동이에요.
static 파일들로 만들어내요.

npm run build

npm run test
테스트용 서버 구동이에요. 

npm run test

npm run eject
현재 프로젝트 설정 및 스크립트를 추출합니다.
추출 하면 커스텀 가능해져요.

한번 실행하면 돌이킬 수 없어요 !!

npm run eject

React-router-dom

처음엔 대체 무슨 차이야 싶었는데 공식 설명 보니까 이해가 되네요.

A special version of the that will add styling attributes to the rendered element when it matches the current URL.