토이프로젝트: svg 사용하기

좋아요 아이콘을 만들기 위해 svg를 사용한 내용을 포스팅한다.

svg (Scalable Vector Graphics)

• 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식
• 벡터 그래픽스이므로 확대/축소를 해도 화질에 변화가 없다.
  • 기존 jpg, png, gif, bmp는 레스터(Raster) 방식이라고 한다.
  • 즉 벡터 그래픽스는 수학 계산을 하여 이미지를 그리는 것이라 한다.
• SVG 이미지는 필요한 모든 선과 모양을 직접 일일이 지정하거나, 이미 존재하는 래스터 이미지를 수정하거나, 이 두 가지 방법을 조합해서 만들 수 있다.

요구사항

좋아요 아이콘을 svg로 컴포넌트에서 출력하고 누르면 svg 색깔을 변경하는 것이었다.
svg를 react로 사용하게 해주는 svgr은 이미 세팅된 상태인데, 동적으로 svg의 색을 변경시키는 방식과 원리에 대해 조사해보았다.

• 좋아요 아이콘 svg 추가
• 좋아요 아이콘 event handling

좋아요 아이콘 만들기

• 좋아요 svg 추가
  • 먼저 벨로그의 svg를 참조해온 리소스는 이렇다.
  • path: path 요소는 정해진 도형이 아닌 자유롭게 선으로 다양한 형태를 그리는 방식이다.
    • svg는 보통 텍스트로 그리지 않고 특정 프로그램으로 리소를 만든다고 한다.

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <path fill="currentColor" d="M18 1l-6 4-6-4-6 5v7l12 10 12-10v-7z"/>
</svg>

• 동적으로 사용하기
  • 그리고 코드는 단순하게 component에서 ReactComponent로 사용하게 한 LikeIcon에게 prop처럼 전달한다.

import styled from '@emotion/styled';
import React, { useEffect, useMemo, useState } from 'react';
import CircleButton from '../../atoms/CircleButton';
import StickyComponent from '../../atoms/StickyComponent';
import LikeIcon from '../../../assets/likeIcon.svg';

interface PostLikeSharebuttonProps {
  likeCount: number;
  liked: boolean;
}

const PostLikeShareButton = (prop: PostLikeSharebuttonProps) => {
  const [liked, setLiked] = useState(prop.liked);

  const handleLikeToggle = () => {
    setLiked(!liked);
  };

  return (
    <PostLikeShareStickyBox top={10} left={1}>
      <CircleButton onClick={handleLikeToggle} active={liked}>
        <LikeIcon color={liked ? 'red' : 'gray'} />
      </CircleButton>
      <div>{prop.likeCount}</div>
      <CircleButton />
    </PostLikeShareStickyBox>
  );
};

const PostLikeShareStickyBox = styled(StickyComponent)`
  padding: 0.5rem;
  height: 6.5rem;
  flex-direction: column;
  @media (max-width: 1024px) {
    display: none;
  }
`;

export default PostLikeShareButton;

• currentColor는 동적으로 color를 줄 수 있다

  • fill, stroke, stop-color, flood-color, lighting-color

• 다른 방식도 있는데 'current'로 속성을 직접 지정해줄 수 있다.

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <path fill="current" d="M18 1l-6 4-6-4-6 5v7l12 10 12-10v-7z"/>
</svg>

  return (
    <PostLikeShareStickyBox top={10} left={1}>
      <CircleButton onClick={handleLikeToggle} active={liked}>
        <LikeIcon fill={liked ? 'red' : 'gray'} />
      </CircleButton>
      <div>{prop.likeCount}</div>
      <CircleButton />
    </PostLikeShareStickyBox>
  );

• TODO
  • 내가 좋아요 누른 글을 기억하는 방안
    • scheme가 없군효
  • like count
    • DB에 있음
  • 캐쉬 된 서버 데이터가 지워졌는데 왜 뜨는걸까?

스케일러블 벡터 그래픽스
SVG: Scalable Vector Graphics
SVG Color
SVG CurrentColor 설명