掲示板検索ウィンドウ機能


結果

内容
  • で欲しいキーワードを検索できます.
  • 入力値
  • がない場合、通知ウィンドウ
  • が表示する.
    コード#コード#
      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>