[React] props를 사용하여 display로 아이콘 표시

김나나·2024년 4월 25일

React

목록 보기
20/29

포트폴리오를 제작하다보니, 각 포폴 작업을 올리는 플랫폼이 각기 달라서 아이콘을 다르게 지정해줘야 하는 경우가 생겼다.
배열을 사용하고 있었기 때문에 당연히 map함수를 이용했는데, 아이콘 이미지를 public 경로로 가져오는 경우라면 쉽게 배열 안에 이미지 경로를 넣어주면 되는 거였으나.. 아이콘은 죄다 src에 assets 파일을 만들어 넣어뒀었기 때문에(ㅜㅜ).. 어떻게 각기 다른 아이콘을 표시할지 고민하던 끝에 props를 이용해보자는 생각이 번뜩 떠올라 넣어봤는데 잘 된다..!
혹여나 다음 번에도 이런 상황이 생길 것 같아.. 미래의 나를 위해 작성해두는 글..!!

  1. IconWrap 속에 필요한 아이콘이나 이미지 등을 넣은 코드를 넣어준다

이 경우, props로 값을 전달하기 위해 imgStyle을 넣어주었고, 배열에 있는 값을 받아오게 만들어줬다.

  1. display에 none과 block을 이용해서 아이콘을 표시할 계획으로, props를 사용해준다!
  1. display에 어떤 속성을 넣을지 적어주기 위해 필요한 아이콘이 있는 곳에는 block을, 아닌 곳에는 none을 사용하여 숨겨주었다.

  2. 이후 확인해보면 원하던 대로 아이콘이 잘 떠있음을 확인할 수 있다!


그런데 이렇게 하면 생각보다 코드가 길어지는 듯 하기도 해서..
추후에 더 효율적인 방법이 있는지 공부가 필요할 것 같다.

profile
10분의 정리로 10시간을 아낄 수 있다는 마음으로 글을 작성하고 있습니다💕

0개의 댓글