리액트에 관해서 프로젝트를 하고 공부를 하면서 get을 통해 서버에서 데이터를 가져오는 작업은 무리없이 잘 실행했었습니다. 근데 이번에 백엔드(Spring)과 협업하여 프로젝트를 진행하는 과정에서 데이터를 서버에 보내야하는 과정이 필요했습니다.
그래서 이번에는 axios.post를 통해 서버에 실제로 데이터를 전달하는 방법에 대해 알아보겠습니다.
POST
- POST : axios.post(url,data [, config])
axios에서 Request Method를 사용하기 위해서는 axios에 . 을 붙히며 소문자로 Req Method를 넣어주면 됩니다.
그리고 해당 메서드의 파라미터에는 API의 주소를 넣습니다.
그리고 POST메서드에서는 일반적으로 데이터를 Message Body에 포함시켜 보냅니다.
예를들어 살펴보기 위해 로그인기능을 보겠습니다. 로그인은 사용자가 입력한 아이디와 password를 서버가 받아서 db에 해당 데이터가 있으면 AccessToken과 RefreshToken을 발급해줍니다. 그러면 사용자는 로그인성공과함께 메인페이지로 이동합니다.
먼저 보내고자하는 api의 RequestBody(클라이언트가 API로 데이터를 보낼때 사용되는 데이터)입니다.
그래서 리액트에서 Body의 형식에 맞게 데이터를 작성하여 아래의 코드처럼 데이터를 보내보겠습니다.
로그인은 성공했습니다.
FormData
위의 로그인은 단순히 두개의 데이터를 보내면 끝이었습니다. 그런데 회원가입, 게시물작성과 같은 여러 형식의 데이터를 DB에 보낼때는 어떻게 해야할까요? 파일을 HTTP통신으로 전송하려면 바로 FormData 객체를 활용해야합니다.
- FormData 객체는 XMLHttpRequest 전송을 위하여 설계된 특수한 객체 형태입니다. FormData객체는 key, value 형식으로 되어 있습니다.
formData.append('key', value);
FormData객체는 데이터를 multipart/form-data 형식으로 전송할 수 있습니다.
아래의 코드에서 처럼 데이터를 append를 이용해 넣어줬습니다.
원래는 각각의 state를 만들어 state에 저장후 onChange나 onClick을 사용해 input에 들어온 데이터를 저장해줘야하는데 임시로 했습니다.
그리고 버튼을 클릭할때 post로 방금만든 formData를 보내줬습니다. 그리고 추가적으로 headers에 토큰을 보내줬습니다.
해당 api는 token을 필요로 하기 때문에 header에 토큰도 같이 보내줬습니다.(토큰은 로그인할때 localStorage로 받아둠)
데이터를 생성하고 Mysql db에서 확인을 해보면 데이터가 잘 저장되어 있는 것을 확인할 수 있습니다.
'프론트엔드 > react' 카테고리의 다른 글
React - navigate로 props전달방법 (0) | 2023.09.09 |
---|---|
React - useEffect에서 axios.get을 이용해 받은 데이터로 요소생성 (0) | 2023.09.09 |
React - window.location.replace() (0) | 2023.09.07 |
React - fetch(), CRUD(POST, DELETE), useRef (1) | 2023.09.04 |
Rest API , 리액트에서 REST API 구축 (1) | 2023.09.04 |