(React) html, css, 외부 javascript화일, 구글폰트 사용하기

1. CSS 

    준비된 CSS 화일을 폴더에 둔다. 예) my.css

    React Component 화일에서 아래와 같이 임포트

import "./my.css"

 

2. 구글 폰트 URL 사용

    CSS 화일의 선두에 아래와 같이 임포트

@import url("https://fonts.googleapis.com"); @import url("https://fonts.gstatic.com"); @import url("https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&family=Roboto:wght@700&display=swap");

 

3. HTML

   return ( )  에 준비된 HTML body 태그 내부를 붙여넣기 

   css 참조는 class="xxxx" 또는 React 방식의 className="xxxx" 도 무방

 

4. 외부 javascript 화일

import React, { useEffect } from 'react'; function MyComponent() {   useEffect(() => {     const script = document.createElement('script');     script.src = "https://externalwebsite.com/externalFile.js";     script.async = true;     document.body.appendChild(script);     return () => {       document.body.removeChild(script);     }   }, []);   return (     // JSX goes here   ); }

맨처음 렌더링시에 새로운 스크립트 엘리멘트를 생성하고, 컴포넌트가 언마운트시(return() =>)에 제거