React #02 (Life Cycle, node + react 환경구축)

React #02 (Life Cycle, node + react 환경구축)

1. Life Cycle

컴포넌트의 생명 - 소멸까지의 과정을 생명주기라고 합니다.

생명주기에서 특정 시점에 자동으로 호출되는 메소드를 라이프사이클이벤트라고 합니다.

컴포넌트가 생성, 변경, 제거될 때 (특정 시점) 호출되는 메소드(라이프사이클 이벤트)

컴포넌트의 특정시점에는 크게 3가지가 있습니다.

1. 마운팅
2. props의 변화
3. state의 변화

그렇다면 이에 해당하는 이벤트들을 알아봅시당~

1.1 Mounting

React 컴포넌트가 DOM에 삽입될 때의 과정을 마운팅이라고 합니다.

해당 과정은 다음과 같은 함수호출순서를 가집니다.

1. constructor() (초기화과정, set props and state)
- 단 한번 수행
- state 설정

2. componentWillMount()
- 컴포넌트를 실제 DOM에 추가하기 직전에 호출

3. render() - 렌더링

4. componentDidMount()
- Ajax, 타이머생성코드, 서버통신

참고 - 리액트의 라이프사이클

1,2,3번 과정을 수행하면 컴포넌트가 모두 구성되어지고 서버와 통신할 때 DidMount()함수에서 호출한다

1.2 props, state

특정 객체를 렌더링하기 위해서 props, state를 사용합니다.

대략(둘의 생명주기가 다르나 비슷함) 순서는 다음과 같습니다.

1. shouldComponentUpdate()

   • props, state변경시 재 랜더링여부를 return으로 결정한다.

2. componentWillUpdate()

   • 1번호출 이후에 재랜더링직전에 호출되는 메소드
   • 새로운 props, state가 반영되기 직전 새로운 값을 받는다.

3. render()

4. componentDidUpdate()

   • 출력되는 화면 구성을 변경하고자 할때 많이 사용.
   
   

1.3 컴포넌트 해제

컴포넌트 마운팅이 해제될 때 componentWillUnmount()이 호출됩니다.

컴포넌트동작을 위해 사용한 메소드들의 리소스를 제거합니다.

라이프사이클 REST API 개념 이해

2. node + react환경구축

node와 react서버 같이 수행하기

1. 필요한 패키지 설치

   • yarn = npm과 비슷함, 속도차이
   • nodemon = 리로딩없이 자동으로 반영

$ npm install yarn
$ npm install nodemon // 재로드없이 자동 반영

2. react에 해당하는 전체 폴더를 client폴더 하위에 이동

   • server, client를 구분하기 위해 폴더이동

3. node_modules에서 에러발생시, 삭제 후 다시 npm install

   • 폴더이동에서 발생하는 경로문제

4. 루트경로에서 package.json파일 생성

   • server에 대한 package추가

5. package.json 내용

   {
       "name": "프로젝트 name",
       "version": "1.0.0",
       "scripts": {
           "client": "cd "client경로" && yarn start",
           "server": "nodemon server.js",
           "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
       },
       "dependencies": {
           "yarn": "^1.13.0",
           "body-parser": "^1.18.3",
           "express": "^4.16.4"
       },
       "devDependencies": {
           "concurrently": "^4.0.1"
       }
   }
   

6. npm i -g로 의존라이브러리 추가

7. server.js 파일 작성

8. package.json에 설정된 스크립트 수행

   $ yarn dev

---

"concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""

• concurrently: React app and Server을 동시에 수행하기 위함.

• --kill-others-on-fail : 하나의 프로세스가 종료되면 다른 프로세스도 같이 종료되도록 설정하는 플래그.