# 211210 TIL ([React, tsx] useMemo 사용해서 result 화면에 나타내기)

장기현장실습

SNU 성문분석 이슈

#50 N:N 분석(시각화) 기능 추가 이슈 진행중 

• N:N 분석의 유사도 결과 테이블 생성중 
  • 사용자가 선택한 음성 파일 명을 나타내고, 유사도를 보여주는 코드를 작성하고 있는 중이다. 첫번째로 선택한 음성파일들과 두번째로 선택한 음성파일들의 곱 만큼 결과가 생성되기 때문에 중복을 없애고 파일명을 나타내도록 했다.

    // SimilarManyVoicesTable.tsx
    
    export default function SimilarManyVoicesTable({ className, manyToManyResult } : Props): JSX.Element {
      const tableHead = useMemo(() => {
        let voice = [...manyToManyResult];
        const temp = new Array();
        voice.map(r => temp.push(r.voice_1st.name));
    
        let voice_1st = temp.filter((item, idx, self) => {
          return self.indexOf(item) === idx;
        })
        voice_1st = voice_1st.length > 10 ? voice_1st.slice(0, 10) : voice_1st;
    
        return voice_1st.map(name => (
          <>
            <th className="col">{ name }</th>
          </>
        ))
      }, [ manyToManyResult ]);
      
      const tableRows = useMemo(() => {
        let voice = [...manyToManyResult];
        const temp = new Array();
        voice.map(r => temp.push(r.voice_2nd.name));
    
        let voice_2nd = temp.filter((item, idx, self) => {
          return self.indexOf(item) === idx;
        })
        voice_2nd = voice_2nd.length > 10 ? voice_2nd.slice(0, 10) : voice_2nd;
    
        return voice_2nd.map(name => (
          <tr className="row m-0">
            <th className="col m-0">{ name }</th>
          </tr>
        ));
      }, [ manyToManyResult ]);
      
      ...