분류 전체보기 (385) 썸네일형 리스트형 React강좌2, 전화번호부 - 2.Detail 보기 기능 1. ContactInfo 컴포넌트에서 phone 번호를 삭제하고, Click 이벤트를 연결합니다. ContactInfo.js import React, { Component } from 'react'; export default class ContactInfo extends React.Component { render() { return ( {this.props.contact.name} // onClick 을 Props로 받음 ); } } 2. Contact 컴포넌트에서 onClick 이벤트에 해당하는 연결함수(handleClick)를 선언하고, 컴포넌트 내부에서 연결해줍니다. handleClick(i) 함수에서는 selectedKey 변수에 몇번째 요소인지(i)를 나타내는 key를 할당합니다. 그리고 .. React강좌2, 전화번호부 - 1.Search기능 App.js import React from 'react'; import './App.css'; import Contact from './Contact'; function App() { return ( ); } export default App; ContactInfo.js import React, { Component } from 'react'; export default class ContactInfo extends React.Component { render() { return ( {this.props.contact.name} // onClick 을 Props로 받음 ); } } Contact.js import React, { Component } from 'react'; import ContactI.. React기초- 9.Delete 마지막으로 Delete 기능을 알아보겠습니다. Delete 기능은 App.js 내부에서만 다루며, 그 중에서도 Control 컴포넌트 안에서만 구현하는 것으로 충분합니다. App.js import React, { Component } from 'react'; import Subject from './components/Subject'; import TOC from './components/TOC'; import ReadContent from './components/ReadContent'; import CreateContent from './components/CreateContent'; import UpdateContent from './components/UpdateContent'; import Co.. 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.. 이전 1 ··· 36 37 38 39 40 41 42 ··· 49 다음
