페이지에 나열된 이미지중에서 하나를 클릭하면 커서가 해당 이미지로 변하는 기능을 제공하는 페이지를 제작한다.

기능

• 이미지 클릭 후 커서 이미지 변환

사용 기술

• react
• react-dom
• typescript

GitHub 링크

https://github.com/jyc-coder/mouse-cursor-change

헤로쿠 배포 링크

https://mouse-cursor-change-jyc.herokuapp.com/

문제 발생 및 해결

• useEffect 테스트겸 console.log를 하면 콘솔에 2개가 나타나는 현상

index.tsx에서 app이 <React.StrictMode>태그로 감싸져 있으면 개발모드에서 (개발 단계시 오류를 잘 잡아내기 위해서) 두번씩 렌더링을 진행한다.

StrictMode는 리액트에서 제공하는 검사도구 개념이며, 개발 모드일 때만 디버그를 하고 해당 태그로 감싸져 있는 부분은 자손까지 검사를 진행한다.
안전하지 않은 생명주기를 가진 컴포넌트, 권장되지 않는 부분, 배포후 문제가 될만한 이슈를 따위를 미리 잡아내는 모드이다.

참고 링크 : https://velog.io/@hyes-y-tag/React-useEffect%EA%B0%80-%EB%91%90%EB%B2%88-%EC%8B%A4%ED%96%89%EB%90%9C%EB%8B%A4%EA%B3%A0

• 커서 이미지를 변환 시킨건 좋은데 다른 버튼을 클릭하면 변화가 없음.

커서가 커서 이미지를 클릭하고 있는 것이기 때문에 이벤트가 발생 하지 않은 것,
img의 zIndex의 값을 -1로 수정하면 이벤트 발생은 하지만 이미지가 아래로 덮이는 현상 때문에 미관상 좋지 않음, 따라서 pointerEvents: "none"을 추가해서 zIndex를 설정하지 않아도 클릭되는 이벤트 자체를 무시하게 만들어서 클릭해도 이벤트가 발생하게함