React - 예제 1-2번 (수정/삭제)

DeptList.js

★ 중요

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

데이터의 id 번호로 접속

url:포트번호/dept/data.id

 

 

 

 

App.js

★ 중요

:id  = id 값을 받겠다

 

 

 

 

 

servies 폴더 - DeptService.js 파일

 

1 ) 상세조회 요청

 

★ 중요

axios.get(/url/속성명)

 

 

 

2) 수정 요청

 

★ 중요

axios.put( /url/키값 , 수정될 객체) : 삭제 요청

 

 

 

3) 삭제요청

 

★ 중요

axios.delete(/url/키값) : 삭제 요청

 

 

 

 

 

pages 폴더 - Dept.js 파일

상세 페이지(수정/삭제)

 

 

1)

상세 조회 요청

 

★ 중요

☆ useParams() : 전송된 값 받는 함수 : id값

☆ useNavigate() : 페이지를 강제 이동시키는 함수 : 안해도됨 ㅋ...

임시객체 : intialDept / useParams() / useNavigate()

useEffect()

 

 

 

2)

수정 요청

 

텍스트창에서 값을 받아 임시 객체 dept 초기화

id(키값) / dept(객체 데이터)

+ message 초기화

 

 

 

3)

삭제 요청

 

+ navigate(/url) 함수 실행 해줬음