리액트를 다루는 기술 개정판 [컴포넌트 반복, LifeCycle]

6. 컴포넌트 반복

  . 자바스크립트 배열의 map() 함수 

    . arr.map(callback, [thisArg])

      1. currentValue: 현재 처리하고 있는 요소 

      2. index: 현재 처리하고 있는 요소의 index

      3. array: 현재 처리하고 있는 원본 배열 

    . thisArg: callback 함수 내부에서 사용할 this reference

    . 예제 

var numbers = [1,2,3,4,5];
var processed = numbers.map(function(num){
	return num * num;
});

 

  . 데이터 배열을 컴포넌트 배열로 변환하기 

    . key는 언제나 유일해야 한다.

 

7. 컴포넌트의 라이프사이클 메서드

  . 모든 컴포넌트에는 라이프사이클이 존재한다.

  . 클래스형 컴포넌트에서만 사용할 수 있다. 물론, 함수형도 Hooks에서 비슷한 기능을 제공한다.

 

  . 종류 

    . Will 접두사: 어떤 작업을 작동하기 전에 실행 

    . Did 접두사: 어떤 작업을 작동한 후에 실행 

    . Mount

      . DOM이 생성되고 웹 브라우저상에 나타나는 것

      . 실행 순서: constructor > getDerivedStateFromProps > render > componentDidMount

    . Update

      . props 수정, state 수정, 부모 컴포넌트 리렌더링, this.forceUpdate로 강제 렌더링 트리거 발생시 

      . getDerivedStateFromProps > shouldComponentUpdate > (true 반환시 render 호출) >

        > render > getSnapshotBeforeUpdate > (실제 웹브라우저의 DOM 변화) > componentDidUpdate

      . forceUpdate 수행시 바로 render부터 실행 

    . Unmount

      . DOM에서 컴포넌트를 제거하는 것 

      . componentWillUnmount: 컴포넌트가 웹브라우저 상에서 사라지기 전에 호출 

 

  . render()

    . 컴포넌트 모양새를 정의한다.

    . 유일한 필수 메서드이며, 이 안에서 this.props, this.state에 접근할 수 있다.

    . 이 메서드 안에서는 setState를 사용해도 안 되고, DOM에 접근해도 안 된다.

    . 만약 위 작업이 필요하면 componentDidMount에서 처리해야 한다. 

 

  . constructor()

  . getDerivedStateFromProps(): props로 받아 온 값을 state에 동기화 

  . componentDidMount(): 다른 라이브러리 or 프레임워크의 함수를 호출하거나 이벤트 등록같은 비동기 작업 수행 

  . shouldComponentUpdate(): 리렌더링을 시작할지 여부를 지정, 새로 설정되는 변수는 nextProps, nextState로 접근 

  . getSnapshotBeforeUpdate(): render 결과물이 브라우저에 반영되기 직전에 호출 (업데이트하기 직전 값 참고시 활용)

  . componentDidUpdate(): 리렌더링 후 실행. DOM 처리 가능. prevProps/State로 이전 데이터 접근, snapshot 전달 받음 

  . componentWillUnmount(): 컴포넌트를 DOM에서 제거할 때 실행 

  . componentDidCatch(): 렌더링 도중 에러 발생시, 오류 UI를 보여줌, p.178.

 

  . 에러 잡아내기 

    . 에러를 잡아 주는 컴포넌트를 생성한다.

 

  . 컴포넌트 업데이트 성능을 개선할 때는 shouldComponentUpdate가 중요하게 사용된다.