[REACT] svg import했는데 오류가 뜬다.

이미지 파일을 svg로 사용하면 좋다.

대충 이유는

1. 코드로 되어 있기 때문에 수정이 쉽다. 

  > 만약 색상을 바꾸거나 크기를 변경하고 싶다면 코드를 변경하면 된다.

2. 렌더링에 좋다.

  > 코드로 들어가기 때문에..? 렌더링이 될 때 깜박이지 않는다.

3. 깨지지 않는다.

  > svg는 백터타입이라 깨지지않는다.

(구체적인 이유는 검색해보세요)

 

 

그렇다면 어떻게 사용하는가?

이렇게 된 svg가 들어간 버튼을 만들고 싶다면?

 

1. 그냥 코드에 넣어버린다.

export default function PlusButton() {
  return (
    <button>
      <svg
        width="16"
        height="17"
        viewBox="0 0 16 17"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M9.30372 7.18843H15.251V9.75191H9.30372V16.4902H6.57911V9.75191H0.631842V7.18843H6.57911V0.962845H9.30372V7.18843Z"
              fill="#575757"
            />
          </svg>
    </button>
  );
}

이런 방식으로 넣으면 된다.

근데 이렇게 하면 간단한 svg는 괜찮으나 여러개의 svg가 필요하거나 한다면 코드가 번잡스러워진다.

 

 

2. 따로 파일에 분리해서 import한다.

<svg
    width="16"
    height="17"
    viewBox="0 0 16 17"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M9.30372 7.18843H15.251V9.75191H9.30372V16.4902H6.57911V9.75191H0.631842V7.18843H6.57911V0.962845H9.30372V7.18843Z"
      fill="#575757"
    />
</svg>

import { ReactComponent as Icon } from "../../asset/icon.svg";

export default function PlusButton() {
  return (
    <button>
      <Icon />
    </button>
  );
}

이렇게 사용하면 위와 동일한 효과를 낼 수 있다.

여기에서 조금 더 간단하게 만들 수 있는데 이건 다른 사이트에서 찾아보라..

 

" npm install file-loader --save-dev "

 

를 설치해야 하고 웹팩을 수정해야 해서 나는 따로 하지 않았다..

 

 

그나저나 틀리면서 배우는 코딩인 이유가 있다.

import { ReactComponent as icon } from "../../asset/icon.svg";

export default function PlusButton() {
  return (
    <button>
      <icon />
    </button>
  );
}

이 코드는 실행이 되지 않는다.

왜일까?

뭐가 다른걸까??

 

한 가지 다른 점은 

icon과 Icon

 

컴포넌트의 시작은 대문자로 해야 한다.

 

이건 암묵적인 컨벤션이 아닌 오류가 발생하는 꼭 지켜야 하는 규칙이다.

그리고 svg는 여기서 React.FunctionComponent<React.SVGProps<SVGSVGElement>  이다.

그래서 같은 규칙을 적용받는가 소문자로 시작하면 오류가 발생하며 사용되지 않는다.

 

그러니 꼭 정의할때 대문자로 시작해야 한다.