[ project3 / refactor ] 중복 제거를 위한 arr.reduce (Feat.Nextjs)

FAQ를 만들려고 하는데, category를 filter링을 해서 내용을 추출하려고 했다. 굳이 내가 직접 기입하지 않아도 contents.category의 값을 중복제거하면 정보를 추출할 수 있을 거라고 생각해서 찾아보기 시작했다.

어떤 메소드를 쓰면 분명이 한번의 공식으로 될꺼 같다고 판단하여 검색과 Ai에게 물어봤다.예상대로 chat GPT는 대중적이고 안전한 방법만 알려줬다.

 

STAR

situation :

- data에서 특정 object 딱 한번만 추출하여 사용하기.

 

Task :

- 어떻게해서 반복적으로 사용된 data.category 값을 한 개만 추출할 것 인가.

 

Action : 방법은 여러가지가 있었다. (아마도 내가 모르는...)

방법1 : 변수에 값을 직접 넣어서 동일한 값 매치시키기

const UniqueCategories = () => {
  const [filteredContents, setFilteredContents] = useState([]);
  // Use useMemo to memoize the filteredContents based on contents

  const uniqueContents = useMemo(() => deduplicateCategories(contents), [contents]);
  // Update filteredContents when uniqueContents changes

  useEffect(() => { setFilteredContents(uniqueContents);
}, [uniqueContents]);

방법2 :  최초 빈 배열을 만들고, map method을 돌린다. filter로 최초 빈 배열에 동일한 값이 없으면 최초 빈 배열에 값을 넣고 그렇지 않으면 통과.

그렇게 내가 만든 공식(물론 문법이 틀렸다.)

let categories:string[] = []
const filteringCategory = faq.map((i, index) =>(
    categories += categories.filter(item => item != i.category))
)

방법 2-1 :  문법 체크를 위해 chapt에 문의하니 reduce()를 알려줬다.

const categories = contents.reduce ((acc, item) =>{
  if(!acc.includes(item.category)) {
    acc.push(item.category);
  }
return acc; },
[]);

---

arr.reducer

let value = arr.reduce(function(accumulator, item, index, array) {
  // ...
}, [initial]);

• accumulator – 이전 함수 호출의 결과. initial은 함수 최초 호출 시 사용되는 초깃값을 나타냄(옵션)
• item – 현재 배열 요소
• index – 요소의 위치
• array – 배열

작동원리 이해하기

 

 

result

맨 하단에 보면 추출 정보를 확인 할 수 있다.

 

 

ps

역시 ai는 평균값에 수렴하기 때문에 프럼프트에게 명확하게 정보를 전달해야 한다...