└── README.md


/README.md:
--------------------------------------------------------------------------------
  1 | # Reactjs_selfHandbook
  2 | Reactjs 개인적인 사용법 성능 개선 방법 정리 (기본적인 리엑트의 계념은 생략..)
  3 | 
  4 | ## 1) 컴포넌트 Component
  5 | 
  6 | 리엑트 가상 엘리먼트를 나타내주는 함수.<br>
  7 | Mounting -> updating -> Unmounting 의 순서로 진행된다.
  8 | 
  9 | ### 1-1) 컴포넌트 라이프사이클
 10 | 
 11 | #### Mounting (순서가 보장) 컴포넌트 생성
 12 | 
 13 | 1. construtor()
 14 | 2. componentWillMount()
 15 | 3. render()
 16 | --------------------------렌더전
 17 | 4. componentDidMount()
 18 | 
 19 | #### Updating 컴포넌트 갱신
 20 | 
 21 | 1. componentWillReciveProps() => props가 갱신되면 실행됨
 22 | 2. shouldComponentUpdate() => 기본값이 존재하고 업데이트(false)를 취소할수 있다.
 23 | 3. componentWiiUpdate() => setState 불가능
 24 | 4. render()
 25 | 5. componentDidUpdate() => 이전의 props과 갱신된 props값 비교 가능 setState가능
 26 | 
 27 | #### Unmountiong 컴포넌트 재거
 28 | 
 29 | 1. componentWillUnmount()
 30 | 
 31 | ### 컴포넌트 state, props
 32 | 
 33 | 컴포넌트 인스턴스 속성 state, props가 있다. <br>
 34 | 컴포넌트 안에서는 state로 값을 전달 받고 <br>
 35 | 컴포넌트 끼리는 props로 값을 전달 받는다. props은 부모와 자식간의 수직적인 관계로 전달받는다.
 36 | 
 37 | ### 1-2) setState의 이해
 38 | 
 39 | 컴포넌트안에 setState()라는 함수가 존재한다. 하지만 완벽하지 못하다.
 40 | 여러가지 이유가 있지만 ..
 41 | 1. 값의 변화를 감지할때 연산자의 값이 아닌 reference 값을 기준으로 참/거짓을 리턴한다.
 42 | 2. setState 호출 즉시 state가 변경되지 않고 비동기적으로 동작하므로 주의 해야 한다.
 43 | 
 44 | 이렇게 만든 이유는 무분별한 render()를 방지하기 위한것이기도 하다. <br>
 45 | 
 46 | 
 47 | ### 1-3) 컴포넌트 다양한 패턴
 48 | 
 49 | 컴포넌트를 좀 더 효율적으로 사용하기 위해서 고려하는 사항들
 50 | - solid원칙 (컴포넌트(함수)를 한가지 역할 이외의 다른 기능을 담당하지 않게 한다.)
 51 | - dry유지
 52 | - 재사용가능한 컴포넌트 생성
 53 | - 컴포넌트역할의 명확성
 54 | - 똑똑한 컴포넌트(containers), 멍청한 컴포넌트(components) 분리...
 55 | - 컴포넌트가 150줄이 넘지 않아야 한다.
 56 | 
 57 | #### 무상태 컴포넌트 만들기
 58 | 
 59 | 재사용성이 좋은 무상태 즉 state가 없는 컴포넌트.<br>
 60 | 무상태 컴포넌트는 render에 필요한 데이터는 존재한다. 또한 ui를 조작하기 위한 state는 없다.
 61 | ```js
 62 | // JS 자바스크립트
 63 | const Block = (props) => (
 64 |   <div className={props.className}/>
 65 | );
 66 | // or
 67 | const Block = (...props) => (
 68 |   <div {...props}/>
 69 | );
 70 | ```
 71 | ```ts
 72 | //TS 타입스크립트
 73 | interface IAppProps {
 74 |   className?: string;
 75 | };
 76 | class Block extends React.Component<IAppProps, any> {
 77 |   static defaultProps:IAppProps = {
 78 |     className: 'defaultValue'
 79 |   };
 80 |   public render(): JSX.Element {
 81 |     return (
 82 |       <div className={props.className}/>
 83 |     );
 84 |   }
 85 | };
 86 | ```
 87 | 
 88 | #### 컨테이터 컴포넌트 만들기
 89 | 
 90 | 무상태컴포넌트를 조합하여 app을 제작하기 위한 컴포넌트<br>
 91 | jsx문법이 적고 state관리를 통해서 무상태(멍청한) 컴포넌트를 조작한다. fetch를 통한 state관리도 가능하다.
 92 | 
 93 | ```js
 94 | //JS 자바스크립트
 95 | class Main extends React.Component {
 96 |   state = { isChanged: false };
 97 |   handleClickButton = (e) => this.setState({ isChanged: true });
 98 |   render() {
 99 |     return (
100 |       <div>
101 |         <Button onClick={this.handleClickButton}/>
102 |         <Block className={this.state.isChanged}/>
103 |       </div>
104 |     );
105 |   }
106 | }
107 | ```
108 | ```ts
109 | interface IAppProps {
110 | };
111 | interface IAppState {
112 |   isChanged: boolean;
113 | };
114 | //TS 타입스크립트
115 | class Main extends React.Component<IAppProps, IAppState> {
116 |   constructor(props:IAppProps)  {
117 |     super(props:IAppProps);
118 |     this.state = {
119 |       isChanged: false,
120 |     };
121 |   }
122 |   private handleClickButton = (e) => this.setState({ isChanged: true });
123 |   public render(): JSX.Element {
124 |     return (
125 |       <div>
126 |         <Button onClick={this.handleClickButton}/>
127 |         <Block className={this.state.isChanged}/>
128 |       </div>
129 |     );
130 |   }
131 | }
132 | ```
133 | 
134 | ## 2) 성능 개선을 위한 방법들
135 | 
136 | ### 2-1) Webpack DefinePlugin를 이용해서 production 빌드를 한다,
137 | 
138 | ### 2-2) PureComponent의 의미없는 리렌더링 피하기
139 | shouldComponentUpdate에서 렌더링을 선택적으로 하기위해서 방어 코드를 삽입해 준다. <br>
140 | 값의 변화를 감지할때 연산자의 값이 아닌 reference 값을 기준으로 참/거짓을 판단하므로 immutable한 값으로 변화를 감지하도록 한다.
141 | ```js
142 | shouldComponentUpdate(nextProps, nextState) {
143 |   return true;
144 | }
145 | ```
146 | 
147 | ### 2-3) React Perf 사용
148 | 렌더링 성능 체크 툴 사용
149 | ```
150 | $ npm install react-addons-perf
151 | ```
152 | ```js
153 | import Perf from 'react-addons-perf'
154 | Perf.start() // 기록시작
155 | ... //성능 체크할 부분
156 | Perf.stop() // 기록끝
157 | const measurements = Perf.getLastMeasurements()
158 | Perf.printInclusive(measurements) //얼마나 시간을 들였는지 알려준다.
159 | Perf.printExclusive(measurements) //얼마나 시간을 들였는지 알려준다.
160 | Perf.printWasted(measurements) //시간낭비를 찾아서 알려준다.
161 | Perf.printDOM(measurements) //모든 dom의 연산을 알려준다.
162 | ```
163 | 
164 | ### 2-3) 메서드를 올바르게 선언
165 | 
166 | ```js
167 | 안티패턴
168 |   return (
169 |     <div>
170 |       <div onClick={(e) => this.doSomeThing(e)}></div>
171 |       or
172 |       <div onClick={this.doSomeThing.bind(this)}></div>
173 |     </div>
174 |   );
175 | ```
176 | 위와 같이 render() jsx문법안에 doSomeThing메서드를 만들어 놓으면 render 메서드가 호출 될 때마다 항상 새로운 익명 함수를 만들어 낸다.
177 | 
178 | ```js
179 | 권장패턴
180 | class Component extends React {
181 |   doSomeThing = (e) => {
182 |   }
183 |   render() {
184 |     return (
185 |       <div onClick={this.doSomeThing}></div>
186 |     );
187 |   }
188 | }
189 | 
190 | 
191 | 
192 | 
193 | ```
194 | doSomeThing 메소드를 생성 할 때 arrow 함수를 사용하면 이미 doSomeThing 메소드를 Component의 범위에 바인딩하고 doSomeThing은 항상 동일하므로 우리 컴포넌트는 자신을 다시 렌더링하지 않는다.
195 | 
196 | 
197 | ### 2-4) 비용이 많이 들어가는 로직을 캐시화 한다
198 | 보충설명...작성중
199 | 
200 | ### 2-5) why-did-you-update툴 사용
201 | 불필요한 업데이트를 알려준다.
202 | <img src="https://camo.githubusercontent.com/0f34a575ad3f81c9826f54c03a17da848e1ee038/687474703a2f2f692e696d6775722e636f6d2f556938595542652e706e67" />
203 | 
204 | 사용방법
205 | ```
206 | $ npm install why-did-you-update
207 | ```
208 | ```
209 | if (process.env.NODE_ENV !== 'production') {
210 |   const {whyDidYouUpdate} = require('why-did-you-update')
211 |   whyDidYouUpdate(React)
212 | }
213 | ```
214 | 


--------------------------------------------------------------------------------