포스코DX X 비트교육센터 6기 - keyword로 search기능

하고자 하는 일

[ FrontEnd ]

첫 번째, fetch 함수에 keyword url 추가

const fetchEmails = async (keyword) => {
    try {
      const response = await fetch(`/api?kw=${keyword ? keyword : ""}`, {
        method: "get",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
        body: null,
      });

      if (!response.ok) {
...

두 번째, searchBar 컴포넌트에 fetch 함수 프롭스 넘기기

 return (
    <div id={"App"}>
      <RegisterForm addEmail={addEmail} />
      <SearchBar fetchEmails={fetchEmails} />

세 번째, searchBar 컴포넌트에 받아온 props 정보를 가지고 onChange 함수 걸기

import React from "react";
import styles from "./assets/scss/SearchBar.scss";

function SearchBar({ fetchEmails }) {
  return (
    <div className={styles.Searchbar}>
      <input
        type="text"
        placeholder="찾기"
        onChange={(e) => {
          fetchEmails(e.target.value);
        }}
      />
    </div>
  );
}

export default SearchBar;

[ BackEnd ]

네 번째, select sql문 바꾸기

<select id="findAll" resultType="emaillistvo" parameterType="string">
		<choose>
		<when test="keyword == null or keyword==''">
		 select no, first_name, last_name, email
		    from emaillist 
        order by no desc
		</when>
		<otherwise>
		<![CDATA[
		  select no, first_name, last_name, email
		    from emaillist
		    where first_name like '%${keyword}%' or last_name like '%${keyword}%'
		    or email like '%${keyword}%' 
        order by no desc
		]]>
		
		</otherwise>
		</choose>
	
	</select>

다섯 번째, controller 수정하기

	@GetMapping("/api")
	public ResponseEntity<JsonResult> read(@RequestParam(value="kw", required=true, defaultValue="") String keyword ) {
		return ResponseEntity
				.status(HttpStatus.OK)
				.body(JsonResult.success(emaillistRepository.findAll(keyword)));
	}
	

여섯번 째, repository 수정하기

	public List<EmaillistVo> findAll(String keyword) {
		return sqlSession.selectList("emaillist.findAll", keyword);
	}
	