외부 js, css 파일 사용하기

프론트개발을 할 경우 대부분 css, js 파일들은 퍼블리싱 팀에서 전달받는다.

이런 파일들은 일반적으로 cdn을 통해 전달 받는데 대략 아래와 같은 것들이다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">

리액트에서 이를 적용하는 가장 간단한 방법은 Index.html 에 직접 추가하는 것이다.

 

하지만 페이지별로 필요한 js, css 파일이 다를 것이기 때문에

각 화면의 최상위 컴포넌트에 아래와 useEffect 를 선언해서 

index.html에 동적으로 element 를 추가할 수 있다.

useEffect(() => {
  const script = document.createElement('script');
  script.src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js';

  const css = document.createElement('link');
  css.rel = 'stylesheet';
  css.href = 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css';

  document.head.appendChild(script);
  document.head.appendChild(css);

  return () => {
    document.head.removeChild(script);
    document.head.removeChild(css);
  }
}
, []);

console.log(window.jQuery);

이렇게 추가된 js 파일의 함수는 기본적으로 window 객체로 접근할 수 있고

useEffect 에 return 값을 위와 같이 명시했기 때문에

컴포넌트 언마운트시 해당 element 도 제거된다.

 

앱을 실행시켜서 브라우저 개발자 도구를 확인해보면

head 영역에 element 가 정상적으로 추가된 것을 확인할 수 있다.