React 강의 정리 (3,4)

NPM : NodeJS 로 만들어진 모듈들을 설치, 버전 관리해주는 툴

NodeJS 를 설치하면 NPM 이 같이 설치된다.

 

 

 

디렉토리 구조

project
---- node_module
---- public
-------- index.html
---- src
-------- index.js
-------- components
------------ ...
package.json
webpack.config.js

 

 

 

기본 파일 세팅

방법 1. 강의에서 제공하는 기본 틀 https://github.com/velopert/react-codelab-fundamentals

방법 2. 페이스북에서 만든 create-react-app 프로그램을 설치 받아서 프로젝트 생성 https://velopert.com/2037

 

 

 

---

1. export default class 를 사용하면 바로 class 를 export 할 수 있다.
2. React-hot-loader 를 사용하는 경우 유의할 점 : react-hot-loader 는 파일이 수정되면 state 를 그대로 유지 시킨채 페이지를 리로딩 하여 변화를 즉각 확인 할 수 있게 도와주는 모듈이다. 다만 파일이 수정되어도 컴포넌트 state 을 유지하는 방식이 생성자를 실행 시키지 않는 방식이다. 그래서 생성자에 변경이 있을 경우는 새로고침해서 이를 반영해야 한다.
3. onClick 같은 이벤트는 컴포넌트 element tag 안에서는 적용할 수 없다. (ex. <MyComponent onClick={this.myHandler}/>) 이는 단순히 하위 컴포넌트에 this.props.onClick 이라는 데이터를 내려준 것 뿐이다. onClick 과 같은 이벤트는 native DOM 에서만 적용이 가능하다.
4. 배열, 객체의 값 변경은 spread 연산자를 이용해서 완전히 복사한 다음 데이터를 변경하여 이를 바꿔주는 형식이여야한다. 이러한 값을 immutable 하다. 하는데, spread 연산자가 불편한다면 페이스북에서 개발한 immutableHelper 를 사용하는 것도 괜찮다. 

spread 연산자 (...)도 따로 설치 과정이 필요하다.

npm install --save babel-preset-stage-0

이후 webpack.config.js -> presets 안에 stage-0 를 추가해주자.

 

 

 

Component lifecycle

메소드 이름	호출 시점	비고
componentWillMount	렌더링 전
componentDidMount	렌더링 후	다른 JS Framework 와의 연동 setTimeout setInterval Ajax 호출 등...
componentWillReceiveProps	새로운 props를 받았을 때	prop 에 따라 state 를 업데이트하는 작업을 시키는 곳
shouldComponentUpdate	update 를 할지 말지 결정
componentWillUpdate	update 전	여기서는 절대 setState 를 사용해서 안된다. 무한 루프가 생긴다.
componentDidUpdate	update 후
componentWillUnmount	컴포넌트 제거	-

 

 

 

HTML5 local storage

https://www.w3schools.com/jsref/prop_win_localstorage.asp

• 쿠키와 비슷. 
• 쿠키는 도메인당 4KB
• localStorage 는 2.5MB~5MB
• 서버로 값을 전송하지 않는다.
• text 형태로 밖에 저장하지 못한다. 
• 객체를 저장할 수 없다.
• 그러므로 Json 형태로 저장하는 것이 좋다.
• localStorage.clear() 하면 안에 있는 값을 지울 수 있다.