반응형
SMALL
3.3 Planning the Movie Component
class App extends React.Component{
state={ //지금의 isLoading 상태는 true
isLoading:true
};
componentDidMount(){ //component가 생성되면 호출 함수
setTimeout(() => {// delay function (6초 후 실행)
this.setState({isLoading : false});
},6000);
}
render(){
const{isLoading}=this.state; //isLoading앞에 this.state 매번 붙일 필요 없어짐
return <div>{isLoading ? "Loading...":"We are ready"}</div>;
// isLoading==true이면 "Loading ..." 출력
// isLoading==false이면 "We are ready" 출력
}
}
반응형
LIST
'Web 강의 > ReactJS로 영화 웹 서비스 만들기' 카테고리의 다른 글
[노마드코더/ReactJS로 영화 웹 서비스 만들기]4.1 Rendering the Movies (0) | 2022.03.18 |
---|---|
[노마드코더/ReactJS로 영화 웹 서비스 만들기] 4.0 Fetching Movies from API (0) | 2022.03.18 |
[노마드코더/ReactJS로 영화 웹 서비스 만들기]3.0 Class Components and State (0) | 2022.03.18 |
[노마드코더/ReactJS로 영화 웹 서비스 만들기]3.2 Component Life Cycle (0) | 2022.03.18 |
[노마드코더/ReactJS로 영화 웹 서비스 만들기] 3.1 All you need to know about State (0) | 2022.03.18 |