라벨이 Component Life Cycle인 게시물 표시

[React] Component Life Cycle(Life Cycle API)

이미지
https://twitter.com/dan_abramov/status/981712092611989509 리엑트 컴포넌트를 다룰 때 사용할 수 있는 API들이다.  constructor 컴포넌트 생성자 함수이다. 컴포넌트가 만들어질때마다 이 함수가 호출된다. ex) constructor(props){ super(props) } 컴포넌트가 처음 브라우저 상에 나타나게 될 때 만들어지는 과정에서 가장 먼저 실행되는 함수이다. 컴포넌트가 가지고 있을 state의 초기설정을 하거나 컴포넌트가 생성되는 과정에서 미리 해야할 작업을 constructor에서 처리한다. render 컴포넌트에 전달되는 데이터의 변경이 발생하거나 setState를 통한 state의 값이 변경될경우 매번 render메서드가 호출되어 새로운 데이터를 반영하여 화면을 렌더링해준다. getDerivedStateFromProps 전달되는 props의 값이 변경될때 state의 값과 동기화 시켜준다. 부모 컴포넌트에서 전달해주는 props가 변경 됐을 경우 호출되며, render 메서드가 호출되기 이전에 호출된다. getDerivedStateFromProps(nextProps, preState) 메서드는 static 키워드를 붙여서 인스턴스 메서드로 선언해야한다. 첫번째 인자 nextProps는 부모 컴포넌트로부터 전달받은 객체이며 두번째 인자 preState는 렌더링되기 이전의 state 객체이다. 메서드를 선언하고 따로 return 하지 않을 경우 에러가 발생한다. return하는 데이터는 객체여야한다. render메서드가 호출되기 전이므로 변경된 props 데이터를 state에 반영하는 작업을 처리하면 된다. shouldComponentUpdate virtual dom에 리렌더링할지 말지 결정해주는 역할을 한다. 전달되는 값이 변경이 되었는지 안되었는지 확인해서 변경 되었을 경우만 컴포넌트를 다시 렌더링 하도록 하며 값이 변경되지 않았다면 컴포넌트를 다시