만들면서 배우는 리액트 튜토리얼 - 4.Component Life Cycle
이번 편은 좀 더 이론적인 내용이다.
다른 사람의 리액트 코드를 조금만 자세히 들여다보면
componentWillMount() {
}
componentDidMount() {
}
같은 함수들을 볼 수 있을 것이다.
이는 리액트가 설계된 방식 중의 하나로 Component Life Cycle이라고 불린다.
어려운 말을 다빼고
리액트의 컴포넌트가 여러 기능을 정해진 순서에 따라 실행된다는 뜻이다.
어떤 것이 어떤 순서로 실행되는지 알아두면 리액트를 더 효과적으로 사용할 수 있다.
1.1. Render
Render: componentWillMount() -> render() -> componentDidMount
- componentWillMount: 컴포넌트가 마운트 될 것이다
(사이클이 시작되었음을 알 수 있음) 일반적으로 이때 API를 불러온다.
- render: 컴포넌트가 리액트에 그려지는 중이다
(컴포넌트가 리액트 세계에 존재하게 되었음을 알 수 있음)
- componentDidMount: 컴포넌트가 마운트 되었다
(컴포넌트가 성공적으로 리액트 세계에 자리잡았음을 알 수 있음)
1.2. Update
Update: componentWillReceiveProps() -> shouldComponentUpdate() -> componentWillUpdate -> render() -> componentDidUpdate()
- componentWillReceiveProps: 컴포넌트가 새로운 props를 받을 것이다
- shouldComponentUpdate: 컴포넌트 업데이트를 해야 하는지 확인하고 true, false 리턴
(old props와 new props를 비교)
- componentWillUpdate: 컴포넌트가 업데이트 될 것이다
일반적으로 이때 로딩중 spinner를 붙인다.
- render: 컴포넌트를 리액트에 다시 존재하게 한다
- componentDidUpdate: 컴포넌트가 성공적으로 업데이트 되었다
일반적으로 이때 로딩중 spinner나 메시지를 숨긴다.
실제로 어떻게 사용되는 다음 장에서 살펴보도록 하자.
1 comments
test
ReplyDelete