react 개발 두번째 이야기 두둥 👀
사실 졸려서 어지럽슴다 하하
정신 체리🍒고 정리 시작 하하하하🍒

Life Cycle

React는 순서대로 자동으로 작동한다.
두가지 life cycle이 있는데 첫번째 Render이고 두번째는 Update이다.

Render

componentWillMount() -> render() -> componentDidMount()

componentWillMount()

: 시작되었음을 알린다.

render()

: 컴포넌트가 리액트 세계에 존재함을 알린다.

componentDidMount()

: 성공적으로 리액트 세계에 컴포넌트가 자리잡게 되었음을 알린다.

예시로 componentWillMount에서 API 작업을 요청하면 그 후로 데이터 관련 처리를 하게 된다.

Update

componentWillReceiveProps() -> shouldComponentUpdate() -> componentWillUpdate() -> render() -> componentDidUpdate()

componentWillReceiveProps()

: 컴포넌트가 새로운 props를 받았을 때

shouldComponentUpdate()

: 이전 props와 새로 업데이트 된 props가 다르면 shouldComponentUpdate() == true 로 바뀌게 된다. 또한 props도 업데이트 된다.

componentWillUpdate()

: 컴포넌트가 업데이트 된다.

render()

componentDidUpdate()

State

state는 리액트 컴포넌트 안에 있는 object이다.
state가 바뀔 때 마다 컴포넌트가 다시 rendering 된다.

Life cycle과 State를 이용해서 Loading 만들기

App 컴포넌트 안에 state를 추가한다.

state={
movies:[
          {
            title:'frozen2',
            poster:'https://i.pinimg.com/originals/95/13/d3/9513d3d862a31ba2a505e2f98e64f346.jpg'
          },
          {
            title:'Soul',
            poster:'https://www.robertfantozzi.com/wp-content/uploads/2020/12/Soul1.jpg'
          },
          {
            title:'insideout',
            poster:'http://ticketimage.interpark.com/Movie/still_image/V15/V1501448p_s01.gif'
          }
        ]
}

그리고 render 함수에서 state의 movie를 하나씩 렌더링한다.

{
	this.state.movies.map((movie,index) =>{
      		return < Movie title={movie.title} poster={movie.poster} key={index} />
      })
}

영화 목록이 성공적으로 렌더링 된다!

state에 저장되어 있지 않고 직접 데이터를 받아와야 한다면 loading이 필요하다.
ex) 컴포넌트 로딩 -> API 호출 -> data 전달 -> state update

비슷한 예시로 컴포넌트가 렌더링되고 실행하는 componentDidMount()를 이용한다.

우선, state를 비워둔다. 그리고 componentDidMount()를 이용해서 2초 뒤에 state에 데이터를 입력한다.
(주의할 점! state는 직접 데이터를 변경할 수 없다. setState()를 이용해서 state의 데이터 값을 변경해야 한다.)

//Wrong
this.state.comment = 'Hello';
// Correct
this.setState({comment: 'Hello'});

state가 아무것도 없는 상태에서 map을 하게 되면 에러가 발생한다. (API 호출 시)

state의 movie를 map하는 함수를 만든다.

state.movie에 값이 있으면 true로 this._renderMovies()가 호출되고 값이 없으면 false로 page에 Loading이라고 뜨게 된다.

흐름을 다시 정리하자면,
state에 값이 없으므로 render()에서 'Loading'이라는 문구를 출력한다.
그리고 componentDidMount()가 실행되고 5초 뒤에 state값이 바뀌고 다시 컴포넌트는 render된다.
_renderMoives()가 실행되고 영화 리스트가 페이지에 출력된다!