중복된 배열 값 제거 및 React에서 저장하기
프로그래밍에서 흔한 작업 중 하나는 배열에서 중복된 값을 제거하는 것입니다. React에서는 이를 달성하기 위해 여러 가지 방법을 사용할 수 있습니다. 이 블로그 포스트에서는 다른 방법을 탐색하고 예제를 제공하여 중복을 제거하고 고유한 값들을 새 변수에 저장하는 방법에 대해 알아보겠습니다.
메소드 1: Array.from과 Set 사용하기
React에서 배열에서 중복된 값을 제거하는 간단하고 간결한 방법은 Array.from과 Set의 조합을 사용하는 것입니다. Set 객체는 고유한 값만을 허용하기 때문에 배열을 세트로 변환한 다음 다시 배열로 변환할 수 있습니다.
const uniqueNames = Array.from(new Set(names));
이 코드는 names 배열에서 고유한 값만을 포함하는 uniqueNames라는 새 배열을 생성합니다.
메소드 2: 필터와 IndexOf
다른 방법은 filter 메소드를 indexOf 함수와 결합하여 사용하는 것입니다. 이 방법은 배열을 반복하고 중복된 인덱스를 가진 요소를 필터링합니다.
const uniqueNames = names.filter((val, id, array) => {
return array.indexOf(val) === id;
});
이 코드는 names 배열에서 고유한 값만을 포함하는 uniqueNames라는 새 배열을 반환합니다.
메소드 3: 객체를 사용하여 중복된 값 제거하기
특정 속성(예: “id” 필드)을 기준으로 중복된 값을 제거하려면 다음 방법을 사용할 수 있습니다.
function getUnique(arr, index) {
const unique = arr
.map(e => e[index])
.map((e, i, final) => final.indexOf(e) === i && i)
.filter(e => arr[e])
.map(e => arr[e]);
return unique;
}
const uniqueArray = getUnique(arr, 'id');
이 코드는 배열과 중복을 필터링할 속성을 가져가는 getUnique라는 함수를 정의합니다. 지정된 속성을 기준으로 고유한 객체만을 포함하는 새 배열을 반환합니다.
메소드 4: getUnique 함수 재구성하기
getUnique 함수의 재구성된 버전은 비교를 위한 키를 지정하는 더 유연성을 제공합니다.
function getUnique(array, key) {
if (typeof key !== 'function') {
const property = key;
key = function(item) { return item[property]; };
}
return Array.from(array.reduce(function(map, item) {
const k = key(item);
if (!map.has(k)) map.set(k, item);
return map;
}, new Map()).values());
}
const uniqueArray = getUnique(items, 'id');
이 재구성된 코드는 더 동적인 키 지정을 허용하며 지정된 키를 기준으로 고유한 객체의 배열을 반환합니다.
결론
이 블로그 포스트에서는 React에서 배열에서 중복된 값을 제거하기 위한 다양한 방법을 탐색했습니다. Array.from과 Set을 사용하는 방법과 filter와 indexOf를 사용하여 중복을 제거하고 고유한 값을 새 변수에 저장하는 방법을 배웠습니다. 또한 특정 속성을 기준으로 중복을 제거하기 위한 함수 기반 접근법에 대해 논의했습니다. 요구 사항에 가장 적합한 방법을 선택하고 React 프로젝트에서 중복된 값들을 배열에서 제거하세요.
