Programming/React48 React강좌3 - Redux 1. Redux 설치 및 기본 컴포넌트 작성 1. Redux 설치 npm install --save redux react-redux 2. 3개의 컴포넌트 작성 (src/components 폴더에 작성) Value.js : 멍청이 Control.js : 멍청이 Counter.js : 똑똑이 (1) Value.js import React, { Component, PropTypes } from 'react'; const defaultProps = { number: -1 }; class Value extends Component { render() { return ( {this.props.number} ); } } Value.defaultProps = defaultProps; export default Value; (2) Control.js import .. 2020. 8. 8. React에서 Highchart 사용하기 기초 예제 오늘은 React에서 Highchart 사용하여 아래와 같은 BAR 차트를 한번 그려보려고 합니다. 1. 설치 우선 create-react-app으로 리액트 환경을 구축하고, Highcharts 와 highcharts-react-official을 설치해 줍니다. create-react-app .// '.' 을 입력하면 현재 폴더에 리액트를 설치합니다. npm install highcharts --save npm install highcharts-react-official --save 2. High.js (Highchart 컴포넌트) 작성 이번 예제에서는 App.js에서 데이터를 props로 전달해주고, Highchart 컴포넌트에서 이를 받아 그래프를 그리도록 구성하겠습니다. 따라서 그래프를 그리는 Hi.. 2020. 8. 8. 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-.. 2020. 8. 4. 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.. 2020. 8. 3. 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. 이전 1 ··· 3 4 5 6 7 8 다음
