[포트폴리오-1] 랜덤고양이 페이지 추가

랜덤고양이 페이지

랜덤고양이 이미지를 보여주는 페이지를 추가했습니다.

 

 

cats.container

useEffect 함수를 사용해서 페이지 접속시 고양이 사진을 불러오도록 해뒀습니다.

클릭시 새로운 고양이 사진을 불러올 수 있는 onClickImg 함수를 만들었습니다.

 

 

cats.presenter

img 태그와 button 태그 둘 다 onClick 함수를 적용해줬습니다.

사용자는 이미지를 클릭해도, 버튼을 클릭해도 새로운 고양이 이미지를 얻을 수 있습니다.

 

 

사실 https://cataas.com/  이 사이트의 gif 이미지를 불러오는 api를 사용하고 싶었는데이 사이트는 api가 반환해주는 것이 이미지 자체라 사용하지 않았습니다.useEffect를 사용해보고 싶었는데, api가 이미지 자체를 반환해주면 useEffect 사용 없이 state에 초기값으로 넣어버리면 그만이기 때문입니다.