front/react19 생활코딩 react (19.4. create 구현 - form) # React-19.4. create 구현 - form 1. CreateContent 컴포넌트에 글작성 폼 추가 1.1 제목, 내용, 버튼 추가 : CreateContent.js - retun 구문에 form 테그 추가 1.2 form 액션 설정 - 서브밋 버튼(제출) 클릭시 메시지창을 띄우며 화면전환이 되지 않도록 작성 : CreateContent.js - form 테그 속성 정의 * 다음 기능 - app.js 컴포넌트의 content 끝에 form 에서 작성한 사용자의 입력정보를 추가 2021. 9. 28. 생활코딩 react (19.3. create 구현 - mode 전환 기능) # React-19.3. create 구현 - mode 전환 기능 1. create 클릭시 Content 영역 변경 1.1 조회시 기본 화면 : 읽기(read) 모드에 해당하는 Content 화면(HTML, CSS, JavaScript..) 표시 > 진행을 위해 Content > ReadContent 로 변경 (초기에 작성한 Article 컴포넌트를 Content로 진행함) : app.js - import 구문 (Article.js에는 정의하지 않은 export 설정) import ReadContent from './components/ReadContent'; : app.js - render() Article 구분 : ReadContent.js - Article.js(Content.js) 파일명 및 컴포.. 2021. 9. 27. 생활코딩 react (19.2. create 구현 - mode 변경 기능) # React-19.2. create 구현 - mode 변경 기능 1. button 영역 추가 : src\App.js - rander의 toc 컴포넌트 다음에 버튼영역 추가 create update 2. 추가한 button 영역을 컴포넌트로 추출 : Control : app.js - import 영역 추가 import Control from './components/Control'; : app.js - rander 영역 추출코드로 변경 : Control.js 추가 import React, { Component } from 'react'; export class Control extends Component { render() { console.log("Control render"); return ( cr.. 2021. 9. 3. 생활코딩 react (19.1. create 구현 - 소개) # React-19.1. create 구현 - 소개 - CRUD 처리 1. 설계 1.1 Toc 목록 상단 에 버튼 컴포넌트 추가 : 생성, 수정, 삭제 1.2 create 버튼 : app의 mode 값을 create로 변경 - read 모드의 Article 의 내용(컴포넌트)을 create 내용(컴포넌트)으로 교체 1.3 create 컴포넌트 : 입력폼 구성 - create 정보 입력 후 저장 시 > app 컴포넌트의 contents state에 새로운 contents 정보 추가(id, 제목, 본문) - toc에 표시될 내용에 추가된 내용 표시 : 생성기능 2. 화면 리뷰(작성된 상태) 2.1 toc 항목 위에 create, update, delete(버튼) 추가 2.2 create 클릭 - mode 값.. 2021. 9. 3. 생활코딩 react (18. 베이스 캠프) # React-18. 베이스 캠프 1. 리뷰 - 실행, 배포, 컴포넌트 작성 2. 개념정리 - 인포그라피 를 이용한 이미지 개념확인 (그림 https://velog.io/@lllen/React-eig7ww7p) 1. Props, State 차이점 * Props : 읽기전용 * State : setState이용하여 수정가능 ** 읽기전용 propse - App에서 Article에 props로 _title 정보를 전달시 Article 컴포넌트에서 전달된 _title을 수정할 수 없다. > react에서 오류발생 : src\App.js - App에서 Article 컴포넌트 선언부에서 props로 _title 전달 : src\components\Article.js - render 응답요소를 구성하기 전 _tit.. 2021. 9. 2. 생활코딩 react (17.3. 컴포넌트 이벤트 만들기) # React-17.3. 컴포넌트 이벤트 만들기 - 17.1 사용자 이벤트를 추가하여 App에서 선언한 이벤트를 Subject에서 호출하면, Article에 Subject의 내용 표시 - 17.2 Toc의 요소를 선택하면 App의 mode 속성을 변경하도록 이벤트 등록 - 17.3 : Toc의 요소를 선택하면 변경된 mode에 맞춰 Article에 표시할 정보 구성 및 Toc 이벤트와 컨텐츠의 클릭 이벤트 사이 정보전달 1. Toc 컨텐츠의 선택을 가정하고, 선택한 컨텐츠의 표시정보 구성 1.1. App에 Toc에서 선택한 요소를 처리하는 속성 추가 : src\App.js - constructor의 state에 속성추가 select_content_id:2, 1.2. 추가한 속성을 기준으로 read에 해당.. 2021. 9. 1. 이전 1 2 3 4 다음 반응형
