[React] Filter 및 includes 사용 데이터 필터링

데이터를 DB에서 가져와서 검색 조건에 맞게 조회하는 화면을 구상하다보면 조건에 맞춰서 다시 조회를 해야하나 싶지만 페이지 렌더링시 전체 데이터 조회, 그 후 Filter() 함수 를 사용하여 필터링하면 DB에 다시 조회할 필요가 없습니다.

 

Filter() 함수를 사용하여 DB에서 가져온 데이터들을 검색조건 적용시키는 방법입니다.

저는 filesData라는 배열에 검색 키워드가 filename 또는 keyword에 포함되면 일치하도록 해놨습니다.

값이 포함된지 체크하는 함수는 기존에는 indexOf()를 사용했지만, ES6 문법에서 추가된 includes() 함수를 사용했습니다.

includes() 함수는 대소문자를 구별합니다.

대소문자 상관없이 하고싶으신분들은 toLowCase()나 toUpperCase() 함수를 사용하여 검색어 및  데이터를 맞춰주시면 됩니다.

#filesData의 keyword에  test가 포함되어 있는지
console.log(filesData.keyword.includes('test'));
//true or false 반환

#filesData의 keyword에 5번째 위치부터 test가 포함되어있는지 
console.log(filesData.keyword.includes('test',5));
//true or false 반환

searchKeyword의 기본값을 ""을 해놓은 이유는 ""으로 설정해줘야 검색 후, 검색값을 다 지웠을때 전체조회가 됩니다.

  /*=====================JS==============*/

  const [filesData, setFilesData] = useState();   //조회 결과 저장
  const [searchKeyword, setSearchKeyword] = useState(""); //조회 검색어
  
  //Page Loading Data 조회
  useEffect(()=>{
      axios
            .post(`INSERT RESTAPI PATH`, {
              	/*body 부분*/
            },{header})
            .then((response) => {
            	//데이터가 넘어온 경우 저장
            	if(response.data){
                  setFilesData(response.data);
                }
              
            })
            .catch((err) => {
                alert("에러 발생 : "+ err)
            }); 
  },[])
  
  
  /*==================JSX==============*/
  		/*검색 창 부분*/
       <div className="div-wrap-searchCode">
                    <input
                        className="input-search"
                        type="text"
                        maxLength="25"
                        placeholder="파일명 또는 태그명을 입력해주세요"
                        onChange={(e) => {
                            setSearchKeyword(e.target.value);
                        }}
                    />
                  
                </div>
  
  /*조회 데이터 보여주기*/
  <div style={{ width: "80%" }}>
  					//filesData가 있는 경우에만 동작하도록
                    {filesData
                        ? filesData
                              .filter(
                                  (searchData) =>
                                      searchKeyword === ""
                                          ? true
                                          : (searchData.filename
                                                ? searchData.filename.includes(searchKeyword)
                                                : false) ||
                                            (searchData.keyword ? searchData.keyword.includes(searchKeyword) : false)
                              ) 
                              .map((data,index) => {
                                  return (
                                      <>
                                          {createID === "public" ? (
                                              <div className="div-mdlSample">
                                                  <td className="div-mdlContents">
                                                      <p className="mdl-title">{data.filename}</p>
                                                      <span className="mdl-contents">Uploader: {data.createid}</span>
                                                      <span className="mdl-contents">Upload Date: {data.createtm}</span>
                                                      <span className="mdl-contents">설명: {data.explanation}</span>
                                                      <span className="mdl-contents">태그: {data.keyword}</span>
                                                  </td>
                                                  <td className="mdl-classification" style={{ width: "20%" }}>
                                                      <span className="mdl-classification">{data.algorithm}</span>
                                                      <Button
                                                          className="btn-download"
                                                          onClick={() => {
                                                              onClickHandler(data.fileid);
                                                          }}
                                                      >
                                                          Download
                                                      </Button>
                                                  </td>
                                              </div>
                                          ) : null}
                                      </>
                                  );
                              })
                        : null}
                </div>