States 예제

states 세팅하는 방법

1. setState()

2. Loading State (비동기)

3. Smart Component(prop과 state가 같이있는) VS Dumb Component(Functional Component) (prop만 있는, render만 하면되는)

함수형은 외부의 변수를 가져와서 사용하면안됨

class App extends Component {

state = {

greeting: 'Good Morning'

}

componentWillMount() {

console.log('componentWillMount() called');

}

componentDidMount() {

console.log('componentDidMount() called');

setTimeout( () => {

//this.state.greeting = 'Good Afternoon' // 여기서 this는 함수자체 () => 를 사용하면 state의 this를 정확히 가르킴

this.setState( { // 위와 같은 방식은 외부변수를 접근하기때문에 함수형에 맞지않음

greeting: 'Good Afternoon'

})

}, 5000);

}

render() {

return (

<div className='App'>

<h1>{this.state.greeting}</h1>

{

movies.map((movie, index) =>

<Movie title={movie.title} poster={movie.poster} key={index} />

)

}

</div>

);

}

}

state는 component안에 생성해야한다

componentDidMount() {

console.log('componentDidMount() called');

setTimeout( () => {

//this.state.greeting = 'Good Afternoon' // 여기서 this는 함수자체 () => 를 사용하면 state의 this를 정확히 가르킴

this.setState( { // 위와 같은 방식은 외부변수를 접근하기때문에 함수형에 맞지않음

greeting: 'Good Afternoon',

// movies: this.state.movies.concat( [{

// title: '덤보',

// poster: 'http://imgnews.naver.net/image/213/2019/01/05/0001080352_001_20190105145320650.jpg'

// }])

movies: [...this.state.movies, { // 앞에 movies 배열을 그대로 가져오고 밑에 이 새로운배열을 붙인다

title: '덤보',

poster: 'http://imgnews.naver.net/image/213/2019/01/05/0001080352_001_20190105145320650.jpg'

}]

});

// movies: [{

// title: '덤보',

// poster: 'http://imgnews.naver.net/image/213/2019/01/05/0001080352_001_20190105145320650.jpg'

// }, ...this.state.movies] // 덤보가 앞에 붙여짐

// });

}, 5000);

}

_render() {

//const movies = [<Movie />, <Movie />, <Movie />]; 아래의 작업이 이거와 같다

const movies = this.state.movies.map((movie, index) => { // moview가 null이라서 읽을수가없다

return <Movie title={movie.title} poster={movie.poster} key={index} />

});

return movies;

}

render() {

return (

<div className='App'>

{

(this.state.movies == null) ? <h5>loading..</h5> : this._render()

}

</div>

);

}

ajax로 받아오는 경우 처음에 null일수 있기때문에 에러가 발생

null 체크를하여 에러를 방지