Pro reactjs 요약

프로 리엑트 책을 보면서 스텝바이스텝 하고 있는데 리엑트 버전업으로 인해 

이것저것 바뀐게 많다. 게다가 오타까지.....내가 코딩한 것도 오타가 많은데 

책까지 오타가 많다.....정말 별거 아닌걸로 삽질의 연속~ 은근 스트레스~ 책의 전체적인 퀄리티는 나쁘지 않은데

별 사소한거로 책의 전반적인 좋은 이미지를 깍아 먹는 듯....

그리고 한가지 더 말하자면 코딩 스타일 좀 일관성 있게 작성했으면 하는 

아쉬움도 있다. 라고 하면 좋겠는데 아쉬움을 넘어서 졸 짜증난다. 

나처럼 따라서 해보는 사람들에겐 정말 스트레스이다.

중간에 const arrow function 으로 작성했다가 걍  단순 function 타입으로 작성하질 않나....나원참....

 

암튼 지금 절반 정도 본듯....일단 칼을 뽑았으니 무라도 베긴 해야겠어서 보긴 할텐데....점점 실행력이 떨어진다...

아래는 걍 중점이라고 생각되는 부분만 요약했다.

- import ReactDom from 'react-dom' 추가 임포트

render() 함수가 react-dom 모듈로 옮겨졌기에 책에서 나온데로 

import React from 'react' 일케 했다간 에러 남.

import ReactDom from 'react-dom' 이렇게 react-dom 도 임포트 해줘야 함.

- class 선언하여 초기 상태가 필요한경우  constructor() //클래스 생성자  선언 

class Card extends Component{

    conttructor(){

       super(...arguments)

       this.state={

             man:true

       }

   }

}

- Array.prototype.find / Array.prototype.findIndex 메서드 폴리필버전

npm install --save babel-polyfill 

호출 방식 

import 'babel-polyfill';

- XMLHttpRequest 보다 이용하기 쉬운 window.fetch 함수 이용한다. 

하지만 크로스브라우징을 위해 npm 에서 whatwg-fetch 폴리필을 설치한다. 

npm install --save whatwg-fetch

호출방식

import 'whatwg-fetch';

- 불변성 도우미 - 실제로 객체를 변경하는 대신 변경된 새로운 객체를 반환

npm install --save react-addons-update

호출방식 

import update from 'react-addons-update'

사용방식

1. $push - 배열의 push와 비슷하게 배열 끝부분에 요소를 하나 이상 추가

                 let arr=[1, 2, 3];

                 let newArr=update( arr, {$push:[4]} );

                 // --> [1, 2, 3, 4]

2. $unshift - 배열의 unshift와 비슷하게 배열 앞부분에 요소를 하나이상 추가

                  let arr=[1, 2, 3];

                 let newArr=update( arr, {$unshift:[0]} );

                 // --> [0,1, 2, 3]

3. $splice - 배열의 splice와 비슷하게 요소 제거 및 추가를 통해 배열 내용을 변경( splice 매개변수를 포함하는 배열의 배열을 제공                    한다는 점이 차이가 있다. )

                  let arr=[1, 2, 3, 'a' ];

                 let newArr=update( arr, {$splice:[[2,1,3,4]]} );

                 // --> [1, 2, 3, 4]

4. $set - 대상을 완전히 대체

5. $merge - 지정한 객체의 키를 대상과 병합한다. 

                   let obj={a:5, b:3}

                   let newObj=update( obj, {$merge:{b:6, c:7} } );

                  //--> {a:5, b:6, c:7 }

6. $apply - 현재 값을 지정한 함수로 전달하고 새로 반환된 값으로 이를 업데이트한다.

                  let obj={a:5, b:3}

                   let newObj=update( obj, {  b:{$apply: (value)=>value*2}  } );

                  //--> {a:5, b:6 }

                   

-ReactCSSTransitionGroup 

( 애니메이션에 포함할 모든 컴포넌트를 래핑 - CSS 애니메이션과 트랜지션을 트리거하는 간단한 요소)

   npm install --save react-addons-css-transition-group

-drag and drop

npm install --save react-dnd@2.x.x react-dnd-html5-backend@1.x.x

-react router

npm install --save react-router@1.x.xhistory@1.x.x

걍 

npm install --save react-router

-브라우저 히스토리 설정 아래와 같이 변경됨. 버전업되면서 먼가 이것저것 바뀌었다.......

createBrowserHistory --> browserHistory 로 

// v1.x
import createBrowserHistory from 'history/lib/createBrowserHistory'
<Router history={createBrowserHistory()} />

// v2.0.0
import { browserHistory } from 'react-router'
<Router history={browserHistory} />

이외에 버전업으로 인해 바뀐것들에 대한 내용이 아래 링크에 있으니 참고~

https://github.com/reactjs/react-router/blob/master/upgrade-guides/v2.0.0.md

flux 설치

- npm install --save flux

이벤트 방출기

- npm install --save fbemitter

성능체크 

- npm install --save react-addons-perf

호출 - import Perf from 'react-addons-perf'

Perf.start() / Perf.stop() :  측정을 시작 및 중지. 두 메서드 중간에 수행된 리엑트 작업은 분석을 위해 기록된다.

Perf.printInclusive() : 소비된 전체 시간을 출력한다.

Perf.printExclusive() : 컴포넌트를 마운팅하는 데 소비된 시간, 즉 속성을 처리하거나 

                                      componentWillMount 및 componentDidMount 호출 시간을 제외하고

                                      소비된 나머지 시간을 출력한다.

Perf.printWasted() : 허비된 시간을 출력한다. 허비된 시간은 Dom에 변경된 사항이 없기 때문에 동일하게 유지되므로

                                   사실상 아무것도 렌더링하지 않는 컴포넌트에 소비된 시간이다.

성능 튜닝 / 수명 주기 메서드

shouldComponentUpdate 

- 렌더링 프로세스가 시작하기 직전에 트리거되며,

해당하는 트리를 렌더링에서 제외할 수 있는 기회를 제공한다.

이 메서드는 nextProp와 nextState 인자를 받으며 컴포넌트를 다시 렌더링해야 하는지 여부를 리엑트에

알려주는 true 나 false를 반환해야 한다.

기본값은 true 지만 false 를 반환하면 컴포넌트가 변경되지 않은 것으로 간주하고 비교나 렌더링을 수행하지 않는다.