① update 구현 //App.js getReadContent(){ var i = 0; while(i < this.state.contents.length){ var data = this.state.contents[i]; if(data.id === this.state.selected_content_id){ return data; break; } i = i + 1; } } //App.js getContent(){ var _title, _desc, _article = null; if(this.state.mode === 'welcome'){ _title = this.state.welcome.title; _desc= this.state.welcome.desc; _article = } else if(this.st..
공부/React
① 베이스 캠프 ⑴ Props vs State - props are read-only vs state changes can be asynchronous - props can not be modified vs state can be modified using this.setState ⑵ 상위컴포넌트에서 하위 컴포넌트로 데이터를 전달하기 위해서는 props를 이용해야 함 ⑶ 하위 컴포넌트에서 상위 컴포넌트로 데이터를 전달하기 위해서는 이벤트를 사용하여 setState 함수를 통해 state값을 변경할 수 있음 ② create 구현 : mode 변경 //App.js //Control.js return ( create update ); ③ create 구현 : mode 전환 기능 //App.js render()..
① 이벤트 state props 그리고 render 함수 //App.js class App extends Component { constructor(props){ super(props); this.state = { mode:'read', subject:{title:'WEB', sub: 'World Wide Web!'}, welcome:{title:'Welcome', desc:'Hello, React!!'}, contents:[ {id:1, title: 'HTML', desc:'HTML is for information'}, {id:2, title: 'CSS', desc:'CSS is for design'}, {id:3, title: 'JavaScript', desc:'JavaScript is for in..
① State 소개 ⑴ props vs state - props : 사용자가 component를 사용하는 입장에서 중요 - state: props의 값에 따라서 내부의 구현에 필요한 데이터 - 사용하는 쪽과 구현하는 쪽을 철저하게 격리시켜서 양쪽의 편의성을 각자 도모하는 것이 중요함 ② State 사용 ⑴ State 사용 //App.js import React, { Component } from 'react'; import './App.css'; class App extends Component { constructor(props){ //초기화 담당 super(props); this.state = { subject:{title:'WEB', sub: 'World Wide Web!'} } } render()..
① 컴포넌트 만들기 ⑴ 컴포넌트 사용하기 //App.js import React, { Component } from 'react'; import './App.css'; class Subject extends Component { render(){ return ( WEB world wide web! ); } } class TOC extends Component { render(){ return ( HTML CSS JavaScript ); } } class Content extends Component { render(){ return ( HTML HTML is HyperText Markup Launguage. ); } } class App extends Component { render(){ return ..
① 공부전략 ⑴ coding - 개발환경 세팅 및 코드 작성 ⑵ run - 작성한 코드 실행 결과 확인 ⑶ deploy - 최종 서비스를 소비자에게 제공 ② 개발 환경의 종류 ⑴ React 공식문서 - https://reactjs.org/docs/getting-started.html ⑵ 온라인 플레이그라운드(Online Playgrounds) - 온라인 상에서 react application 구현 가능 - ex) CodeSandbox ⑶ 웹사이트에 React 추가하기(Add React to a Website) - 웹사이트에 부분적으로 React 기능을 추가할때 사용 ⑷ 새로운 React 앱 만들기(Create a New React App) - 툴체인(JavaScript toolchains): 개발을 위해..
