React Life Cycle API

React Life Cycle API
컴포넌트가 브라우저에서 나타날때, 사라질때, 업데이트될때 호출되는 API

 

<Mount --- component 가 브라우저에 나타나기 전, 후 호출되는 API>

1. contructor
   -> 컴포넌트 생성자 함수
   
   
2. componentDidMount
   -> 컴포넌트가 화면에 나타났을 때 호출
   -> DOM 을 사용해야하는 외부 라이브러리 연동
   -> 해당 컴포넌트에서 필요한 데이터를 요청 (Ajax 요청)
   -> DOM 의 속성 읽기, 변경작업 (스크롤 설정, 크기읽어오기..)

<Props Update --- component 업데이트 시, 호출되는 API - props의 변화, state의 변화>

1. componentWillReceiveProps (= UNSAFE_componentWillRecieveProps())
   -> 컴포넌트가 새로운 props 를 받았을 때 호출
   -> state가 props에 따라 변해야하는 로직 작성
   -> 새로받을 props: nextProps -> 업데이트 전 props: this.props
   
   
2. static getDerivedStateFromProps()
   -> props로 받아온 값을 state로 동기화해야할 때 사용
   -> setState가 아닌, 설정하고 싶은 state값을 return하는 형태로 사용 (return null; // 업데이트 할 것이 없다.)
   
   
3. shouldComponentUpdate
   -> 현재 state 또는 props의 변화가 컴포넌트의 출력 결과에 영향을 미치는지 여부를 알 수 있음.