React/create 구현 3

onSubmit 이벤트 (이벤트함수 생성, 디버깅으로 값 확인, 인자넣어주기, 매개변수넣어주고 출력 확인하기)

1. 이벤트 함수 생성 else if에 선언한 가 어떻게 동작할지 onSubmit이벤트로 처리해줍니다. _title, _desc 값으로 컨텐츠값을 더해주도록 만들어줍니다. 2. 디버깅으로 값 확인 onSubmit 함수에서 App.js에 있는 내용이 실행되도록 합니다. 3. 일단 debugger을 입력해줘서 e에 있는 이벤트객체를 잘 찾아줍니다. value값이 잘 들어갔는지 확인하기 위해서 e.target.title.value를 입력해줍니다. 다행이 "react"로 잘 들어왔네요. 이것으로 CreateContent.js파일에 이벤트처리에 인자 값을 무엇을 넣어줄지 정해지게 됩니다. 3. 인자 넣어주기 onSubmit이벤트에 인자로 e.target.title.value 와 e.target.desc.value..

React/create 구현 2021.02.09

mode 전환 기능

우선 create 모드가 될때 나타나게될 코드를 정리하기위해 따로 CreateContent.js파일을 만듭니다. form태그에 action="/create_process"의 뜻은 옮겨지는 페이지를 "/create_process"라고 정하는 것이고 method="post"방식으로 해야지 내부정보를 볼 수 없습니다. onSubmit={fuction()}은 submit이 실행될때 꼭 지나야하는 함수입니다. 이것은 react기능이 아닌 기본적으로 가지고 있는 기능입니다. 본인이 만들 형태는 submit이 될때 새로운창에서 작동되지 않게 만들기 위해서 e.preventDefault()를 넣어줍니다. placeholder는 입력하기전에 무슨 텍스트가 화면에 나오게할지 정하는 겁니다. mode가 read일 경우와 c..

React/create 구현 2021.02.09

mode 변경 기능 (컴포넌트 추가, onChangeMode 이벤트 추가(핸들러))

create, update는 a태그로 만들어지는것이 좋습니다. (새로운 창에서 데이터를 입력하고 조회하게 되므로.) 하지만, delete같은 경우, 새로운 창으로 연결되는 a태그로 만들지 않고 input button태그로 만드는것이 좋습니다. 1. Control이라는 컴포넌트로 만들어서 외부로 빼버릴겁니다. 그리고 그 컴포넌트를 App.js에 import한 후에 아까전에 위치한 자리에 컴포넌트를 추가해줍니다. 2. onChangeMode 이벤트(핸들러)를 Control컴포넌트에 정의해줍니다. Control.js파일에서 onClick이벤트를 만들어 줄때, 이것이 create, update, delete라는것을 알려주어야 합니다. 이 onClick이벤트를 만든 함수를 받기 위해서 Control컴포넌트에 on..

React/create 구현 2021.02.08