FrontEnd/React (41) 썸네일형 리스트형 [React] movie_app//6.Dump Component VS Smart Component import React, { Component } from 'react';import PropTypes from 'prop-types'import './Movie.css'; class Movie extends Component { static propTypes = { title : PropTypes.string.isRequired, poster : PropTypes.string.isRequired } render() { return( {this.props.title} ) }} class MoviePoster extends Component{ static propTypes = { poster : PropTypes.string.isRequired } render(){ return( ) }} export de.. [React] movie_app//5-2.LoadingState 실제적으로 데이터를 가져온다면 이런 식일 것이다. 일단 App에 state라는 객체가 있고 componentDidMount()는setTimeout을 통해 일정 시간후setState를 통해서 state의 속성과 값을 추가할 것이다. _renderMovie는 movies를 만들고 그 값으로 movies의 맵핑한 값을 리턴 받는다. 그리고 그 값 또한 리턴 한다. render()는 App의 state의 movies값에 따라 값이 바뀌는데 기본적으로는 state에는 movies가 없으므로 Loading이 뜨고 setTimeout을 통해서 3초 후에 moives가 생성되면renderMovie를 통해 맵핑한 값을 랜더링한다. [React] movie_app//5-1.State componentDidMount는 render()후에 벌어질 것들에 대한 것이다. 그리고 여기서 state가 변화 할 시에 새로 render하게 된다. state는 그냥 말 그대로 상태라고 봐도 무방할 듯...... componentDidMount()에서 윈도우 객체 메소드인 setTimeout(function(){ }, Time); 를 발생시켰다. (Time후에 function()을 실행시키는 메소드) 그리고 setState 함수를 실행하는데 여기서 setState는 상태의 변화를 적용하고 render재실행 한다는 것이다. 결국 setTimeout함수는 5초후에 greeting을 'Hello again'으로 변화함을 감지하고 적용한 후 새롭게 render한다는 의미이다. [React] movie_app//5.LifeCycle in React 차차 알아보자! [React] movie_app//3. propType 저번 시간까지의 코드를 컴파일하면 다음과 같은 오류가 발생한다. 해석 하자면 어레이의 각각의 자식들은 유니크한 속성 "key"값을 가지고 있어야 한다는 것이다. 이것은 데이터의 primarykey랑 비슷한거 같은데 보통 id나 다음과 같이 값을 준다. return map함수의 파라미터 중 index를 이용하여 자연스레 key를 하나씩 주는 방법이다. 이와 같은 다양한 props의 오류를 확인하기 위해서 prop-types를 이용해 볼 수 있다. 다음과 같이 사용하는데 예를 들자면 정적인 propTypes객체를 이용하는데 title 속성의 PropTypes.string.isRequired는속성타입이 . 문자열이고 . 그것은 필수적인 값이다. 라는 의미이다. 만약 문자열이 아니거나 title값이 없다면 co.. [React] movie_app//3. Lists with map const title = [ '무비1', '무비2', '무비3', '무비4'] const poster = ['https://az720974.vo.msecnd.net/blog/sass.png','https://cdn-images-1.medium.com/max/1200/0*UR0r5pSLQbvP_yUo.png','https://www.atulhost.com/wp-content/uploads/2016/02/ruby-on-rails.jpg','http://mblogthumb4.phinf.naver.net/MjAxODAxMTBfMTM4/MDAxNTE1NTU1ODc5MTk0.42pl6F-FISNE6XbWKxkLfIvCMizTFlxd3Wm1ph-J4S4g.ecTO50jeZk4-KdNJfi5vHRxeFDIn1e0spo.. [React]Movie_app//2. props React의 Component의 중요한 속성 중 하나 props에 대해 알아보자 말 그대로 속성인데 다음과 같이 태그의 속성을 추가하듯이 추가 할 수 있다. const title = [ '무비1', '무비2', '무비3', '무비4'] const poster = ['https://az720974.vo.msecnd.net/blog/sass.png','https://cdn-images-1.medium.com/max/1200/0*UR0r5pSLQbvP_yUo.png','https://www.atulhost.com/wp-content/uploads/2016/02/ruby-on-rails.jpg','http://mblogthumb4.phinf.naver.net/MjAxODAxMTBfMTM4/MDAxNTE1NTU1.. [React]Movie_app//1. 기본 문법 App.jsApp에 담길 HTML들을 작성하는 곳 1. React, {Component} from 'react';- 리액트를 사용하기 위해 쓰는 라이브러리 같은 것 5. class App extends Component{ }-모든 리액트는 컴포넌트로 구성되는데, 그 컴포넌트를 만들기 위해 사용 되는 것 6. render()-화면에 출력시키는 리액트 메소드 7.return()App 컴포넌트를 불러오면 render될 html코드 8. 이전 1 2 3 4 5 6 다음
