react의 원리

index.js에서 한개의 component(App)을 렌더링 해준다. 

그 다큐먼트 안에는 엘리먼트가 있는데, element ID는 root이다. index.html 안에 있다. 

 

App 내부에는 여러개의 요소들이 있다. 

 

reactDOM은 브라우저로 렌더링을, react native는 앱으로 렌더링을 해준다. 

 

css의 class 대신, 'className'을 쓴다. 

 

public/index.html이 생성된 파일이다. 

 

[props]

{this.pr ops.title}을 쓰면 된다. 

JSX를 쓰기 위해서는 {}브라켓을 쓰기 때문이다. 

 

App.js에서는

const movieTitles = ["a", "b"]

const movieImages = ["aa", "bb"]

 

<Movie title={movieTitles[0]} poster = {movieImages[0]} />

<Movie title={moviesTitles[1]} poster = {movieImages[1]} />

 

과 같은식으로 쓰고, 

 

Movie.js 에서는 

<MoviePoster poster= {this.props.poster} />

<h1> {this.props.title} </h1> 과 같이 써준다. 

 

MoviewPoster에는

<img src= {this.props.poster} />

 

[map쓰기]

 

movies.map(movie => {

  return <Movie title={movie.title} poster={movie.poster}>

})

 

 

Movie 안에는...

 

static propTypes = {

title: PropTypes.string,isRequired

poster: React.propTypes.string

}

 

 

안되면 yarn add prop-types

import PropTypes from 'prop-types'

 

필수로 쓰고싶다면 isRequired 추가해주기.

 

 

 

컴포넌트 라이프사이클

 

render할때

1. componentWillMount()

2. render()

3. componnetDidMount()

 

자동으로 콜 된다(viewWillAppear처럼!)

 

update의 경우

1. componentWillReceiveProps()

2. shouldComponentUpdate()

3. componentWillUpdate()

4. render()

5. componentDidUpdate()

 

'로딩중'같은걸 구현하고 싶을 때!

 

 

 

state

디폴트: state 바뀔 때 마다, render 발생한다. 

state는 직접적으로 바꿔주면 안된다. 

 

state = {

greeting: 'Hello'

}

 

componentDidMount(){

setTimeout(()=>{

this.setState({

gretting: 'Hello again!'

})

}, 5000)

}

 

 

-> 이렇게 하면 새로고침 안해도 화면에 있는 값이 바뀐다!!!

기억할것 : setState() 하면 render()가 돈다. 

 

this.state.movies와 같이 접근하면 된다. 

 

this.setState({

movies: [...movies, {새로운 값}]

})

...을 통해 지난 변수에 접근할 수 있다. 

 

 

loading states

데이터 없이 컴포넌트가 로딩을 하고, 데이터를 위해 API를 부르고 나서 컴포넌트 state를 업데이트 하는 방식. 

 

근데 데이터가 없으면 터지니까, 

 

 

_를 쓰는건 기본 리액트 함수들과 구별하기 위해서!!

 

내가 만든 함수에는 _를 써주도록 하자. 

 

this.state.movies가 있으면, _renderMovies 해주고, 없으면 로딩창을 띄워준다. 

 

원래대로라면 API콜이겠지만, 테스트를 위해서 setTimeout()을 이용했다.