🍳데이터(배열)
🎨임폴트 추가
🎈추가
🎨Contact.js
🎁1)데이터 추가할때 사용하는 구문
- $push를 이용해서 newObj,newObj2 두개를 한 개의 객체를 추가해도 배열형태로 감싸줘야 된다.
🎨함수연결(추가, 수정, 삭제) - 이벤트 연결구문 추가 작성
🎨ContactCreate.js
🎁화면디자인 및 코딩
- JSX문법(JavaScript Expression)->내부적으로 js로 변환=>한꺼번에 묶어서 메모리에 로드
- Webpack(js을 모두 묶어서 메모리에 로드->실행),바벨(babel)->es6을 지원해주기위해 필요(라이브러리)
- Contact.js에서 추가,수정,삭제시킬 함수를 작성하면 ContactCreate.js에서 이 함수를 호출
- 추가할 데이터가 존재하여 작업 생성자에 추가한다.
- render()
- 중간 확인
✨부트스트랩 적용
- 주석처리
- 디자인 변경
🎨Contact.js
- 부모에서 불러오기
🎨ContactCreate.js
- 부트스트랩 때문에 팅겨나간다.
- form태그를 삭제하니 잘된다.
- 결과확인
- 부트스트랩을 사용할때 Form태그를 지우지 않으면 데이터가 추가됐다가 사라지는 현상이 발생하기때문에 Form태그는 제거해야한다.
- ctrl+F5하면 데이터는 사라짐
🎈삭제
🎨Contact.js
🎁2)데이터를 삭제시키는 방법
- 1.시작하는 인덱스 2.몇 개나 삭제할지
- list배열이 현재 선택된 index부터 시작해서 1개의 데이터를 제거한다는 의미이다.
- 배열을 지니고 있는 배열을 감싸준다.
🎨ContactDetail
- 랜더링에 삭제버튼 추가
🎨Contact.js
- 불러오기
🎨ContactDetail
- 버튼에 연결
- 참고 : 만약에 안될시 에러메세지를 띄우게 할 수 있는 구문이다.
- 메모리에서만 삭제
- 선택된 것을 삭제하지만 선택되지 않은 것(맨 아래)도 삭제가 되고 있다.
🎨Contact.js
- 선택을 하지 않은 경우에는 삭제하지 말라는 구문이다.
- 결과 확인
: 선택하지 않는다면 삭제가 안된다.
🎈수정
🎨Contact.js
🎁3)데이터를 수정하는 방법
- 객체라면 index가 아닌 그 객체의 키가 들어간다.
- field1, field2를 변경하는 코드
- ex)
- 이름 => $set:"수정할데이터"
- 전번=> $set:"수정할데이터"
- 주소=> $set:"수정할데이터"
- field2도 키가 들어가면 그 부분의 특정부분만 변경이 가능하게 된다.
🎨ContactDetail
- 랜더링에 수정버튼 추가
- 버튼 수정
- handleToggle
- 랜더링 추가
- true면 확인버튼 false면 수정
- 중간 확인(클릭시 왔다갔다)
- 세분화 하기
- ContactCreate.js에서 복사해서 가져와서 수정했다.
- input 태그만 확인시 추가된 것을 볼 수 있다.
- 이벤트 연결
- handleChange 추가(ContactCreate에서 복사해온다.)
- 중간 확인
- input 박스에 커서가 들어가는 모습
- 아직 수정은 X
- handleToggle() 수정
- 부모에게 값을 불러와서 input태그에 가져오는 것까지
- 아직 수정은 X
🎨Contact.js
- 마무리(수정하기) - 부모의 함수 전달
🎨ContactDetail
- handleEdit() 추가
- 최종 결과 확인
🍳엑스트라 기능
- 버튼클릭 -> 데이터 추가 -> 입력다 하고나서 enter키를 누른경우 -> 동일한 기능을 부여
- 전화번호부 미니 프로젝트=>DB연동(오라클 or MySQL (X)) =>로컬 스트러지 사용(html5 특성)=>DB연동
- 라우터=>요청을 받아서 어떻게 처리하는가?(ppt로 정리 참고)
- 클라이언트의 정보를 저장하는 역할을 하는 것에는 크게 스토리지와 쿠키(jsp)가 있다.
🎈ContactCreate.js에서 부여
keydown : 타이핑하기위해서 키를 눌렀을때 발생
keypress : 어떤 특정키를 눌렀을때 발생(특수한 키를)=>Ctrl,Alt,Enter,,,
keyup : 누른키를 손을 놓을때 발생 =>실시간 검색을 할때 사용
onKeyPress
handleKeyPress()
- event -> ex)이벤트발생 컴포넌트 정보, 마우스 좌표
- 엔터 char code값은 13번이다.
- 엔터 -> handleClick()
- 결과 확인(엔터)
🎁특정 input 박스에 커서 들어가게 하기(ref 적용)
🎨ContactCreate.js
- 외부에서 접근할 수 있게 레퍼런스(ref)를 참조시킨다.
- ref는 현재input박스의 위치라고 이해하면된다.
- handleClick() 추가
- 자동으로 커서가 들어간다는 구문
- ref가 지정되면 focus()사용이 가능하다.
- 결과
- 추가 후 자동으로 focus가 지정된 것을 확인할 수 있다.
