Front-end15 React.js state, props관련 this.state.map xxxxxxxxxxthis.state = { data: [ {"name": "A", "pw": "p1"}, {"name": "B", "pw": "p2"} ]}render() { return( {this.state.data.map((person, i) => )} )}........class TableRow extends React.Component { render() { return ( {this.props.data.name} {this.props.data.pw} ) }} this.state.data.map( (person, i) => 리턴내용 )여기서 person은 맵핑할때 각 튜플(더 적합한 용어를 모르겠다)을 나타내고i는 child 컴포넌트에 identity를 부여.. 2019. 1. 4. 훕포메이션 리뉴얼 - 카카오i 프레임워크 : flask DB : ElasticSearch 2018. 12. 4. React - Binary 시계 구현 Binary-시계import React, { Component } from 'react'; import './App.css'; class Clockcmp extends Component { constructor(props){ super(props) this.state = {line: this.Change()} } componentDidMount(){ this.timeID = setInterval( () => this.Change(), 1000 ) } componentWillUnmount(){ clearInterval(this.timeID) } Change = () => { const now = new Date(); const hh = this.z2(now.getHours()) c.. 2018. 10. 9. React - 동적인 시계 컴포넌트 구현 React로 DOM변경하기모던 자바스크립트 개발자를 위한 리액트 프로그래밍으로 공부중인데책에는 React 프로젝트가 아닌, HTML상에서만 다루고 있다.직접 js에 컴포넌트로 구현해보았다. App.jsximport React, { Component } from 'react';import './App.css';class Clockcmp extends Component { constructor(props){ super(props) this.state = {d: new Date()} } componentDidMount() { // Clockcmp 컴포넌트가 불러올때마다 1초씩 this.Change()를 부른다 this.timeID = setInterval( () => this.Change(), 1000 .. 2018. 10. 8. 이전 1 2 3 4 다음 반응형