React & Ant Design : 카테고리 필터링 기능 구현하기

 

커뮤니티 페이지에서 카테고리 버튼을 눌렀을 때 해당하는 카테고리에 맞는 글만 보여지도록 구현해야 했다.

카테고리는 중복 선택이 안 된다는 것을 감안해서 Ant Design의 Radio Button을 활용하기로 했다.

기존에는 Tag 컴포넌트를 사용했었지만 Radio.Button으로 바꿔주었다. 

axios를 활용해 카테고리 배열을 가져온 후, categories가 undefined가 아니면 map을 돌려서 라디오 버튼을 생성해 준다. 

이 때 "모든 글"을 볼 수 있도록 버튼이 하나 더 있어야겠다고 생각했다. 그래서 defaultValue에도 설정해 주었다.

onChange 속성에는 함수를 넣어주었다.

useState 훅을 활용해서 category를 바꿔 준다.

이렇게 onChange 이벤트가 일어날 때마다 category는 바뀌게 되고, useEffect의 두 번째 인자를 category로 전달하여 이것이 바뀔 때 useEffect가 트리거 되면서 params에 category를 전달한다. 그러면 클릭할 때 해당하는 카테고리의 글만 필터링되어 나오게 된다.