검색기능 구현 TIL

1.내가 만난 문제

• 기능목표: 은행명 or 상품명을 입력하면 해당하는 상품을 가져오자.
• 은행에서 제공하는 open API에서 url 값으로 들고 올 수 있는 것은 은행명 밖에 없었고 또, 은행코드를 쳐야지만 되었다.
  저기에는 은행명(string)도 된다고 했지만 안되었다. ㅠㅠ
  그럼 나는 사용자가 입력한 은행명을 코드로 바꾸고 그 코드를 api로 useLocation을 사용해서 전달해야하는 것인가...

API요청주소&financeCd=은행코드

2.시도 👍

 - 사용자가 입력한 "국민","국민은행"을 어떻게 다 코드로 바꿔야하는 것인가에 대해서 고민이 많이 하다가 다른방법이 없을까 열심히 검색을 해보니 필터와 맵으로 기능구현이 가능하다는 말을 자주 보게되었다.

 

3.해결 ✅

먼저 필요한 값이 있는 데이터를 props로 컴포넌트로 넘겨준다.

baseList데이터키에서 filter를 써서 input value에 적힌 값이 includes되는지 확인한다.

//depositbaseList : 예금baseList 
{depositbaseList &&
            depositbaseList
              ?.filter((val) => {
              //searchBank: 인풋값은 따로 컴포넌트를 통해서 state로 관리중이다.
                if (searchBank === "") {
                  return val;
                } else if (val.kor_co_nm.includes(searchBank)) {
                  return val;
                } else if (val.fin_prdt_nm.includes(searchBank)) {
                  return val;
                }
              })

그리고 만약에 포함되어 있는 값이 나온다면?

 .map((v) => { 
      return ( <StyledContentDiv>
                        {/* product name */}
                        <h2
                          style={{
                            fontSize: "20px",
                          }}
                        >
                          {v.fin_prdt_nm}
                        </h2>
                        {/* bank Name */}
                        <StyledBankNameP>{v.kor_co_nm}</StyledBankNameP>
                      </StyledProductTitleDiv>
                      <StyledSearchSaveTrmDiv>
                       //이부분은 optionList에 따로 들어있는 데이터가 필요해서 Map사용
                        {depositOptionalList?.map((i) =>
                          i.fin_prdt_cd === v.fin_prdt_cd ? (
                            <>
                              <StyledSavingRateP>
                                <p style={{ color: "#aaa" }}>
                                  {i.save_trm}개월
                                </p>
                                최고금리{i.intr_rate2}
                              </StyledSavingRateP>
                            </>
                          ) : null
                        )}
                      </StyledSearchSaveTrmDiv>
                 </StyledContentDiv>
                   )}

 map을 이용해서 해당하는 상품들이 나오도록 한다.

 

4.후기

검색기능구현 한번 해보고 싶었는데 이렇게 만들어봐서 기분이 좋다.

원래는 은행명만 해당했는데 상품명까지 동시에 되도록 만들었고,  그리고 더나아가서 예금이랑 적금이랑 나눠서 상품검색을 할 수 있도록 할 예정이다.