게시판 검색창 기능

결과

내용

• 원하는 키워드로 검색할 수 있다.
• 입력값이 없으면 알림창을 나타냄

코드

  const [searchValue, setSearchValue] = useState(''); //검색창에서 입력값을 받는 state
  const [filterValue, setFilterValue] = useState(''); //검색 필터링된 값으로 업데이트 됨

//[QnA] SearchValue에 입력값으로 업데이트
  const handleSearch = e => {
    setSearchValue(e.target.value);
  };

  //[QnA] 엔터를 누르면 searchCheck 함수를 호출함
  const handleEnter = e => {
    if (e.key === 'Enter') {
      e.preventDefault();
      searchCheck();
    }
  };

  //[QnA] 입력값 확인 하는 함수
//입력값이 제목에 있는지, 글쓴이에 있는지 필터링
  const searchCheck = () => {
    const filter = posts.filter(
      posts =>
        posts.title.toLowerCase().includes(searchValue) ||
        posts.writer.toLowerCase().includes(searchValue)
    );

    //입력값이 없으면 알림창 띄우기
    if (!searchValue) alert('검색할 내용을 입력해주세요.');
    else if (filter) setFilterValue(filter);
  };

 <tbody>
          {/* 필터링된 입력값이 없으면 전체 게시물을, 아니면 필터링된 게시물을 보여줌 */}
          {!filterValue
            ? posts.map(data => {
                return (
                  <tr key={data.no}>
                    <BodyTd>{data.no}</BodyTd>
                    <BodyTd
                      onClick={handleTitle}
                      style={{ textAlign: 'left', cursor: 'pointer' }}
                    >
                      {data.title}
                    </BodyTd>
                    <BodyTd>{data.writer}</BodyTd>
                    <BodyTd>{today}</BodyTd>
                  </tr>
                );
              })
            : filterValue.map(data => {
                return (
                  <tr key={data.no}>
                    <BodyTd>{data.no}</BodyTd>
                    <BodyTd
                      onClick={handleTitle}
                      style={{ textAlign: 'left', cursor: 'pointer' }}
                    >
                      {data.title}
                    </BodyTd>
                    <BodyTd>{data.writer}</BodyTd>
                    <BodyTd>{today}</BodyTd>
                  </tr>
                );
              })}
        </tbody>