다이어리 검색기 만들기(4) - 선택된 키워드 관리(2)

만들다가 여러 컴포넌트에서 동일한 키워드를 공유하기 위해 최상위 컴포넌트에서 keyword 목록을 관리하게 됐다. 최종 형태는 이 글에서 확인할 수 있고, 아래 글은 참고하면 좋을 것 같다.

https://joylee-developer.tistory.com/125

React - State 끌어올리기

 

---

 

 

카테고리 관련 기능 추가

- Reset버튼을 만들어 한꺼번에 목록이 사라지도록 한다.

- 선택한 키워드를 아래에 보여주고, 그 목록에서도 선택해서 삭제할 수 있도록 한다.

 

- Reset버튼을 만들어 한꺼번에 목록이 사라지도록 한다.

// resetBtn
function handleResetBtn() {
    setKeyword([]);
}
 
return(
    // ...
    <button onClick={handleResetBtn}>RESET!</button>
)

Reset 버튼은 버튼을 누르면 onClick을 통해 setKeyword로 selectedKeyword 를 []로 설정해주면 간단하게 구현할 수 있었다.

 

- 선택한 키워드를 아래에 보여주고, 그 목록에서도 선택해서 삭제할 수 있도록 한다.

선택한 키워드를 보여줄 selectedKeywordLists를 만든다.

// selectedKeywordLists
const selectedKeywordLists = [];
let k = 0;
while(k < selectedKeyword.length) {
  selectedKeywordLists.push(
    <button 
      className="KeywordDeleteBtn"
      key={k}
      id={selectedKeyword[k]}
      onClick={handleDelBtn}>
        <span># </span>
        {selectedKeyword[k]}
        <i className="fas fa-times"></i>
    </button>
  )
  k = k + 1;
}
 
return (
    // ...
    <div className="selectedKeywordLists">
        {selectedKeywordLists}
    </div>
)

selectedKeyword를 반복문을 사용해서 하나씩 button을 만들어 selectedKeywordLists에 넣어준다.

key는 react의 오류메시지 때문에 넣어줬고, onClick을 할 때 handleDelBtn이라는 함수가 실행되도록 설정한다.

 

handleDelBtn함수는 아래와 같다.

// DeleteBtn
function handleDelBtn(e) {
  let id = e.target.id;
  if(id === '') {
    id = e.target.parentElement.id;
  };
  setKeyword(selectedKeyword.filter(keyword => keyword !== id))
}

클릭한 버튼의 id를 받아와서 selectedKeyword에서 삭제해준다.

id === '' 를 검사하는 이유는, i를 클릭하면 handleDelBtn은 잘 작동하는데 target이 i이기 때문에 삭제되지 않기 때문에다. i에는 id 속성이 없다. id가 없으면 상위 요소의 id를 id로 저장한다.

위와 같은 상황을 막기 위해 target을 확인해야 한다.