다양한 메서드가 컴포넌트 생명주기 동안 실행되는데 이런 메서드를 생명주기 메서드라고 한다고 한다.
먼저 리액트의 생명주기는
예시를 몇 개 보면,
getDerivedStateFromProps 메서드는 static 클래스 메서드로 컴포넌트가 생성될 때와 컴포넌트가 새 props를 전달받을 때 모두 호출된다고 한다. 그리고 새로운 props와 가장 최근의 state를 인수로 받아 하나의 객체를 반환하고, 객체의 데이터는 컴포넌트의 상태로 갱신됨. 예를 보면
export default class MyComponent extends Component{
state={
userLoggedIn: false,
}
static GetDerivedStateFromProps(nextProps, nextState){
if(nextProps.user.authenticated){
return{
userLoggedIn:true
}
}
return null
}
render(){
return(
<View></View>
);
}
}
componentDidMount 메서드는 컴포넌트가 로딩되고 바로 한 번만 호출된다고 함. 보통 Ajax 호출로 가져온 데이터를 처리하거나, 지정된 실행 후에 실행되는 setTimeout을 처리하거나, 다른 자바스크립트 프레임워크와 통합할 때 적절한 위치라고 한다.
class TestComponent extends Component{
constructor(){
super()
this.state={loading:true, data:{}}
}
componentDidMount(){
setTimeout(()=>{
this.setState({
loading:false
})
},2000)
}
}
render(){
<View></View>
}
shouldComponentUpdate 메서드는 Boolean을 리턴하고 개발자에게 컴포넌트 랜더링을 할 것인지 결정할 수 있다고 한다. 새로운 state나 props가 컴포넌트나 자식 컴포넌트의 랜더링이 필요하지 않다고 판단되면 false를 반환하고, 컴포넌트를 다시 랜더링 하고 싶다면 true를 반환한다.
class Test01Component extends Component{
shouldComponentUpdate(nextProps, nextState){
if(nextProps.name !== this.props.name){
return true
}
return false
}
render(){
return <View></View>
}
}
componentDidUpdate 메서드는 컴포넌트가 갱신되면서 재랜더링된 후에 바로 호출된다고 한다. 그리고 이전 state와 이전 props를 인수로 갖는다.
class Test02Component extends Component{
componentDidUpdate(preProps, prevState){
if(prevState.showToggled === this.state.showToggled){
this.setState({
showToggled: !showToggled
})
}
}
render(){
return <View></View>
}
}
이런 생명주기 메서드는 다양한 곳에 쓸 수 있으니 기억해두자.
잠시 멈춤 (2) | 2021.03.28 |
---|---|
[ React-Native ] Props ( state와의 차이) (0) | 2021.03.14 |
[ React-Native ] setState를 이용해서 텍스트 변환 & 조건부 변환 (0) | 2021.03.07 |
[ React-Native ] expo를 이용한 프로젝트 생성 (0) | 2021.02.16 |