[2019.04.15] React의 개념 - LifeCycle API

 

lifeCycle 즉, 나타나기 전, 나타난 직후, 나타난 후, 사라지기 전 등등, 어떠한 것에 대해 나타나기 전부터 나타난 후 사라지기까지의 모든 과정을 말한다.

모든 컴포넌트는 이러한 lifeCycle 동안 발생할 수 있는 함수들을가지고 있다.

-- [2019.04.17]  수정사항 -- 

 

현재 리액트 버전 16.4에 들어서면서 왠만한 라이프사이클이 불필요하게 되었다.

현재 공식문서에 나오는 라이프사이클 API

• componentDidMount : 초기 컴포넌트가 생성될 때
• componentDidUpdate : 중간에 컴포넌트가 변경사항이 있을 때
• componentWillUnmount : 컴포넌트가 삭제될 때

-------

 

# 브라우저에 나타나기 전 호출되는 API

constructor

constructor(props){
  super(props);
}

컴포넌트 생성자 함수이다. 컴포넌트가 새로 만들어 질 때 이 함수가 호출된다.

componentWillMount

componentWillMount(){

}

컴포넌트가 브라우저에 나타나기 직전에 호출되는 함수이다. 해당 함수는 다른 lifeCycle 함수로 충분히 처리가 가능하여 더이상 사용하지 않는 함수라고 한다.

componentDidMount

componentDidMount(){

}

컴포넌트가 브라우저에 나타난 직후 호출되는 함수이다.

componentDidMount가 주로 사용되는 부분

• 주로 DOM을 건드려야 하는 외부 라이브러리 연동
• 해당 컴포넌트에서 필요로 하는 데이터를 요청하기 위해 ajax 등의 서버 요청
• DOM의 속성을 읽거나 직접 변경하는 작업

 

# 컴포넌트 업데이트 될 때 호출되는 API

(컴포넌트가 새로운 props를 받았을 때, state의 변화가 나타났을 때)

부모 컴포넌트가 리렌더링 되면, 자식 컴포넌트들도 모두 리렌더링 된다. 그때 해당 컴포넌트가 받는 props가 달라졌다면 다시 렌더링 해야하지만, 달리진 점이 없다면 렌더링을 막고 그대로 사용함으로써 일거리를 줄일 수 있다. 

componentWillReceiveProps

componentWillReceiveProps(nextProps){
 //여기서 this.props는 바뀌기 전의 props 
}

componentWillReceiveProps함수 내에서 this.props는 기존에 가지고 있던 값이고, nextProps가 새로 들어온 props이다. 주로, state가 props에 따라 변해야 하는 로직을 작성한다.

static getDerivedStateFromProps

static getDerivedStateFromProps(nextProps, prevState){
  // 여기서는 setState로 state 값을 바꾸는게 아니라
  // 특정 props가 바뀔 때, 설정하고 싶은 state 값을 리턴하는 형태로 사용
  /*
  if(nextProps.value !== prevState.value){
  	return { value : nextProps.value };
  }
  return null; // null 을 리턴하면 따로 업데이트 할 것이 없다는 의미
  */
}

컴포넌트가 새로 리렌더링 됐을 때, props로 받아온 값을 state로 동기화 하는 작업을 할 때 사용한다.

shouldComponentUpdate

shouldComponentUpdate(nextProps, nextState){
 //return false 하면 업데이트를 안함
 //return this.props.checked !== nextProps.checked
  return true;
}

이것이 중요! 해당 컴포넌트를 최적하하는 작업에서 매우 유용하게 사용되는 함수. 현재 컴포넌트가 리렌더링 되기 전, 기존 가지고 있던 props와 새롭게 들어온 props를 비교하여, 바뀌었으면 true를 반환하여 컴포넌트를 다시 그리고 달라진 점이 없으면 false를 반환하여 다시 그대로 사용.

getSnapshotBeforeUpdate()

getSnapshotBeforeUpdate(prevProps, prevState){
  // DOM 업데이트가 일어나기 직전의 시점.
  // 만약 scrollTop, scrollHeight 라는 이벤트를 사용하고 있을 때
  if(prevState.array !== this.state.array){
    const {scrollTop, scrollHeight} = this.list;
  }
  
  //여기서 반환하는 값은 componentDidUpdate의 snapshot 매개변수로 전달
  
  componentDidUpdate(prevProps, prevState, snapshot){
    if(snapshot){
      const {scrollTop} = this.list;
      if(scrollTop !== snapshot.scrollTop) return; // 기능이 이미 구현되어 있다면 처리하지 않음
      const diff = this.list.scrollHeight - snapshot.scrollHeight;
      this.list.scrollTop += diff;
    }
  }
}

해당 함수는 발생하는 시점은 다음과 같다.

• render()
• 실제 DOM에 변화가 발생

해당 함수에서 DOM의 변화가 일어나기 직전의 DOM 상태를 가져온다.

componentDidUpdate

componentDidUpdate(prevProps, prevState, snapshot){

}

이 함수에서는 이미 render()가 호출된 뒤에 발생한다. 이 시점에서는 이미 this.props와 thisstate가 바뀌어 있다. 그리고 파라미터 값 preProps와 prevState를 통해 이전의 값을 조회할 수 있다. 파라미터 snapshot은 getSnapshotBeforeUpdate에서 반환한 값을 가져온다.

# 컴포넌트가 제거될 때 호출되는 API

componentWillUnmount

componentWillUnmount(){

}

컴포넌트가 제거되기 직전에 발생한다. 여기서는 주로 등록했었던 이벤트를 제거하고, setTimeout을 걸었던 것이 있다면 clearTimeout을 통하여 제거한다. 추가적으로 외부 라이브러리를 사용 중 dispose로 끊어줘야 하는 작업이 필요한 경우에 사용한다.

 

# 컴포넌트 에러 발생 시 호출되는 API

componentDidCatch

componentDidCatch(error, info){
  this.setState({
    error:true
  });
}

컴포넌트가 렌더링 중이나, props 변경 중 에러가 발생하면 발생하는 함수이다. 위 처럼 state를 set 해서, render 함수쪽에서 이에 따라 에러를 처리하면 된다. (이건 향후에 다시 알아보는 것으로...)