GET 호출로 배열 주고받기

GET 호출로 RequestParam으로 배열 값 주고 받기

Client에서 GET호출 및 BackEnd로 배열 값 보내기

• 열심히 작업을 하던 중 FrontEnd에서

  export function getReceiverManageList(authToken: string, role: string, ids: string[]): Promise<ResponseDto<OnsiteServiceGetReceiverManage[]>> {
    return ApiComm.getData<ResponseDto<OnsiteServiceGetReceiverManage[]>>('/getReceiverManage', {role:role, ids: ids},         genHeader(authToken)).then(resp => resp.data);
  }

  이런식으로 작성을 하고 API를 테스트를 하던중... 다음 아래와 같은 400에러가 나왔다..
  

​ 음... 좋아 침착해.. 400이니깐 api를 못찾은거나 아니면 오타났을꺼야...하면서 봤지만 아무것도 없었고, 다시 에러를 보니 내가 원했던 ids = [11,2,34] 이런식으로 보내지 는게 아니라 ids[] = 12 이런식으로 표현이 되어있었다.

• 찾아보니 axious.get으로 배열을 파라미터로 보내게 되면 url?key[]=value1&key[]=value2 이러한 형식으로 나오게 된다고 한다.
  그래서 스프링 controller를 사용하는 경우 이런 경우 @RequestParam("key[]") 와 같은 형태로 지정을 해 주어야 데이터를 정상적으로 받을 수 있다.
  그렇다면 url?key=value1&key=value2 or url?key=[value,value] 이런 표현식으로는 받을 수 없을까 생각을 했다.

• React에서 ArrayToString으로 변환 해주는게 있는거 같았다. 결국 배열값을 String의 한 문자열로 바꿔주는건데 .join([separator]) 형식인데 사용법은 다음과 같다.

  const elements = ['Fire', 'Air', 'Water'];
  
  console.log(elements.join());
  // expected output: "Fire,Air,Water"
  
  console.log(elements.join(''));
  // expected output: "FireAirWater"
  
  console.log(elements.join('-'));
  // expected output: "Fire-Air-Water"
  

수정된 코드

const fixSearchUsers = searchUsers?.join(",")
this.getReceiverManageList('INSTALLER', fixSearchUsers)

• 이런식으로 searchUsers라는 배열을 separator를 ','로 주고 "1,2,3,44,45" 이렇게 문자열을 만들고 Spring에서는 split을 사용해서 배열을 만들었다.

결론

• qs, stringyfy 여러가지 방법이 있었지만 내가 사용했던 방법이 특정 라이브러리를 추가하지않고 간단하게 작성할 수 있어서 사용하였다. 다른 좋은 방법이 있으면 공유 부탁드립니다!

참고자료

GET호출로 배열 보내기 바로가기

Join() 문법알기 바로가기

Join() 말고 다른방법 바로가기

qs로 사용하기 바로가기