React를 활용한 고객 관리 시스템(4)

세개의 컴포넌트를 하나씩 확인해보자.

첫번째로 Customer(고객) 컴포넌트이다. 

Customer 컴포넌트

Customer 컴포넌트는 간단하다. props로 받은 값들을 화면에 띄워주는 역할만 한다.

테이블에 마지막 Cell에는 다른 컴포넌트가 들어가는데 Customer 컴포넌트가 props로 전달받은 stateRefresh()함수와 id속성을 다시 CustomerDelete 컴포넌트에 props로 전달한다.

삭제를 할 경우 id값만 전달받으면 되고 다시 새로 고객을 표시하기 위해 stateRefresh()가 전달된 것이다. 그렇다면 CustomerDelete 컴포넌트에서는 props를 어떻게 처리하는지 확인해보도록 하자.

 

두번째로 CustomerDelete 컴포넌트이다.

CustomerDelete 컴포넌트

이 컴포넌트 안에는 고객을 삭제하기 위한 deleteCustomer() 함수가 선언되어있고 button에서 onClick 메소드로 이 함수를 사용하고 있다. deleteCustomer()를 살펴보면 id를 인자로 받아 해당 url에 method: 'DELETE'로 보낸다.

DELETE 방식에서는 보낼 데이터가 따로 없기 때문에 headers나 body 옵션은 따로 필요가 없다. 그렇다면 고객 추가하는 과정에서는 어떤 방식으로 POST를 요청하는지 하자. 

 

세번째는 CustomerAdd 컴포넌트이다.

CustomerAdd

고객을 추가하기 위한 이 컴포넌트에서는 axios 패키지를 다운받아 post 메소드를 이용하여 고객 추가 요청(post)을 해결하였다. form 태그를 사용하여 추가하기 버튼을 누르면 handleFormSubmit()함수가 호출되어 입력된 값들이 /api/customers에 post 요청을 보낸다.

과정을 살펴보면 useState를 사용하여 입력되는 값들과 파일의 초기값을 모두 설정하였다.

그 다음 사용자 form 안에 값을 입력하였을때 e.target.value 속성을 이용하여 값을 설정(Set)해주고 addCustomer() 함수에서 forData에 설정한 값들을 넣어 해당 url에 post 요청을 보냈다.  복잡해보이지만 아주 간단한 코드들이다. e.preventDefault는 a태그나 submit태그는 누르게 되면 href나 창이 새로고침 됨을 방지하기 위한 메소드이다. 

 

andleFormSubmit()에서 addCustomer()를 실행시켜주고 다시 초기값처럼 셋팅해준다.