리액트 기초- 7

리액트 기초- 7

(https://academy.nomadcoders.co/courses/enrolled/216871)

(https://www.youtube.com/watch?v=sM2p1EqTlw4&list=PL7jH19IHhOLOFTVD4R8FeZWkwpVi8-9Fv)

노마드 코더 (Nomad Coders) 라는 분의 영상을 보고 배운 것을 정리한것입니다.

---

React Component Lifecycle

컴포넌트의 여러 기능을 순서대로 실행

Render

componentWillMount()

▼

render()

▼

componentDidMount()

Update

componentWillReceiveProps()

▼

shouldComponentUpdate()

                   ▼(true일 경우만)

componentWillUpdate()

▼

render()

▼

componentDidUpdate()

---

state -  컴포넌트의 상태

state가 변경이 되면 render가 호출이 됩니다.

(컴포넌트 라이프사이클의 update와는 별개입니다.)

상단에 const movies = [] 의 내용을

컴포넌트 안에 state에 넣어줍니다.

(그리고 지우세욥)

state 접근 방법 입니다.

this.state.movies

state 수정

this.setState 를 이용하여 state를 수정합니다.

setTimeout()은 함수로 5000(5초) 시간 뒤에 () => {함수}를 실행 합니다.

이걸 실행하고 나면

state가 변경됐으니

render()가 다시 실행됩니다.

맨 처음 실행시 willmount-> render -> Didmount 를 합니다.

Did mount에서 5초 후 state가 변경되면

다시 render가 호출되서 state에 test5가 추가됩니다.

---

Loading states !

(state에 movie가 지금은 없고 5초 뒤(로딩중)에 load 된다면 자료가 없을때는 어떻게 해야될까요?)

state를 비워줍니다.

(load 전)

(5초뒤 movie가 load 될겁니다!)

 

지금 이렇게 실행하면 error를 마주하게됩니다.

state 안에 movies가 없기 때문이죠.

코드를 수정합니다!

render() 함수를 보면

this.state.movies가 존재하는지 부터 확인을 하고

있다면 

renderMovies() 사용자 정의 함수를 호출합니다.

renderMovies 함수의 return 값인

movies 배열의 안에는

<Movie title="타이틀" poster="사진" key="인덱스" />

로 이루어진 값들이 들어있는 겁니다.

아닐 경우 Loading이 보여지게 됩니다.