[movie_app_3] 컴포넌트 Lifecycle과 state

• 컴포넌트 lifecycle 이란? 

컴포넌트는 여러 기능을 순차대로 실행한다.

render cycle : 컴포넌트가 존재할 때 동작

componentWillMount() //사이클이 시작

render()

componentDidMount() //데이터 작업

update cycle

componentWillReceiveProps() //컴포넌트가 새로운 props를 받음

shouldComponentUpdate() //이전 props과 새 props가 다르면 true

componentWillUpdate() //spinner를 보여주는 등의 작업

render()

componentDidUpdate() //렌더가 되었으니, spinner를 숨기는 작업을 하면 좋을듯

• state

컴포넌트 안의 state가 변경 될 떄마다 render가 발생한다.

직접적으로 state를 변경하지 말라.

this.setState를 사용해서 변경

state = {

greeting: "Hello"

}

state를 초기화하고 

render() 안에 

{this.state.greeting}

이 존재함

componentDidMount(){

setTimeOut(() => {

this.setState({

greeting: "Hello again!"

})

}, 5000) //5초

}

state가 변경되고, state가 변경되었으니 5초 뒤에 다시 render()를 렌더하여 Hello 가 Hello again! 으로 변경된다

state 전체를 변경하지 않고 추가하려면?

this.setState({

movies: [

...this.state.movies,

{

title: "movie title",

poster: "link"

}

]

})

이 방법으로 infinite scroll을 구현할 수 있음.

---

노마드코더 https://academy.nomadcoders.co/  의 [실전]ReactJS로 웹 서비스 만들기를 수강하며 정리한 내용입니다.