React - 예제 1번 (저장/조회)

index js - BrowserRouter

 

대충 라우팅 , html을 했다 치고

index.html - bootstart 장착! 은 html 때문에 ;;

 

 

json_Server(open source) 파일

오픈소스 다운 받아 줘야겠죠...

 

db_json(데이터)

객체 배열을 만들어 준다

 

 

 

★ 중요

utils 폴더 - http-common

기본 주소 설정

1) import axios (axios 라이브러리 있어야함)

2) export axios.create() 함수 (객체 보내기) 사용

baseURL : 기본주소

headers : 통신에 사용할 문서 종류 (우리는 json사용)

 

 

★ 중요

services 폴더 - DeptService.js 파일

url 설정

import : http-common

☆ 조회요청 : axios.get(url) 함수

☆ 저장요청 : axios.post(url , 객체) 함수

☆ 사용자 정의 함수를 객체에 담아 보낼수 있음.

 

 

 

pages 폴더 - DeptList.js 파일 (조회)

html 은 생략

 

전체 조회

 

 

선택조회

 

 

 

pages 폴더 - AddDept.js 파일

 

객체 생성 , 초기화 ( 지정값을 받아 Dept에 넣어줌 ) 

 

 

json_db 파일 저장

 

 

 

결과를 확인해보죠?

 

저장

 

전체조회

 

선택조회

 

 

 

 

※ 참조

 

1) path=" * "

(NotFound.js 파일은 따로 html 한것이 없음)

* : 지정되지 않은 모든 url 은 이곳으로 향하도록 설정 

 

 

 

 

2) 인터넷 주소

http://url:포트번호/추가url 중 추가url

 

ⓐ /url?변수=값 (쿼리스트링 방식)

ⓑ       /url/변수값 (파라메터 방식)

으로 값을 넣어 보내기가 가능하다

 

 

 

 

3) 설치 라이브러리 확인

 dependencies - axios 또는 react-router-dom 등

 

 

 

 

4) promise 함수

: 비동기 코딩에서 순서에 따라 실행되게 해주는 객체

 

.then() : promise 객체안의 코딩이 true일때 then 함수가 실행

.catch() : promise 객체안의 코딩이 false 일때 catch 함수가 실행