Api 데이터를 처리하기 위해 제가 가장 좋아하는 JavaScript 배열 방법입니다.

Originally posted on my website on June 14th 2020

Api 데이터에 JavaScript 배열 메서드 사용

이 기사에서는 Api 데이터를 처리하기 위해 JavaScript Array 메서드 중 일부를 사용하는 방법을 공유하고 싶습니다. 이 방법으로 더 많은 작업을 수행할 수 있지만 이것은 내 사용 사례의 일부 예일 뿐입니다. 또한 MDN documentation ..에서 탐색할 수 있는 훨씬 더 많은 배열 메서드가 있습니다.

Array.prototype.filter()

Filter 메서드를 사용하면 아래와 같은 특정 기준에 따라 응답 데이터에서 Api 항목을 쉽게 찾을 수 있습니다.

// MDN Docs: https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

const trekkies = [
  { id: 0, name: "Piccard", planet: "Earth" },
  { id: 1, name: "Spock", planet: "Vulcan" },
  { id: 2, name: "Kirk", planet: "Earth" },
  { id: 3, name: "Worf", planet: "Gault" }
];

const findTrekkiesByPlanet = planet => {
  return trekkies.filter(trekkie => trekkie.planet === planet);
};

console.log(findTrekkiesByPlanet("Earth"));
// [0: Object {id: 0 name: "Piccard" planet: "Earth"}
// 1: Object {id: 2 name: "Kirk" planet: "Earth"}]

이 예제에는 StarTrek 문자가 포함된 기본 Api 응답 배열이 있습니다. 특정 행성에서 모든 캐릭터를 찾기 위해 항목을 원하는 행성의 이름인 단일 매개변수를 제외하고 findTrekkiesByPlanet이라는 새 함수를 만듭니다.

findTrekkiesByPlanet 함수 내에서 trekkies 배열의 필터 메서드를 호출하고 단일 trakkie를 매개변수로 제외하는 콜백 함수를 전달합니다. 이 콜백 함수는 이 트레키가 기준을 충족하면 참 값을 반환하고 그렇지 않으면 거짓을 반환해야 합니다. 따라서 현재 trekkie.planet 값이 findTrekkiesByPlanet 함수에 전달된 planet 값과 같은지 확인합니다.

예제에서 볼 수 있듯이 "Earth"를 행성으로 전달하면 Piccard와 Kirk만 포함하는 새 배열을 얻게 됩니다.

Array.prototype.find()

find 배열 방법을 사용하여 특정 기준에 따라 Api 응답에서 단일 항목을 찾을 수 있습니다.

// MDN Docs: https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Global_Objects/Array/find

const friends = [
  { id: 0, name: "joey", quote: "How you doin?" },
  { id: 1, name: "ross", quote: "We were on a break" },
  { id: 2, name: "phoebe", quote: "She’s your lobster" }
];

const findFriendById = id => {
  return friends.find(friend => friend.id === id);
};

console.log(findFriendById(0)); // Object {id: 0, name: "joey", quote: "How you doin?"}

이 예제에는 내가 가장 좋아하는 시트콤 친구의 문자가 포함된 가짜 Api 응답 배열이 있습니다. id로 단일 문자를 찾기 위해 찾고 있는 문자의 Id 정수를 제외하는 findFriendById라는 새 함수를 만듭니다.

이 새 함수 내에서 friend 배열의 find 메서드를 호출하고 한 번에 한 친구를 제외하는 콜백 함수를 다시 전달합니다. 이 콜백 함수는 우리가 찾고 있는 친구를 만났을 때 참 값을 반환해야 합니다. 따라서 우리는 단순히 현재 친구의 ID를 findFriendById 함수에 전달된 ID와 비교합니다.

예제에서 Joey에 대한 개체를 제공하는 id로 0을 사용하여 findFriendById를 호출합니다.

배열.from()

from array 메서드의 기능은 임의의 데이터에서 새 배열을 만드는 것입니다. 여기서 우리는 Api 응답 데이터를 React 구성 요소에 전달할 수 있는 것으로 준수하는 데 사용할 것입니다.

// MDN Docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from

const apiCategories = [
  { id: 0, title: "javascript", description: "...", other: "..." },
  { id: 1, title: "React", description: "...", other: "..." }
];

const transformApiCategories = () => {
  return Array.from(apiCategories, category => {
    return {label: category.title, value: category.id};
  });
};

console.log(transformApiCategories());
// [0: Object {label: "javascript" value: 0}
// 1: Object {label: "React" value: 1}]

// Example use in a react select component.
return (<SelectControl options={ transformApiCategories() }/>)

이 마지막 예에는 프로그래밍 언어와 이에 대한 정보가 포함된 임의의 Api 데이터가 있습니다. 레이블과 값을 포함하는 객체 배열을 예상하는 선택 요소/구성 요소 내에서 이 데이터를 사용하려고 합니다. Here is an example 구텐베르크 프로젝트에서 이러한 구성 요소.

이를 위해 transformApiCategories라는 함수를 만듭니다. 이 새 함수 내에서 Array.find를 사용하고 각 반복에서 단일 카테고리를 제외하는 콜백 함수와 apiCategories 배열을 전달합니다.

콜백 함수는 올바른 형식으로 필요한 데이터만 포함하는 각 범주에서 새 개체를 반환하므로 from 메서드는 선택 구성 요소에 안전하게 전달할 수 있는 개체 배열을 반환합니다.

결론

보시다시피 이러한 배열 방법은 매우 강력할 수 있으며 설명서를 확인하는 것이 좋습니다. 각 예제 안에는 특정 메서드의 문서 페이지에 대한 링크가 포함된 주석이 있습니다. 그리고 MDN documentation 에서 모든 배열 메서드를 확인할 수 있습니다.

따르다?

새 기사 및 기타 WordPress 개발 관련 리소스에 대해 알려드릴 수 있도록 twitter 또는 여기 Dev.to에 연결하겠습니다.

읽어 주셔서 감사합니다.