[React] 꿈 일기 기록 사이트 제작 일지-13. 검색 기준을 제목, 내용으로 확대, 검색 결과를 화면이 아닌 본문에 추가하기

검색 기준을 제목, 내용으로 확대

기존에는 일기 내용만 검색이 가능하도록 구현했는데 제목도 검색 항목에 추가하고 싶었다. 

  const SearchedData = diaryCtx.diary.filter((it) => {
    if (inputText !== "") {
      return it.content.toLowerCase().includes(inputText);
    }
  });

현재 검색어를 포함한 일기를 포함한 로직은 위와 같은데, 여기서 조금만 손을 봐서 일기 제목도 검색 가능하도록 수정해 보려고 한다. 

  const SearchedData = diaryCtx.diary.filter((it) => {
    if (inputText !== "") {
      if (it.content.toLowerCase().includes(inputText)) {
        return it.content.toLowerCase().includes(inputText);
      }
      if (it.title.toLowerCase().includes(inputText)) {
        return it.title.toLowerCase().includes(inputText);
      }
    }
  });

간단하게 filter 함수 내부에 제목을 검색할 수 있는 코드를 추가해주었다. 

만약 content에 inputText와 동일한 글자가 포함되어 있다면 해당 배열을 리턴해준다. 제목에 동일한 글자가 포함되어 있을 때도 마찬가지의 동작을 수행한다.

제목과 본문 내용 중 하나라도 inputText에 해당하는 글자가 있다면 모두 검색하고 싶었기 때문에 하나의 filter 함수에 두 가지 코드를 모두 작성하면 되었다.

 

🚜 결과

 

 

검색 결과를 화면이 아닌 본문에 추가하기

'location.state.inputText'를 출력하던 코드를 header 아래로 내려주기만 하면 되는 간단한 수정이었다.

다만 검색한 내용이 너무 길어지면 화면에 글자를 출력하는 데 공간을 너무 많이 쓰게 되므로 20자까지 끊어서 출력하고 그 뒤는 말줄임표로 대체했다.

추가로 strong 태그를 이용해 검색결과 내용은 따로 강조해서 보여주었다.

      <div className="searchResult">
        <strong>
          {location.state.inputText.length <= 20
            ? `'${location.state.inputText}'`
            : `'${location.state.inputText.slice(0, 20)}...'`}
        </strong>
        {` 검색 결과입니다.`}
        {location.state.SearchedData.map((it) => (
          <DiaryItem key={it.id} {...it} />
        ))}
      </div>

 

🚜 결과

 

 

 

---

COMMIT

:sparkles:검색 기능 향상 · Yoonyesol/Dream_note@403662e