본문 바로가기

Web

 (104)
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
[Ionic] 프로젝트 폴더구조 src 폴더프로그래밍 작업 폴더페이지를 만드는 컴포넌트나 서비스, 파이프 등의 코드 등 app 폴더 - 앱을 어떻게 시작하고 초기화면을 어떻게 표시하는지 그리고 앱의 전반적인 정보를 보관assets 폴더 - 앱에서 사용되는 이미지나 폰트와 같은 정보를 담는 폴더pages 폴더 - 앱에서 표시하는 페이지들을 저장하는 곳. 일반적으로 pages 내에서 많은 소스 코드를 작성하게 된다theme 폴더 - scss 소스 코딩을 하는 곳. scss파일을 꼭 theme폴더에 넣을 필요는 없음. pages폴더의 각 페이지 폴더 아래에 임의로 scss 파일을 만들어 넣으면 자동으로 사용된다index.html - 웹 브라우저에서 처음으로 보여질 웹 페이지 www 폴더ionic serve와 같이 앱을 실행하면 src 폴더의..
[Ionic] 디자인 컴포넌트와 변수의 연결 – ngModel, ngIf action-sheet.html Action Sheet Page Hello, {{name}} Welcome Show Action Sheet action-sheet.ts import { Component } from '@angular/core'; import { ActionSheetController } from 'ionic-angular'; @Component({ templateUrl: 'action-sheet.html' }) export class ActionSheetPage { name: string = ""; constructor(public actionSheetCtrl: ActionSheetController) { } presentActionSheet() { let actionSheet = thi..
[Ionic] Components Cards app.component.ts this.pages = [ { title: 'Action Sheet', component: ActionSheetPage }, { title: 'Alerts', component: AlertsPage }, { title: 'Buttons', component: ButtonsPage }, { title: 'Cards', component: CardsPage} ]; app.module.ts import { NgModule, ErrorHandler } from '@angular/core'; import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular'; import { MyApp } from './app.compo..
[Ionic] Components Buttons buttons.html Buttons Like Comment Inner Button Outline Left Icon Button Left Icon buttons.ts import { Component } from '@angular/core'; @Component({ templateUrl: 'buttons.html' }) export class ButtonsPage { constructor() { } }

티스토리툴바