React -- 기초 개념 정리

React -- 기초 개념 정리

참고 : https://facebook.github.io/react/docs/getting-started.html

          http://reactkr.github.io/react/docs/getting-started.html  ==> 한글 React 번역 사이트

          https://github.com/reactjs/react-tutorial   ==> React 15.0.1 tutorial source git

          https://facebook.github.io/react/docs/multiple-components.html#dynamic-children  ==> key 사용하는 이유

          http://stackoverflow.com/a/30466299

         

         https://facebook.github.io/react/blog/2015/09/02/new-react-developer-tools.html  ==> React Developer Tools 설치하자.

         https://scotch.io/tutorials/learning-react-getting-started-and-concepts

         https://babeljs.io/repl/  ==> JSX 변환 결과 실시간 보여주기

         https://www.codementor.io/reactjs/tutorial/beginner-guide-setup-reactjs-environment-npm-babel-6-webpack

         http://jamesknelson.com/using-es6-in-the-browser-with-babel-6-and-webpack/

JSX ; XML syntax inside of JavaScript

- native HTML element names ; 소문자로 시작

- custom React class names ; 대문자로 시작

** React.createClass() -- React component 생성함.

** 기본적으로 XSS protection !

**  ReactDOM.render()

참고 : https://facebook.github.io/react/docs/top-level-api.html#reactdom.render

ReactDOM.render(

  ReactElement element,

  DOMElement container,

  [function callback]

)

--> 2번째 인자 DOM 내부로, 첫번째 인자 element 를 rendering 하여 삽입한다.

    -> 이후, 3번째 인자로 callback 함수 있으면 실행한다.

ReactDOM.render(

<h1>Hello, world!</h1>, 

document.querySelector('#myContent')

);

ReactDOM.render(

        <h1>Hello, world!</h1>,

        document.getElementById('myContent')

    );

** ReactDOM.render() 는 script 최하단에 작성한다. 왜냐하면 composite components 가 정의된 이후에만 ReactDOM.render() 는 호출되어야한다.

 ** JSX compiler 가 자동으로 HTML tags 를 React.createElement(tagName) expressions 으로 다시 작성한다.

 ** child component 에서  this.props & this.props.children 을 사용하여, parent component 의 data에 접근 가능!

      < 인용 > Pro React p.65

** 배열의 경우 key 사용하라! (필수)

The key should always be supplied directly to the components in the array, not to the container HTML child of each component in the array.

React 에서 array 의 순서를 구분 할수 없으므로, unique key 를 사용하여 구분한다.