본문 바로가기
반응형

전체 글374

React강좌2, 전화번호부 - 5.Update 기능 Update기능은 좀 어렵습니다. 구현해야 할 내용으로는 ContactDetails 컴포넌트에서 1. Edit 버튼을 만듭니다. 이 버튼은 Edit모드와 비 Edit모드사이를 토글할 수 있도록 합니다. 2. 토글 함수를 선언해줍니다. isEdit 값이 false이면 Edit 폼에 name과 phone이 변경 가능하도록 데이터를 보여주며, true이면(수정 완료버튼 클릭) name과 phone 값을 상위요소인 Contact 컴포넌트로 전달해줍니다. 전달함수는 별도로 3번에서 만듭니다. 3. handleEdit 함수를 선언합니다. 이 함수에서 isEdit가 true일 때 name과 phone 을 Contact 컴포넌트로 전달해줍니다. 4. Edit 폼을 만들어줍니다. 그리고 isEdit 값에 따라 표시되는 .. 2020. 8. 3.
React강좌2, 전화번호부 - 4.Delete 기능 삭제는 1. ContactDetails컴포넌트에서 삭제버튼을 추가하고 onRemove(props) 이벤트를 추가하는 것과 2. Contact 컴포넌트에서 handleRemove 함수를 선언하고 onRemove이벤트에 연결하는 것 이 필요합니다. ContactDetails.js import React, { Component } from 'react'; class ContactDetails extends Component { render() { const details = ( {this.props.contact.name} {this.props.contact.phone} ); const blank = (Not Selected) return ( Details {this.props.isSelected ? deta.. 2020. 8. 3.
React강좌2, 전화번호부 - 3.Create 기능 Create 기능구현은 두 부분으로 나누어 생각할 수 있습니다. 1. ContactCreate 컴포넌트(신규)에서 신규 데이터 생성 기능, 과 2. Contact 컴포넌트에서 전달받은 data를 기존 state(배열)에 추가하는 기능 입니다. ContactCreate.js import React from 'react'; export default class ContactCreate extends React.Component { constructor(props) { super(props); this.state = { name: '', phone: '' }; this.handleChange = this.handleChange.bind(this); this.handleClick = this.handleClic.. 2020. 8. 3.
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를 할당합니다. 그리고 .. 2020. 8. 1.
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.. 2020. 8. 1.
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.. 2020. 7. 29.
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.. 2020. 7. 29.
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 값이 전달될 수 있도록 아래와 같이 .. 2020. 7. 29.
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.. 2020. 7. 28.
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!' .. 2020. 7. 27.
반응형

티스토리툴바