React Filter 처리 해보기

문제 - 필터 개발 즉 검색 기능 개발중 setState 사용으로 인해 글들이 안보이는 현상.

검색 입력창에 입력하면 반응하는 useEffect.

useEffect(() => {
    //search input 넣는 값에 따라서 객체 변경. (데이터 변경이 이루어짐, state 변경.)
    tableRowComponents(tableRows);
    // input 값이 변경될 때마다 상태 업데이트
  }, [searchInput]);

필터처리를 진행해주는 tableRowComponents 함수.

const tableRowComponents = (data: Array<TableRow>) => {
    data = data.filter((row: TableRow) => {
      return row.projectName.includes(searchInput) || row.manager.includes(searchInput)
    });
    return data.map((row: TableRow) => {
      return <Tr key={row.id}>
        <Td>{row.id}</Td>
        <Td>{row.projectName}</Td>
        <Td>{row.manager}</Td>
        <Td>{row.from}</Td>
        <Td>{row.to}</Td>
        <Td>{row.status}</Td>
      </Tr>
    })
  }

필터링된 글을 출력하는 부분 (삼항 연산자 이용)

{tableRows ? tableRowComponents(tableRows) : ''}

전체적으로 보면 기존 tableRows <- 상태 등록되어있음 해당 상태를 tableRowComponents 함수에 파라미터로 넘겨 글들이 보일 수 있도록 함.

searchInput 이라는 입력창에 변화가 있을 경우 기존에 화면에 보이는 tableRows를 tableRowComponents 넘기고 해당 함수에서는 includes(searchInput) <- 이부분을 통해서 필터링 작업을 거침 해당 하는 부분만 다시 리턴하고 리턴 받은 배열을 map함수를 통해 다시한번 돌아가면서 필요한 값들을 꺼내 필요한 형태로 작업하고 리턴하고 해당 부분이 화면에 출력됨.

위와 같은 방식으로 필터를 하게 되면, 테이블 출력 자체도 필터 함수를 거쳐 출력까지 진행되기 때문에 기존데이터를 건드리지 않는다.