[React] React에서 모든화면에서 공통함수 또는 제이쿼리 접근하기

//해당파일에서는 react의 useState, useRef, useEffect를 사용하겠다.
import {useState,useRef,useEffect} from 'react';

React에서는 각 파일들을export와 import해서 사용합니다.
 
export : 모듈의 기능을 외부에서 사용할 수 있도록 내보내는 기능
import : export로 내보낸 모듈을 가져오는 기능
 
이번 포스팅에서는 import 하는 방식을 알아볼텐데요.
우선 제일 기본적으로 많이 사용되는 예시 2가지를 보겠습니다.
1. import [변수명] from [경로] 

// pageTop.js를 Top 이라는 변수명을 사용하여 import하겠다.
import Top from './pageTop.js';

이렇게 쓸경우 내가 작업하고 있는 페이지에서 pageTop.js페이지를 가져다 사용하겠다고 할 수 있습니다.
 
2. import {변수명1, 변수명2 ...} from [경로] 

//해당파일에서는 react의 useState, useRef, useEffect를 사용하겠다.
import {useState,useRef,useEffect} from 'react';

이렇게 { } 중괄호에 감싸져서 선언하는 경우는 export파일에서 따로 default로 선언하지 않고 export를 했을 경우에
사용할 때 중괄호를 감싸주어야 합니다.
 
여기까지가 React를 하면서 많이 사용하게 된 방식입니다.
 
그런데 여기서 궁금증이 생깁니다.
 

흔히 많이 쓰이는 제이쿼리나, 공통함수들을 모아놓은 공통js는 매번 화면마다 import를 해야할까요?

 
그렇다면 정말 번거로운 일이 아닐 수가 없겠지요. 그래서 import를 매번 하지 않고서도 각 화면마다 공통js나 제이쿼리등을 접근하는 방식이 있습니다.
 
3. import [변수명] from [경로]
    window.[변수명] = [변수명]

import jQuery from "./lib/jquery-3.3.1.min.js";
window.$ = window.jQuery = jQuery;
import common from "./lib/common.js";
window.common = common;

바로 제일 리엑트 최상단 index.js에 공통으로 쓰일 js를 import를 해놓습니다.
그리고나서 window객체에 올려두게 된다면 굳이 import를 하지 않아도

접근가능하여 해당 파일의 함수들을 사용할 수 있습니다.

react 페이지에서 제이쿼리 접근