📌 버튼은 ["ALL", "JS", "VUE", "REACT", "TEAM"] 이렇게 총 5개가 있다.

처음에 구현할 때, All 버튼 클릭 시 재랜더링 되는 형태로 코드를 짰었다.

const buttons = ["JS", "VUE", "REACT", "TEAM"];

.
.
.

const allListsHandler = () => {
	getLists();
};

const filterListsHandler = (e) => {
	const filterBtn = e.target.innerHTML;
	const filter = lists.filter((list) => list.type === filterBtn);
  setFilterList(filter);
};

useEffect(() => {
	getLists();
}, []);

.
.
<li className={styles.projects_btn} onClick={allListsHandler}>
	ALL
</li>
{buttons.map((btn, idx) => (
	<li
		 className={styles.projects_btn}
     key={idx}
     onClick={filterListsHandler}
	 >
	   {btn}
   </li>
   ))}

이렇게 코드를 짜면, map함수를 돌려도 ALL버튼은 제외되기 때문에 구현하기 어려웠다.

map함수 안에 조건을 달면 어떨까 하는 생각이 들었다.

const buttons = ["ALL", "JS", "VUE", "REACT", "TEAM"];
.
.
let [btnActive, setBtnActive] = useState(0);
.
.
const getLists = () => {
    setFilterList(lists);
  };

const filterListsHandler = (e) => {
	const target = e.target;
  const filterBtn = target.innerHTML;
  if (filterBtn === "ALL") {
      getLists();
      setBtnActive(() => target.value);
	    } else {
	      const filter = lists.filter((list) => list.type === filterBtn);
	      setFilterList(filter);
	      setBtnActive(() => target.value);
	    }
	  };

 const goToProject = (list) => {
    window.open(`${list.url}`, "_blank");
 };

 const goToProjectCode = (list) => {
    window.open(`${list.code}`, "_blank");
 };

 useEffect(() => {
   getLists();
 }, []);

return (
    <div className={commonstyles.contents} ref={ref}>
      <h1 className={commonstyles.contents_title}>PROJECTS</h1>
      <h2 className={styles.projects_title}>My projects</h2>
      <ul className={styles.projects_btn_wrap}>
        {buttons.map((btn, idx) => (
          <li
            className={"projects_btn" + (idx === btnActive ? " active" : "")}
            key={idx}
            value={idx}
            onClick={filterListsHandler}
          >
            {btn}
          </li>
        ))}
      </ul>

📌 클릭한 btn에 border-bottom 효과 주기

→ map함수로 돌린 버튼들의 idx값을 버튼의 value값으로 지정한다.

그리고 버튼을 클릭할때 useState에 클릭한 버튼의 value값을 넣어주고, <li>에 조건을 달아준다.

idx 값과 useState의 변수 btnActive가 일치할때, (=버튼을 눌렀을때) 기존 className에 active를 붙이는 삼항연산자를 만들어준다.

✏️ 다른 className들은 Post Css를 썼지만, 조건이 붙은 className에 대해 조금 더 공부가 필요할 것 같다.

현재는 App.css 공통 style 컴포넌트에 작성해주었다.

이후 useState의 dafault 값을 index=0 인 ALL 버튼으로 해주면 초기 랜더링 시에 ALL 버튼에 active가 붙어있는 것을 볼 수 있다.