TIL 리엑트에서 SVG 사용하기

dory·2021년 6월 13일
0

TIL_react

목록 보기
5/5
post-thumbnail

✍️ 들어가며

디자인 시안을 받고, 내가 선택할 수 있는 이미지 파일은 PNG, WebP, SVG 이렇게 세 가지였다.

처음에는 용량을 고려하지 않고 가장 익숙했던 png 파일로 작업을 시작했다.

그리고 마주한 두 가지 문제점!

  1. 화면을 확대할 수록 이미지가 선명하지 못했고,
  2. 이미지 색상을 변경하기 위해서는 파일 자체를 바꿔야 했다.

물론 모바일 화면에 맞췄던 이미지가 데스크 탑 사이즈로 확대되니 이미지가 깨질 수 밖에 없었고, 색이 다른 이미지 파일이 이미 있었기에 사실 큰 문제는 아니었다.

하지만 아이콘 색상을 바꾸기 위해 이미지 파일 자체를 변경해야한다는 점이 자꾸 걸렸다.

그리하여 svg 사용하기 도전!


✨ SVG의 장점

용량이 작고, 백터 이미지라는 점에서 아무리 확대해도 이미지가 깨지지 않으며, 동적으로 스타일링이 가능하다.
-> SVG는 XML로 작성되어 CSS와 JS를 통해 접근이 가능하다!✨

✨ SVG 사용하기

1 . img tag로 사용하기 (비추)

  • 이미지 태그의 경로를 svg파일로 설정하는 방법으로 사용 가능하다.
  • 다만 이미지 파일로 사용하는 것이기에 동적으로 스타일링을 줄 수 없다.

2. ReactComponent로 사용하기

  • create-react-app으로 시작했다면 별도의 라이브러리 설치없이 ReactComponent로 사용 가능하다.

Step 1
src 폴더 안에 assets폴더를 생성하고 svg파일을 넣는다.

-> 이유는 모르지만 public안의 images 폴더에 있는 svg는 사용이 안된다..!

Step 2

import { ReactComponent as `이름` } from `경로`;

위와 같이 컴포넌트로 import하여 사용할 수 있는데, 자신이 원하는 컴포넌트 명으로 쓸 수 있다.

Step 3
해당 SVG파일에서 접근하고 싶은 속성 값을 'current'로 바꿔준다.

-> fill은 border 안쪽의 색상값, stroke는 border 색상값을 의미한다.
-> 선 두께는 stroke-width!

Step 4
current로 설정한 모든 속성을 props로 전달하여 사용 가능하다.
-> 다른 컴포넌트와 마찬가지로 state에 따라 스타일을 부여할 수도, 이벤트를 걸 수 도 있다.
-> StyledComponent를 사용한다면, 다음과 같이 사용할 수 도 있다.

const StyledProfile = styled(Profile)`
  background-color : red;
`;

참고

0개의 댓글