emotion hover image change

시도 했던 것 : 이미지에 마우스 hover시 이미지를 교체 문제점 : emotin에서 img 태그를 이용하여 해당 컴포넌트 이용시 img 태그에 정의되지 않는 필드값으로 props로 전달한다는 에러 발생 <br> 해결 방법 : props로 전달 받아 css로 해결 대신 컴포넌트에 moveOver moveOut 함수를 통해 이미지 변경 위와 같은 방법으로 할 경우 마우스 hover시 url이 변경됨에 따라 이미지 네트워크 요청 다수 발생 (몇 초 정도는 캐싱이 되는 것을 확인했으나 계속 요청) 개선 방법 : 팀원 간 코드 리뷰시, props로 전달하는 방법으로 css로 처리하는 방식을 알려주셔서 해당 방법으로 개선

장점 : 마우스 hover를 할 경우만 이미지 네트워크 요청을 한 번만 수행되고 웹 브라우저 내부적으로 캐싱(?)되어 재사용을 통해 네트워크 비용 절잠

const Img = styled.img<{ imgUrl2: string }>`
  width: 300px;
  height: 300px;
  &:hover {
    content: ${({ imgUrl2 }) => `url(${imgUrl2})`};
  }
`

TypeScript onClick Type 문제

시도 했던 것 : 클릭 이벤트 발생 시, event 객체를 받아 event.target을 통해 해당 컴포넌트 정보 받아오기 문제점 : event 객체에 target 필드가 없을 수도 있다는 TypeScript 에러. (윈도우 객체나 다른 이벤트일 경우) 해결 방법 : 다운캐스팅을 통해 HTMLElement 타입을 명시적으로 알려줌으로서 해당 이슈 해결

const { id } = (e.target as HTMLElement).dataset

위와 비슷한 문제로 useRef 문제도 다운캐스팅을 통해 문제 해결