Programming/React (48) 썸네일형 리스트형 React기초- 8.Update 업데이트하는 방법에 대해 알아보겠습니다. 업데이트는 기존의 contents를 불러와서 보여주는 read 기능과 form의 형태로 다시 입력하는 create 기능이 결합된 기능이라고 할 수 있습니다. 1. UpdateContent.js import React, { Component } from 'react'; class UpdateContent extends Component { constructor(props) { super(props); this.state = { id: this.props.data.id, title: this.props.data.title, desc: this.props.data.desc } this.inputFormHandler = this.inputFormHandler.bind(t.. React기초- 7.Create 이번에는 아이템 추가하는 기능을 구현해보도록 하겠습니다. 1. 신규요소 (Control.js) 추가 각 링크에는 onClick 이벤트 요소를 선언하고 onChangeMode함수와 연결을 해 줍니다. 이때, 모드를 인자로 넘겨줍니다. import React, { Component } from 'react'; class Control extends Component { render() { return ( create update ); } } export default Control; 2. 신규요소(CreateContent.js) 추가 신규 생성시 입력폼을 작성합니다. 폼은 아래 그림의 아래부분과 같이 구성되어 있습니다. 이때 onSubmit 함수로 title 과 desc 값이 전달될 수 있도록 아래와 같이 .. React기초- 6.이벤트 이번 시간에는 클릭 이벤트에 대해 Content가 변경되도록 App을 구성해보겠습니다. 1. 아래 화면에서 WEB을 클릭하면 그 아래 HTML / HTML is HyperText Markup Language 부분이 그에 맞는 내용으로 변경되게 할 것입니다. 우선 WEB 부분에 해당하는 영역에 링크를 달아줍니다. Subject.js import React, { Component } from 'react'; class Subject extends Component { render() { return ( {this.props.title} {this.props.sub} ); } } export default Subject; 페이지 첫 로딩시와 WEB을 클릭하면 웰컴페이지가 나타나도록 하기 위해 state에 'm.. React기초-5.state2 여러개의 list를 state로 선언 후 하위 컴포넌트에 전달하는 방법. App.js import React, { Component } from 'react'; import Subject from './components/Subject'; import TOC from './components/TOC'; import Content from './components/Content'; //import logo from './logo.svg'; 삭제 import './App.css'; class App extends Component { constructor(props) { super(props); this.state = { subject: { title: 'WEB', sub: 'world wide web!' .. React기초-4.state 오늘은 state에 대해서 알아보도록 하겠습니다. Props가 Component를 조작하기 위해 사용자에게 제공하는 속성이라고 하면, state는 외부(상위) 사용자가 모르는 component 내부적으로 사용하는 속성입니다. 아래는 state의 예시입니다. App.js(Old) import React, { Component } from 'react'; import Subject from './components/Subject'; import TOC from './components/TOC'; import Content from './components/Content'; //import logo from './logo.svg'; 삭제 import './App.css'; class App extends Co.. React기초-3.props 오늘은 props에 대해 알아보겠습니다. props는 사용자가 생성한 component의 속성(attribute)를 말합니다. 예를 들어 아래의 코드에서 사용자가 생성한 컴포넌트 내부에 title, sub과 같은 사용자 정의 속성을 부여할 경우 이것들을 props라고 합니다. App.js import React, { Component } from 'react'; import Subject from './components/Subject'; import TOC from './components/TOC'; import Content from './components/Content'; //import logo from './logo.svg'; 삭제 import './App.css'; class App exte.. React기초-2.컴포넌트 제작 컴포넌트 제작으로부터 시작해보겠습니다. 강좌에 의하면 React의 가장 기초적인 기능이 HTML 문서가 장대해질 경우 component를 별도 구성함으로써 코드를 단순화/정리정돈하는 기능이라고 합니다. 이것 만으로도 뭔가 React를 사용하고 있다는 느낌이 드네요. 1. 우선 App.js에서 태그 사이의 내용을 지우고 아래의 내용으로 교체해 넣습니다. logo.svg파일을 임포트 하는 부분도 삭제해 줍니다. import React, { Component } from 'react'; //import logo from './logo.svg'; 삭제 import './App.css'; class App extends Component { render(){ return ( {/*Subjct Component *.. React기초-1.설치 및 환경설정 React로 이런거 한번 만들어보겠습니다. egoing님 강좌 따라하기입니다. 방송으로만 보면 기억에 안남아서 공부할 겸 남겨놓습니다. 기능은 1. 로딩시 또는 WEB을 클릭하면 welcome 화면 띄우기 2. 각 Subject(HTML / CSS / JavaScript)를 클릭하면 그에 따른 내용 변경하기 3. create Subject 4. update Subject 5. delete Subject 입니다. 1. 우선적으로 설치해야할 것은 1. Node 2. Visual Studio Code 3. create-react-app (npm install -g create-react-app : global 설치) 입니다. 2. Visual Studio Code에 필요한 부가기능은 1. reactjs cod.. 이전 1 ··· 3 4 5 6 다음
