2021.02.22 / React - LifeCycle API

LifeCycle API

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

 

Ex)

// props로 받아온 값을 state로 동기화 하는 작업을 해줘야하는 경우에 사용됨.
static getDerivedStateFromProps(nextProps, prevState) {
	if (prevState.value !== nextProps.value) {
		return {
			value: nextProps.value
        }
	}
	return null;
}

// 특정 조건에 따라 렌더링을 막아줄 수 있는 함수.
shouldComponentUpdate(nextProps, nextState) {
	if (nextProps.value === 10) return false;
		return true;
    }

// 파라미터를 통해 이전의 값인 prevProps와 prevState를 조회할 수 있음.
componentDidUpdate(prevProps, prevState) {
	if (this.props.value !== prevProps.value) {
		console.log('value 값이 바뀌었다.', this.props.value);
	}
}

// 컴포넌트 제거
componentWillUnmount() {
	console.log('good bye');
}

Error

class App extends Component {
  state = {
    error: false
  }

  // 에러가 발생할 수 있는 컴포넌트의 부모 컴포넌트에서 사용해야 함.
  // 사용자에게는 에러가 발생했다는 메세지를 보여줌.
  // 에러 정보를 실제 개발자들이 볼 수 있게 전달.
  componentDidCatch(error, info) {
    this.setState({
      error: true,
    });
    // API 를 통해서 서버로 오류 내용 날리기
  }
  
  render() {
    if (this.state.error) {
      return (
        <div>에러 발생!</div>
      )
    }
  }
}

 

참고

- velopert.com/3631

- www.youtube.com/watch?v=Na_kP7X6KGs&list=PL9FpF_z-xR_E4rxYMMZx5cOpwaiwCzWUH&index=10

- www.youtube.com/watch?v=P9XdZK6ZunE&list=PL9FpF_z-xR_E4rxYMMZx5cOpwaiwCzWUH&index=11