CRUD5 React(19) Delete 구현 대망의 React 마지막 포스팅!!! (동영상강의 : 생활코딩 opentutorials.org/module/4058) 최종목표 delete의 구현은 CRUD중 가장 쉽다. CRU했던 부분에 숫가락 얹기(?) 하지만 데이터가 삭제되는 것인만큼 삭제전 사용자의 confirm을 꼭 받는게 아주 중요하다. Control.js 사용자가 delete를 누르면 태그 안에 onChangeMode()라는 Props를 호출함. 이때 인자로 delete를 받음. App.js로 넘어가자 **전체코드보기(복사용 첨부 / 더보기클릭) 더보기 import React, { Component } from 'react'; class Control extends Component { render() { return( create upda.. 2021. 1. 12. React(18) Update 구현 Update는 Create + Read 기능이 더해져있다. 최종 목표 업데이트 기능 구현하기 - Create의 폼에 입력받은 기존 컨텐츠의 내용을 수정한다. App.js 1. 렌더함수 return에 자리를 만든다. 1-1. 추후에 이 자리를 대신하여 {this.getContent()} 함수가 들어간다. 만들고 보니 너무 복잡하다. 흠... 함수를 좀 나누어 정리해야지 2. getContent()라는 함수를 만들어 깔끔하게 CRUD자리를 치워놓자. 3. render()함수의 내용 (if문이 있는 로직부분) 그대로 가져오기 + 리턴은 _article 값 넣어주기 (1-1로 돌아가시오) 4. else if문 (모드===update) 일 때 ver. 추가하기 - _content 변수를 getReadContent.. 2021. 1. 12. React(15) Create 구현 : onSubmit이벤트 & contents변경 최종 목표 create 기능 구현하기 create 링크 클릭시 화면하단에 create 섹션과 입력폼이 생긴다. 내용 입력 후 submit 버튼을 누르면 화면에 입력한 내용이 담긴 링크(원소)가 추가되는 이벤트가 발생한다. create에 내용을 입력 후 submit 버튼을 누르면 해당링크가 생성되고 링크를 누르면 내용이 출력됨 자 최종목표 도달을 위해 한단계씩 시작해보자 1. CRUD버튼 클릭시 모드가 변경 2. Create버튼 클릭시 모드가 변경되며 입력창이 생성 3. Create버튼 클릭시 모드가 변경되며 입력창이 생성되며 입력한 내용이 담긴 링크를 화면에 추가 2. create 구현 : onSubmit 이벤트 → 컨텐츠 리스트의 맨 끝에 서밋한 데이터를 추가하기 App.js - this.max_con.. 2021. 1. 7. React(14) Create 구현 : 모드 전환 & form 생성 최종 목표 create 기능 구현하기 create 링크 클릭시 화면하단에 create 섹션과 입력폼이 생긴다. 내용 입력 후 submit 버튼을 누르면 화면에 입력한 내용이 담긴 링크(원소)가 추가되는 이벤트가 발생한다. 자 최종목표 도달을 위해 한단계씩 시작해보자 1. CRUD버튼 클릭시 모드가 변경 2. Create버튼 클릭시 모드가 변경되며 입력창이 생성 3. Create버튼 클릭시 모드가 변경되며 입력창이 생성되며 입력한 내용이 담긴 링크를 화면에 추가 2. create 구현 : 모드 전환 & form 생성 create 버튼을 눌렀을 때 이 생성되며 내용이 출력된다. App.js - render( )안에 if문에 따라 각 모드에서 실행될 _article = 태그 내용을 각각 넣어주기 - retur.. 2021. 1. 6. React(13) Create구현 : 모드 변경 "상위 컴포넌트가 → 하위로 값을 전달할때 props로 전달하고 하위가 → 상위로 명령을 전달할때는 event로 전달한다." 최종 목표 create 기능 구현하기 create 링크 클릭시 화면하단에 create 섹션과 입력폼이 생긴다. 내용 입력 후 submit 버튼을 누르면 화면에 입력한 내용이 담긴 링크(원소)가 추가되는 이벤트가 발생한다. 자 최종목표 도달을 위해 한단계씩 시작해보자 1. CRUD버튼 클릭시 모드가 변경 2. Create버튼 클릭시 모드가 변경되며 입력창이 생성 3. Create버튼 클릭시 모드가 변경되며 입력창이 생성되며 입력한 내용이 담긴 링크를 화면에 추가 1. create구현 : 클릭시 mode라는 state값이 달라짐 App.js 1. 이라는 사용자 정의 태그를 만든다. 2.. 2021. 1. 6. 이전 1 다음 반응형
