• 2023.03.01(수) 2차 프로젝트 진행 중

---

2차 프로젝트 feature/contents 브랜치에서 플레이어 기능을 구현하던 중, 강좌명을 클릭하면 버튼색이 채워지고, 다시 클릭하면 안 채워진 상태로 바뀌게끔 하고 싶었다.

🪄 요로코롬 🪄

일단 이미지를 두 가지를 썼는데, 하나는 선택이 된 상태를 나타내기 위해 진한 색 이미지 /images/Contents/Icons/circle-check-solid.png(solid) 이고, 하나는 선택 취소 상태를 나타내기 위한 연한 색 이미지 /images/Contents/Icons/circle-check-regular.png(regular)이다.

첫 시도

1. 컴포넌트에서 사용할 이미지 경로를 상태(state)로 설정한다.

const [imageSrc, setImageSrc] = useState("/images/Contents/Icons/circle-check-regular.png"); // 초기 상태는 선택이 되지 않은 상태를 나타내기 위함

2. onClick 이벤트 핸들러 함수를 만든다.

const handleClick = () => {
  setImageSrc("/images/Contents/Icons/circle-check-solid.png")
};

3. onClick 이벤트 핸들러 전달

return (
  <Image src={imageSrc} onClick={handleClick}/>
  );

🆘 그런데 위와 같이 코드를 짜니까 한번 선택 클릭 했을 때 src가 바껴서 이미지가 변경이 되기는 하지만, 유저가 선택 취소를 하고 싶을 때 다시 초기 src로 돌아가는 게 불가능했다. 누를 때마다 이미지가 solid로 변경됐다가 regular로 변경됐다가 ~ 해야되는데! 코드를 다시 수정해보자.

두 번째 시도

1. 컴포넌트에서 사용할 이미지 경로 + 클릭여부를 상태(state)로 설정한다.

const [imageSrc, setImageSrc] = useState("/images/Contents/Icons/circle-check-regular.png"); // 초기 상태는 선택이 되지 않은 상태를 나타내기 위함
const [isClicked, setIsClicked] = useState(false); // 클릭 여부를 state로 관리

2. onClick 이벤트 핸들러 함수를 조건문으로 만든다.

const handleClick = () => {
  if (isClicked) {
    setImageSrc("/images/Contents/Icons/circle-check-regular.png");
      setIsClicked(false); // 초기 상태 false 일 땐 초기 상태 이미지 src
    } else {
      setImageSrc("/images/Contents/Icons/circle-check-solid.png");
      setIsClicked(true); // true일 땐 변경될 이미지 src
    }
};

3. onClick 이벤트 핸들러 전달

return (
  <Image src={imageSrc} onClick={handleClick}/>
  );

💡 state상태를 관리할 변수를 두 가지를 만들고, 이벤트 핸들러 함수를 조건문으로 만들어서 끼워주니까 의도한 바대로 정상 작동하는 것을 확인할 수 있었다. :-)

💭 근데 내 다음 미션은 ... 동영상 시청 여부에 따라 이미지 상태가 변경되게끔 해줘야 하는 것인데... 동영상 시청여부를 따지는 거니까 '선택취소' 기능은 없어도 될 것 같기도 하지만~ 그래도 언젠간 사용될 것 같은 기능이라 잊기 전에 기록해본다. 📓