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

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

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

React - State 끌어올리기

 

---

 

 

키워드에 대한 내용은 Category에서 관리하고, selectedKeyword라는 array를 만들어 array만 App에 전달하도록 했다.

input에서 클릭될 때 실행할 함수를 정의한다.

<input
    // type="checkbox"
    // id={catData.sub[j]}
    onChange={handleClick}
    checked={selectedKeyword.includes(catData.sub[j]) ? true : false}
></input>

onChange속성을 사용해 연결해야 checked 관련해서 오류메시지가 나오지 않는다.

(참고: https://joylee-developer.tistory.com/120)

const [selectedKeyword, setKeyword] = useState([]);
 
// 클릭 이벤트 처리 함수
function handleClick(e) {
    const id = e.target.id;
    const checked = e.target.checked;
    if(checked) {
        // 체크된 경우
        setKeyword(prevList => [...prevList, id]);
    } else {
        // 해제한 경우
        setKeyword(selectedKeyword.filter(keyword => keyword !== id));
    }
}

함수형 컴포넌트에서 state대신 사용하는 Hook을 사용해 selectedKeyword와 setKeyword를 정의한다.

input의 onChange를 통해 실행되는 handleClick에서는 id(선택된 카테고리의 이름)과 checked를 정의한다.

체크박스가 체크될 땐 checked === true, 해제될 땐 checked === false이다.

이것을 이용해 selectedKeyword에 새로운 키워드가 추가될 때와, 삭제할 때를 나눠서 작성한다.

 

Reset버튼도 만들고, handleResetBtn 함수도 만들어준다.

// resetBtn
function handleResetBtn() {
    setKeyword([]);
}
 
return (
    // <div className="category">
        // {lists}
         <button onClick={handleResetBtn}>RESET!</button>
    // </div>
);

 

handleClick과 handleResetBtn이 실행될 때마다 변하는 selectedKeyword에 따라 실행할 내용을 useEffect()를 통해 설정한다.

useEffect(() => {
    // selectedKeyword 가 변할 때 마다 props.onClick 실행해 App에 배열을 넘김
    props.onClick(selectedKeyword);
}, [selectedKeyword, props]);

useEffect는 첫 번째 인자로는 실행할 함수가, 두 번째 인자로는 변화를 감지할 요소들을 받는다.

위의 useEffect에서는 selectedKeyword의 변화만 감지하면 되지만 props를 사용하기 때문에 props를 함께 두 번째 인자로 넣어주지 않으면 오류 메시지가 발생한다.

(참고: https://joylee-developer.tistory.com/121)

 

App.js에서는 props.onClick(selectedKeyword)를 통해 전달받은 selectedKeyword를 App내의 selectedKeyword에 저장한다.

const [selectedKeyword, setKeyword] = useState([]);
 
function handleCategory(newKeyword) {
    setKeyword(newKeyword);
}
 
return (
    <div className="App">
    <Category
        data={category}
        onClick={(selectedKeyword) => handleCategory(selectedKeyword)}
        ></Category>
    </div>
);