Programming/React (48) 썸네일형 리스트형 React강좌2, 전화번호부 - 0.기본 파일 1. App.js import React from 'react'; import Contact from './Contact'; import './App.css'; function App() { return ( ); } export default App; 2. Contact.js import React, { Component } from 'react'; import ContactInfo from './ContactInfo'; class Contact extends Component { constructor(props) { super(props); this.state = { selectedKey: -1, keyword: '', contactData: [{ name: 'Abet', phone: '010-000-.. React강좌2, 전화번호부 - 6.LocalStorage에 저장하기 LocalStorage에 저장하여 update되어도 데이터가 초기상태로 돌아가지 않도록 하는 기능을 구현하겠습니다. componentWillMount API와 componentDidUpdate API만 구현해주면 됩니다. Contact.js import React, { Component } from 'react'; import ContactInfo from './ContactInfo'; import ContactDetails from './ContactDetails'; import ContactCreate from './ContactCreate'; class Contact extends Component { constructor(props) { super(props); this.state = { sele.. 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 값에 따라 표시되는 .. 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.. 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.. 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.. 이전 1 2 3 4 5 6 다음
