[React] 클릭한 버튼만 선택하기

국민대 웹/앱 동아리 WINK와 조형 동아리 STACK의 프로젝트 Spot:s 개발을 시작했다.

팀 프로젝트가 처음은 아니었지만 타과생과 하는 첫 프로젝트고 규모가 생각보다 긴장도 되었지만 재미있을거 같다고 생각했다.

개발하던 중 예전 프로젝트에서 사용했던 기술인데 기억이 잘 안날 때가 있어 Github 레포를 찾으면서 다시 사용하는 기술들이 있었고 처음 써야하는 기술들도 많아서 나중에 다시 기억하기 위해 기술 블로그를 쓰기 시작해야겠다고 마음 먹었다.

클릭한 버튼만 선택하기

첫 난관은 클릭한 버튼만 선택하기 였다. 선택한 버튼만 다른 색을 칠하는 웹/앱에서 굉장히 많은 기능이었다.
단순하게 하나의 버튼의 색을 바꾸는 것은 쉬웠지만 여러개를 다루어야 하다보니 조금 어려웠다.

Solution

이 기능은 버튼에서 많은 부분이 달라지지 않음으로(background,color,border만 달라진다) 버튼을 선택하면 그 버튼의 id를 가져와서 useState를 이용해 currentClick에 설정하고 직접 style을 변경하는 식으로 해결했다. 버튼을 클릭하고 이전에 선택했던 버튼은 다시 원래의 style을 적용시키는 식으로 접근했다.

또한 useEffect를 통해 currentClick이 변경 될 때만 바뀔 수 있도록 만들었다.

Code

const MatchList = () => {
  const [currentClick, setCurrentClick] = useState(null);
  const [prevClick, setPrevClick] = useState(null);

  const onClick = e => {
    setCurrentClick(e.target.id);
  };

  useEffect(
    e => {
      if (currentClick !== null) {
        const current = document.getElementById(currentClick);
        current.style.background = '#fb1e53';
        current.style.color = '#ffffff';
        current.style.border = '0';
      }

      if (prevClick !== null) {
        const prev = document.getElementById(prevClick);
        prev.style.background = '#ffffff';
        prev.style.color = '#d3d3d3';
        prev.style.border = '0.1vw solid #d3d3d3';
      }
      setPrevClick(currentClick);
    },
    [currentClick],
  );

Result

그 결과 잘 작동하는 것을 볼 수 있다.
아직 백앤드와 연결하지 않아서 그냥 컴포넌트를 만들어서 작동하는 것이지만 나중에 백앤드와 연동해도 잘 작동했으면 좋겠다~!