키워드 태그 : Algo-tag, Announcer, Extra-tag, Search Input

• 토글 기능 추가

• 선택된 태그 옆에 보이게 하기, 삭제할 수도 있음

• 선택된 태그들을 기준으로 데이터 filtering해서 Info 컴포넌트들에게 전달될 수 있도록 할 것

• input에서 검색한 키워드들도 tag 형식으로 전달해 같은 로직으로 필터링할 것

• 중복 태깅 방지

  setKeywords([...new Set([...beforeKeyword, keyword])])가 먹히지 않는다. keyword가 객체가 아닌 primitive 타입이면 중복이 제거되는데, 객체이기 때문에 제거되지 않는다.

  객체는 별도의 값을 생성하고 그 값을 따로따로 가리킨다. 예를 들어, 값이 같은 객체 { name: 'harry', id: 1 }가 있다고 해 보자. 객체는 값이 같다고 하더라도 { name: 'harry', id: 1 } !== { name: 'harry', id: 1 }이다. 따라서 객체에는 Set이 먹히지 않는다.

  reduce 메서드를 이용해 keywords 배열의 모든 원소들의 모든 key들을 확인하고, 중복이 있으면 accumulator에 추가하지 않는다.

  let fullNameList = [{ name: 'harry', id: 1 }, { name: 'john', id: 2 },
  										{ 'name': 'trevor', id: 3  }, { name: 'harry', id: 1  }, 
  										{ name: 'ron', id: 4  }, { name: 'jackson', id: 5  }]
  
  fullNameList.reduce((a, c) => { 	
  	!a.find(v => v.id === c.id) && a.push(c);     
  	return a; 
  }, []);
  

• 컴포넌트 사이를 filtering 조건들을 전달해 주고, 변경 사항도 빠르게 전달해줄 수 있게 하려면 filtering 조건들을 뭐로 줘야 하나?

  state를 사용해서 Search.js에서 한 번 다 필터링 시킨 데이터의 변경 사항을 저장 후, context로 InfoList.js InfoTable.js 컴포넌트들에게 보내주는 것으로 한다.

  • [x] InfoCard
  • [x] InfoTable