All Articles

REACT

REACT

라이프 사이클 순서

  1. willmount
  2. didmount
  3. didupdate
  4. willmount는 리액트에서 권장하지 않음.

Mount 컴포넌트가 DOM에 삽입되면 발생한다.
렌더 순서
counstructor > componentWillMount > render > componentDidMount

componentWillMount()
루트 컴포넌트에서 APP과 관련된 외부 API를 설정할 때 사용한다.
최근에는 리액트에서 사용하지 말라고 권장.
componentDidMount()
자신을 제외한 컴포넌트를 수행한다던지 수정, 초기화, 추가를 할 수 있다.
기본적으로 DOM에 대한 접근이 필요한 모든 설정을 수행하고 필요한 데이터를 가져온다.
DOM 노드가 있어야 하는 초기화 작업은 이 메서드에서 이뤄지면 된다.
외부에서 데이터를 불러와야 한다면 네트워크 요청을 보내기 적절한 위치다.
이 메서드를 사용했다면 반드시 componentWillUnmount()에서 해제 작업을 반드시 해야한다.

Update
구성 요소가 업데이트 되거나 상태가 변경 될 때마다 다시 렌더링된다.
렌더 순서
정적 getDerivedStateFromProps > shouldComponentUpdate > 렌더링 > getSnapshotBeforeUpdate > componentDidUpdate > UNSAFEcomponentWillUpdate > UNSAFEcomponentWillReceiveProps

shouldComponentUpdate()가 false를 리턴하면 render가 호출되지 않는다.

shouldComponentUpdate() 리액트의 기본 동작은 모든 상태 변경 후 다시 렌더링하는 것.
컴포넌트가 불안정한 상태, 이 메서드가 호출되었다는 것은 현재 컴포넌트의 상태와 view에 그려진 내용, 상태가 다르다는 것을 의미한다.
shouldComponentUpdate()를 false로 설정하면 렌더를 막을 수 있다.(항상 불린을 반환)
첫번째 인자로 nextProps, 두번째 인자로 nextState 사용(비교한다.)
해당 컴포넌트의렌더를 제어할 때 사용한다.
setState를 사용하면 안된다.

성능을 최적화하기 위한 방법. 이 방법을 사용하려면 props와 state를 얕게 비교하는 PureComponent를 사용하는 것이 좋다.

componentDidUpdate() 상태 변경이 발생한 후 네트워크 요청을 하는데 유용하다. setState를 호출할 경우 무한 루프에 빠진다.

props change componentWillReceiveProps > shouldComponentUpdate > componentWillUpdate > render > componentDidUpdate

state change shouldComponentUpdate > componentWillUpdate > render > componentDidUpdate

UnMount
컴포넌트가 DOM에서 제거 될 때 호출

Constructor
생성자는 마운트되기 전에 호출된다.

정적 getDerivedStateFromProps
상태가 시간이 지남에 따라 props의 변화에 의존하는 드문 경우에 사용

Render
클래스 컴포넌트에서 유일한 필수 메서드
호출 될때 this.props , this.state를 검사한다.
렌더링 할 때마다 상태를 변경하여 많은 버그를 일으킬 수 있으므로 구성 요소 상태를 수정해서는 안된다.
브라우저와 직접 상호 작용하면 안된다.

랜더 순서
부모 컴포넌트의 랜더함수 리턴부터~

리액트는 UI 라이브러리
라우팅(페이지 전환)은 개발자가 직접 관리해야 한다.
전역(창 끄기 전까지, 페이지 전환해도 어디서든 쓸수 있는)으로 쓸 데이터도 개발자가 관리한다. (리덕스)
라우팅을 도와주는 라우팅 라이브러리.
2차 프로젝트는 next.js(create react, 서버사이드 렌더링 할 수 있게 해줌.)써봐도 됨

노드 최신 버전 설치

curl -sL https://deb.nodesource.com/setup_10.x | sudo bash -

.x 왼쪽 옆에 숫자가 버전임(노드에서 공식 확인해야됨)

sudo apt install nodejs

클론 후 무조건 npm install (start 하기 전에)

package.json
 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

명령어
start : 로컬에서 실시간으로 확인할때
build : 작성했던 파일들을 합쳐 결과물을 만들때
test : eject create react가 해제됨(웹팩 사용 잘 할때)
리액트는 각 파일이 독립적이다.(독립적 스코프)

./ <<현재 폴더 위치를 뜻한다.
css파일은 결국 다 합쳐지기 때문에 절대 중복되면 안됨.

라이프 사이클 메서드가 필요하고 자체 스테이트 관리가 필요할 컴포넌트 경우 클래스로 컴포넌트 생성
라이프 사이클 메서드가 필요없고 부모 컴포넌트에게 프롭스를 받기만하는 경우 함수형으로 컴포넌트 생성
프롭스로 부모쪽에서 넘겨주는 경우 자식 컴포넌트가 받기만하면 함수형 컴포넌트(자체 스테이트가 필요없을때)
컴포넌트에서 상태를 유지할 필요가 없는 경우 constructor(생성자)가 필요 없다.

리액트 라우터 설치

yarn add react-router-dom / npm install react-router-dom --save

라이프 사이클에 대해 큰 그림 그리고 전체적으로 훑어 봄.
필요에 의해 디테일하게 공부할 예정!!

Published 13 Aug 2019

세상 가장 작은 사람 on Twitter