반환된 값에 id 값 추가 (feat useMemo)

반환된 값을 수정하기

가끔 백엔드에서 응답을 받고 나면 id 가 없이 들어오는 경우들이 있다. 보통의 경우는 대부분 배열일 것이기에 그냥 대충 배열의 인덱스를 사용해도 되지만 그렇지 않은 경우들이 있다. 나의 경우는 주로 리액트를 갖고 작업을 하니 이 상황에 맞게 id 항목을 추가해보고자 한다.

// 상위 코드는 생략
const { data: apiRes } = useQuery({...});

const addIdMemo = useMemo(() => {
  const addId = apiRes.map((item, idx) => return {
    ...item,
    id: idx
  }) || []
}, [apiRes])

 

이렇게 작성하면 응답값에 원하는 항목들을 꽂아넣을 수 있다. 보통 배열에 객체라는 전제 하에서 진행한 것이고 자바스크립트의 기본 기능인 객체구조분해할당을 사용했다. 이게 막상 닥치면 좀 어려울 수 있는데 기본을 잘 갖추고 있다면 그렇게 어려운 것도 아니다. 고니는 10년이 넘은 경력을 갖고 있는 개발자인데 사실 이런 기본들이 좀 어렵기는 하다. 

 

위의 케이스는 tanstack table 을 사용해서 테이블을 만드는데 발생했고 tanstack table은 id 가 필수인데 응답에 id 를 주지 않아서 발생한 케이스이다. 뭐 물론 백엔드 개발자에게 id 를 추가해달라고도 할 수 있지만 그게 모양이 좀 빠질 수도 있고 그리고 그렇게 못해주는 상황에서 유용하게 사용할 수 있다. 그래서 useQuery 와 useMemo 를 사용한 코드 예시를 들게 되었다. 

객체구조분해할당

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

구조 분해 할당 - JavaScript | MDN

기본 중에 기본이라고 할 수 있는 MDN의 설명을 보면 좀 너무 자세하지만서도 어렵게 되어 있다. 

https://ko.javascript.info/destructuring-assignment

구조 분해 할당

이걸 봐도 괜찮고 있는 내용을 다 마스터하면 제일 좋겠지만 그렇지 않아도 기본 개념만 익히고 사용하고 그때그때 학습해서 사용해도 괜찮다고 본다.