본문 바로가기

Web/React

 (18)
Async Await - asynchronous function _getMovies = async () => { const movies = await this._callApi() this.setState({ movies } } await으로 하는 것은 _callAPi 기능이 '끝나는 것'을 기다리고(성공여부가 아님) setState는 _callApi 작업이 완료되기 전 까지는 실행되지 않음
AJAX (promise) fetch API 사용 fetch('url') .then(response => response.json()) .then(json => console.log(json)) .catch(err => console.log(err)) fetch('url', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify({ firstParam: 'yourValue', secondParam: 'yourOtherValue', }) }) promise = asynchronous 계속 다른 작업을 스케쥴해놓을 수 있음. 다른 작업이 끝나기를 기다릴 필요 없음 fetch, p..
Smart vs Dumb return 만 필요한 컴포넌트의 경우 class 컴포넌트 대신 functional 컴포넌트를 사용 functional 컴포넌트는 state, render, 라이프사이클이 없음 function MoviePoster({poster}){ return ( ) } class 컴포넌트 = smart component functional 컴포넌트 = dumb component
state 컴포넌트 안에 state가 바뀔 때 마다, render()가 발생
Life Cycle 출처 : http://velopert.com RendercomponentWillMount() -> render() -> componentDidMount() UpdatecomponentWillReceiveProps() -> shouldComponentUpdate() -> componentWillUpdate() -> render() -> componentDidUpdate() componentWillReceiveProps() : 컴포넌트가 새로운 props를 받음shouldComponentUpdate() : old props, 새로운 props를 살펴본 다음에 이전과 새로운 props가 다르면 리액트는 '업데이트 = true' 라고 생각함. 그래서 이전 props가 새로운 props들과 다르면 업데이트가 발생..
Introduction to React MVC 의 View 에 해당하는 UI 라이브러리데이터가 UI를 컨트롤UI가 데이터를 컨트롤하지 않음 create react app (페이스북 제공) : https://github.com/facebookincubator/create-react-appCRA(create react app) 에 웹팩이 포함 (웹팩 : 리액트 코드를 브라우저가 이해할 수 있는 코드로 변경하는 역할) 패키지 매니저 : yarn(선호), npm React = 라이브러리ReactDOM = 라이브러리를 웹사이트에 출력해줌ReactDOM은 1개의 컴포넌트를 출력(render) render > return > JSX
React 기본 작업 환경 - babel 을 통한 ES6 변환- webpack-dev-server 사용- react-hot-loader 를 통한 Hot Module Reload 사용
package.json 설정 { "name": "codelab", "version": "1.0.0", "main": "index.js", "scripts": { "dev-server": "webpack-dev-server" }, "author": "", "license": "ISC", "description": "", "dependencies": { "react": "^15.3.1", "react-dom": "^15.3.1", "react-hot-loader": "^3.0.0-beta.3" }, "devDependencies": { "babel-core": "^6.9.1", "babel-loader": "^6.2.4", "babel-preset-es2015": "^6.9.0", "babel-preset-react": "^6.5.0"..

티스토리툴바