React와 Lifecycle Method
Lifecycle method는 class component에서 옵션으로 쓸 수 있는 function으로, 특정한 포인트에 특정한 코드를 실행하기 위한 시스템이다.
화면에 (혹은 DOM에) 나타나서 -> re-render가 되고 -> 어느 순간에 화면에서 이 component가 사라지는 일련의 과정들을 Lifecycle이라고 한다.
componentDidMount
- class component가 화면에 render되자마자 바로 딱 한번만 불러진다.
- initial data loading (ex.API request)등을 넣을 수 있다. -> 이건 constructor에서도 할수 있지만, 공식적인 react문서에서는 constructor보다 componentDidMount에서 initial data-loading을 하는 것을 더 추천하고 있다. 기능상의 차이는 없지만, 더 깔끔한 코드정리를 위해서이다.
componentDidUpdate
- setState로 컴포넌트가 업데이트될때마다 이 lifecycle method가 자동으로 불러진다.
- 횟수에 제한없이 우리의 컴포넌트가 업데이트 될때마다 불러진다.
- state/props이 바뀔때마다 필요한 다양한 data-loading을 넣어주면 좋다. (ex. 버튼, input, parent component로부터의 props 등)
componentWillUnmount
- 어느순간에 우리가 component를 스크린에서 그만 보여주고 싶을때 사용한다.
- Clean up을 위해서 사용한다고 생각하면 된다. 이전에는 google map등 non-react stuff 를 위해서 많이 사용되었지만, 리액트가 업데이트 된 이후로는 전보다 많이 사용하지 않는다
이외의 lifecycle method들:
shouldComponentUpdate
getDerivedStateFromProps
getSnapshotBeforeUpdate
가 있지만, 거의 사용되지 않고 특히 초보의 단계에서는 맨 위의 세가지에 집중하는게 좋다
예시 (geo location 이용)
class App extends React.Component {
state = { lat: null, errorMessage: '' };
//이거 constructor 메소드 코드와 같은것임. barbel을 이용한거
componentDidMount() {
window.navigator.geolocation.getCurrentPosition(
position => this.setState({ lat: position.coords.latitude }),
err => this.setState({ errorMessage: err.message })
);
}
render () {
return (
<div className="border red">
{this.renderContent()}
</div>
)
};
};
ReactDom.render(
<App/>, document.querySelector('#root')
);
Author And Source
이 문제에 관하여(React와 Lifecycle Method), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@syjoo/React-Lifecycle저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)