React 튜토리얼 => React 시작하기

비고

React 는 사용자 인터페이스를 만드는 데 사용되는 선언적 구성 요소 기반 JavaScript 라이브러리입니다.

React에서 MVC 프레임 워크와 같은 기능을 구현하기 위해 개발자는 Flux 플 레버 (예 : Redux) 와 함께 사용합니다.

버전

번역	출시일
0.3.0	2013-05-29
0.4.0	2013-07-17
0.5.0	2013-10-16
0.8.0	2013-12-19
0.9.0	2014-02-20
0.10.0	2014-03-21
0.11.0	2014-07-17
0.12.0	2014-10-28
0.13.0	2015-03-10
0.14.0	2015-10-07
15.0.0	2016-04-07
15.1.0	2016-05-20
15.2.0	2016-07-01
15.2.1	2016-07-08
15.3.0	2016-07-29
15.3.1	2016-08-19
15.3.2	2016-09-19
15.4.0	2016-11-16
15.4.1	2016-11-23
15.4.2	2017-01-06
15.5.0	2017-04-07
15.6.0	2017-06-13

설치 또는 설정

ReactJS는 모든 HTML 페이지에 포함될 수있는 단일 파일 react-<version>.js 포함 된 JavaScript 라이브러리입니다. 사람들은 일반적으로 React DOM 라이브러리 인 react-dom-<version>.js 를 주 React 파일과 함께 설치합니다.

기본 포함

<!DOCTYPE html>
<html>
    <head></head>
    <body>
    <script type="text/javascript" src="/path/to/react.js"></script>
    <script type="text/javascript" src="/path/to/react-dom.js"></script>
    <script type="text/javascript">
        // Use react JavaScript code here or in a separate file
    </script>
    </body>
</html>

자바 스크립트 파일을 얻으려면 공식 React 문서 의 설치 페이지 로 이동 하십시오 .

React는 또한 JSX 구문을 지원 합니다 . JSX는 JavaScript에 XML 구문을 추가하는 Facebook에서 만든 확장 기능입니다. JSX를 사용하려면 JSX를 Javascript 코드로 변환하기 위해 Babel 라이브러리를 포함하고 <script type="text/javascript"> 를 <script type="text/babel"> 으로 변경해야합니다.

<!DOCTYPE html>
<html>
    <head></head>
    <body>
    <script type="text/javascript" src="/path/to/react.js"></script>
    <script type="text/javascript" src="/path/to/react-dom.js"></script>
    <script src="https://npmcdn.com/[email protected]/browser.min.js"></script>
    <script type="text/babel">
        // Use react JSX code here or in a separate file
    </script>
    </body>
</html>

npm을 통해 설치하기

다음을 수행하여 npm 을 사용하여 React를 설치할 수도 있습니다.

npm install --save react react-dom

JavaScript 프로젝트에서 React를 사용하려면 다음을 수행 할 수 있습니다.

var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(<App />, ...);

사를 통한 설치

페이스 북은 Yarn 이라는 자체 패키지 관리자를 발표했다. Yan은 React 설치에도 사용될 수있다. Yarn을 설치 한 후 다음 명령을 실행하면됩니다.

yarn add react react-dom

그런 다음 React via npm을 설치 한 것과 똑같은 방식으로 프로젝트에서 React를 사용할 수 있습니다.

Hello World 구성 요소

React 구성 요소는 기본 React.Component 클래스를 확장하는 ES6 클래스로 정의 할 수 있습니다. 최소한의 형식에서 구성 요소 는 구성 요소를 DOM에 렌더링하는 방법을 지정하는 render 메서드를 정의 해야합니다 . render 메소드는 JSX 구문을 사용하여 HTML과 유사한 태그로 정의 할 수있는 React 노드를 반환합니다. 다음의 예는, 최소의 Component를 정의하는 방법을 나타내고 있습니다.

import React from 'react'

class HelloWorld extends React.Component {
    render() {
        return <h1>Hello, World!</h1>
    }
}

export default HelloWorld

컴포넌트는 또한 props 을받을 수 있습니다. 컴퍼넌트가 그 자체로는 알 수없는 값을 지정하기 위해서, 부모에 의해 건네진 프로퍼티입니다. 속성에는 특정 이벤트가 발생한 후에 구성 요소에서 호출 할 수있는 함수가 포함될 수도 있습니다. 예를 들어 버튼이 onClick 속성에 대한 함수를 받고 클릭 할 때마다 호출 할 수 있습니다. 구성 요소를 작성할 때, 그 props 를 통해 액세스 할 수있는 props 구성 요소 자체 개체 :

import React from 'react'

class Hello extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}!</h1>
    }
}

export default Hello

위의 예는 구성 요소가 부모에 의해 name prop에 전달 된 임의의 문자열을 렌더링하는 방법을 보여줍니다. 구성 요소는받은 소품을 수정할 수 없습니다.

구성 요소는 다른 구성 요소 내에서 렌더링되거나 최상위 구성 요소 인 경우 DOM에 직접 렌더링 될 수 있습니다. ReactDOM.render 사용하고 React 트리를 렌더링 할 구성 요소와 DOM 노드를 제공합니다.

import React from 'react'
import ReactDOM from 'react-dom'
import Hello from './Hello'

ReactDOM.render(<Hello name="Billy James" />, document.getElementById('main'))

지금까지 기본 구성 요소를 만들고 props 수락하는 방법을 알고 있습니다. 이것을 한발 더 나아가 state 소개 state .

데모를 위해서 Hello World 앱을 만들자. 성명이 있으면 이름 만 표시한다.

import React from 'react'

class Hello extends React.Component {

    constructor(props){

        //Since we are extending the default constructor,
        //handle default activities first.
        super(props);

        //Extract the first-name from the prop
        let firstName = this.props.name.split(" ")[0];
        
        //In the constructor, feel free to modify the
        //state property on the current context.
        this.state = {
            name: firstName
        }

    } //Look maa, no comma required in JSX based class defs!

    render() {
        return <h1>Hello, {this.state.name}!</h1>
    }
}

export default Hello

참고 : 각 구성 요소는 자신의 상태를 갖거나 부모의 상태를 지지물로 받아 들일 수 있습니다.

Codepen 예제 링크.

안녕하세요 세계

JSX가 없으면

다음은 React의 메인 API를 사용하여 React 요소를 생성하고 React DOM API를 사용하여 브라우저에 React 요소를 렌더링하는 기본 예제입니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>

    <!-- Include the React and ReactDOM libraries -->
    <script src="https://fb.me/react-15.2.1.js"></script>
    <script src="https://fb.me/react-dom-15.2.1.js"></script>

  </head>
  <body>
    <div id="example"></div>

    <script type="text/javascript">

      // create a React element rElement
      var rElement = React.createElement('h1', null, 'Hello, world!');

      // dElement is a DOM container
      var dElement = document.getElementById('example');

      // render the React element in the DOM container
      ReactDOM.render(rElement, dElement);

    </script>

  </body>
</html>

JSX 사용

React 요소를 문자열로 만드는 대신 JSX (자바 스크립트에 XML 구문을 추가하기 위해 Facebook에서 만든 자바 스크립트 확장)를 사용할 수 있습니다.

var rElement = React.createElement('h1', null, 'Hello, world!');

동일한 기능 (HTML에 익숙한 사용자에게 읽기 쉽도록)

var rElement = <h1>Hello, world!</h1>;

JSX를 포함하는 코드는 <script type="text/babel"> 태그로 묶어야합니다. 이 태그 내의 모든 내용은 Babel 라이브러리 (React 라이브러리 외에도 포함되어야 함)를 사용하여 일반 Javascript로 변환됩니다.

결국 위의 예제는 다음과 같습니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>

    <!-- Include the React and ReactDOM libraries -->
    <script src="https://fb.me/react-15.2.1.js"></script>
    <script src="https://fb.me/react-dom-15.2.1.js"></script>
    <!-- Include the Babel library -->
    <script src="https://npmcdn.com/[email protected]/browser.min.js"></script>

  </head>
  <body>
   <div id="example"></div>

    <script type="text/babel">

      // create a React element rElement using JSX
      var rElement = <h1>Hello, world!</h1>;

      // dElement is a DOM container
      var dElement = document.getElementById('example');

      // render the React element in the DOM container
      ReactDOM.render(rElement, dElement);

    </script>

  </body>
</html>

ReactJS 란 무엇입니까?

ReactJS는 응용 프로그램의 보기 계층 에만 책임이있는 오픈 소스, 구성 요소 기반의 프런트 엔드 라이브러리입니다. 그것은 페이스 북에 의해 유지됩니다.

ReactJS는 가상 DOM 기반 메커니즘을 사용하여 HTML DOM에서 데이터 (보기)를 채 웁니다. 가상 DOM은 매번 완벽한 DOM을 다시로드하는 대신 개별 DOM 요소 만 변경한다는 사실을 바탕으로 빠르게 작동합니다.

React 애플리케이션은 작고 재사용 가능한 HTML을 출력하는 여러 구성 요소로 구성 됩니다. 구성 요소는 다른 구성 요소 내에 중첩되어 복잡한 응용 프로그램을 간단한 구성 요소로 만들 수 있습니다. 구성 요소는 내부 상태도 유지할 수 있습니다. 예를 들어 TabList 구성 요소는 현재 열려있는 탭에 해당하는 변수를 저장할 수 있습니다.

React를 사용하면 JSX라는 도메인 특정 언어를 사용하여 구성 요소를 작성할 수 있습니다. JSX를 사용하면 JavaScript 이벤트에서 믹싱하는 동안 HTML을 사용하여 구성 요소를 작성할 수 있습니다. React는이를 내부적으로 가상 DOM으로 변환하여 궁극적으로 HTML을 출력합니다.

가상 DOM을 사용하여 HTML DOM의 구성 요소를 다시 렌더링 할 수 있도록 구성 요소의 상태 변경 내용을 신속하고 자동으로 " 반응 "시킵니다. 가상 DOM은 실제 DOM의 메모리 내 표현입니다. React는 브라우저의 DOM에서 직접 처리하는 대신 가상 DOM 내부에서 대부분의 처리를 수행하여 신속하게 작동 할 수 있으며 마지막 렌더링주기가 발생한 이후 변경된 구성 요소 만 추가, 업데이트 및 제거 할 수 있습니다.

무국적 기능이있는 Hello World

상태없는 구성 요소는 기능 프로그래밍에서 철학을 얻고 있습니다. 그 의미는 다음과 같습니다. 함수는 주어진 시간에 똑같은 것을 항상 반환합니다.

예 :

const statelessSum = (a, b) => a + b;

let a = 0;
const statefulSum = () => a++;

위의 예제에서 알 수 있듯이 statelessSum은 항상 a와 b와 동일한 값을 반환합니다. 그러나 statefulSum 함수는 매개 변수 없이도 동일한 값을 반환하지 않습니다. 이 유형의 함수의 동작을 부작용 이라고도 합니다 . 이 구성 요소는 그 이상의 일에 영향을줍니다.

따라서, 부작용이없고 항상 동일한 동작을 생성하므로 상태 비 저장 구성 요소를 더 자주 사용하는 것이 좋습니다. 이는 변동 가능한 상태가 유지 보수가 가능한 프로그램의 최악의 시나리오이기 때문에 앱에서 원하는 것입니다.

가장 기본적인 유형의 반응 구성 요소는 상태가없는 것입니다. 소품의 순수한 기능이며 내부 상태 관리를 필요로하지 않는 구성 요소는 단순한 JavaScript 기능으로 작성 될 수 있습니다. 이들은 state 를 유지할 state 가없는 props 의 기능이기 때문에 Stateless Functional Components 라고합니다.

다음은 Stateless Functional Component 의 개념을 설명하기위한 간단한 예입니다.

// In HTML
<div id="element"></div>

// In React
const MyComponent = props => {
    return <h1>Hello, {props.name}!</h1>;
};

ReactDOM.render(<MyComponent name="Arun" />, element);
// Will render <h1>Hello, Arun!</h1>

이 컴포넌트가하는 일은 모두 name prop 인 h1 요소를 렌더링한다는 것입니다. 이 구성 요소는 상태를 추적하지 않습니다. 다음은 ES6 예제입니다.

import React from 'react'

const HelloWorld = props => (
    <h1>Hello, {props.name}!</h1>
)

HelloWorld.propTypes = {
    name: React.PropTypes.string.isRequired
}

export default HelloWorld

이러한 구성 요소에는 상태를 관리하기 위해 백업 인스턴스가 필요하지 않으므로 React에는 최적화를위한 여지가 더 많습니다. 구현은 깨끗하지만 상태 비 저장 구성 요소에 대한 최적화 는 아직 구현되지 않았습니다.

반응 앱 만들기

create-react-app 는 Facebook에서 만든 React 앱 상용구 생성기입니다. 다음을 포함하여 최소한의 설정만으로 사용이 편리한 개발 환경을 제공합니다.

ES6 및 JSX 추출
핫 모듈 리로드가있는 Dev 서버
코드 linting
CSS 자동 접두사
JS, CSS 및 이미지 번들링 및 소스 맵을 사용하여 스크립트 작성
농담 테스트 프레임 워크

설치

먼저 노드 패키지 관리자 (npm)를 사용하여 create-react-app를 전역 적으로 설치합니다.

npm install -g create-react-app

그런 다음 선택한 디렉토리에서 생성기를 실행하십시오.

create-react-app my-app

새로 생성 된 디렉토리로 이동하여 시작 스크립트를 실행하십시오.

cd my-app/
npm start

구성

create-react-app는 기본적으로 의도적으로 구성 할 수 없습니다. 예를 들어 Sass와 같은 컴파일 된 CSS 언어를 사용하는 것과 같이 기본값이 아닌 사용이 필요한 경우 eject 명령을 사용할 수 있습니다.

npm run eject

이렇게하면 모든 구성 파일을 편집 할 수 있습니다. 주의 이것은 돌이킬 수없는 과정입니다.

대안

대체 반응 상용구는 다음을 포함합니다 :

리작토 빌드 앱

프로덕션을 위해 앱을 빌드하려면 다음 명령을 실행하십시오.

npm run build

재사용 가능한 구성 요소 생성의 절대적인 기초

구성 요소 및 소품

React는 응용 프로그램의 관점에서만 관련이 있으므로 React에서 개발의 대부분은 구성 요소를 만드는 것입니다. 구성 요소는 응용 프로그램의 일부보기를 나타냅니다. "Props"는 JSX 노드에서 사용되는 속성 (예 : <SomeComponent someProp="some prop's value" /> )이며 응용 프로그램이 구성 요소와 상호 작용하는 주요 방법입니다. 위의 스 니펫에서는 SomeComponent 내부에서 this.props 액세스 할 수 있습니다. this.props 값은 객체 {someProp: "some prop's value"} 입니다.

React 구성 요소를 간단한 함수로 생각하는 것이 유용 할 수 있습니다. 즉, "props"형식으로 입력을 받아 마크 업으로 출력을 생성합니다. 많은 간단한 구성 요소가 한 걸음 더 나아가서 "순수 함수"를 만듭니다. 즉, 부작용을 일으키지 않으며 멱등수입니다 (입력 집합이 주어지면 구성 요소는 항상 동일한 출력을 생성합니다). 이 목표는 실제로 "클래스"가 아닌 함수로 구성 요소를 실제로 생성하여 공식적으로 시행 할 수 있습니다. React 구성 요소를 만드는 세 가지 방법이 있습니다.

기능적 ( "Stateless") 구성 요소

const FirstComponent = props => (
    <div>{props.content}</div>
);

React.createClass ()

const SecondComponent = React.createClass({
    render: function () {
        return (
            <div>{this.props.content}</div>
        );
    }
});

ES2015 클래스

class ThirdComponent extends React.Component {
    render() {
        return (
            <div>{this.props.content}</div>
        );
    }
}

이러한 구성 요소는 정확히 같은 방식으로 사용됩니다.

const ParentComponent = function (props) {
    const someText = "FooBar";
    return (
        <FirstComponent content={someText} />
        <SecondComponent content={someText} />
        <ThirdComponent content={someText} />
    );
}

위 예제는 모두 동일한 마크 업을 생성합니다.

기능 구성 요소는 그 안에 "상태"를 가질 수 없습니다. 따라서 구성 요소에 상태가 필요하면 클래스 기반 구성 요소로 이동하십시오. 자세한 내용은 구성 요소 만들기 를 참조하십시오.

마지막으로, 반응 소품은 일단 전달되면 변경 불가능합니다. 즉, 구성 요소 내에서 수정할 수 없습니다. 구성 요소의 부모가 소품의 값을 변경하면 React가 이전 소품을 새 것으로 바꾸는 처리를하면 구성 요소는 새 값을 사용하여 자체를 다시 렌더링합니다.

소품과 구성품과의 관계에 대해 더 자세히 알고 싶다면 Reactable In Thinking and Reusable Components 를 참조하십시오.

Modified text is an extract of the original Stack Overflow Documentation

아래 라이선스 CC BY-SA 3.0

와 제휴하지 않음 Stack Overflow

React 튜토리얼
React 시작하기

수색…

비고

버전