[React] import 사용법

import 방법은 여러가지가 있지만 크게 두가지로 나누면
Named Import, Default Import 방법이 있습니다.

먼저 import 작성을 보면 이런식으로 3가지 방식으로 가져오는걸 본적이 있으실 겁니다.

import 컴포넌트0 from './component.js';
import { 컴포넌트1, 컴포넌트2 } from './component.js';
import 컴포넌트0, { 컴포넌트1, 컴포넌트2 } from './component.js';

왜 다 같은 컴포넌트인데 어떤건 대괄호 안에 넣어서 부르고 어떤건 그냥 써서 불러오고 하는걸까요?
아래의 Named Import, Default Import 보시면 왜 이렇게 불러오시는지 이해가 되실겁니다.
그밖의 나머지 불러오는 형식도 정리해 보았습니다. 참고만해도 좋을꺼 같네요.

---

1. Named Import (이름을 지정한 가져오기)

// component.js
export function 컴포넌트1(){
	return <button>Hello</button>;
}

export const 컴포넌트2 = () => <button>Hello</button>;

// app.js
import { 컴포넌트1, 컴포넌트2 } from './component.js';

function App() {
	return{
		<div>
			<컴포넌트1 />
			<컴포넌트2 />
		</div>
	};
}

 

2. Default Import (기본 가져오기)

// component.js
export default function 컴포넌트1(){
	return <button>Hello</button>;
}


or


function 컴포넌트1(){
	return <button>Hello</button>;
}

export default 컴포넌트1;

// app.js
import 컴포1 from './component.js'; // 이름은 마음대로 정할 수 있음

function App() {
	return{
		<div>
			<컴포1 />
		</div>
	};
}

 

---

 

3. Mixed Import (혼합 가져오기 - Named + Default)

// component.js
export default function 컴포넌트1(){
	return <button>Hello</button>;
}

export const 컴포넌트2 = () => <button>Hello</button>;

// app.js
import 컴포1, { 컴포넌트2 } from './component.js'; // 컴포넌트1의 이름은 마음대로 정할 수 있음

function App() {
	return{
		<div>
			<컴포1 />
			<컴포넌트2 />
		</div>
	};
}

이런생각을 가지시는 분들이 있을꺼 같습니다. 한 파일에 export default 가 2개 있으면 어떻게 되는가?? 하지만
하나의 모듈(file)에는 default export가 오직 하나만 가능합니다. 그래서 default 인듯...

4. Namespace Import (네임스페이스 가져오기)

// component.js
export default function 컴포넌트1(){
	return <button>Hello</button>;
}

export const 컴포넌트2 = () => <button>Hello</button>;

export const 컴포넌트3 = () => <button>Hello</button>;

// app.js
import 컴포넌트1, * as Comp from './component.js'; // 컴포넌트1의 이름은 마음대로 정할 수 있음

function App() {
	return{
		<div>
			<컴포넌트1 />
			<Comp.컴포넌트2 />
			<Comp.컴포넌트3 />
		</div>
	};
}

Namespace Import는 ES6 모듈 문법에서 import * as 이름 from '모듈' 형태를 말합니다.
즉, 모듈 안의 모든 export를 한 번에 가져와서 특정 이름(이름) 아래에서 접근할 수 있게 하는 방식입니다.
(* export default는 따로 불러온다)

 

5. Side Effect Import (부수 효과 가져오기)

import './styles.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import './some-module.js';

모듈에서 export를 가져오는 것이 아니라, 모듈을 불러오는 것 자체로 부수 효과(사이드 이펙트)를 발생시키는 import를 말합니다.
주로 CSS, 폴리필, 전역 설정, 초기화 코드 등을 불러올 때 사용됩니다.
더 단순하게 얘기하면 그냥 필요한 파일을 연결할때 사용합니다.

---

기타 import 방식입니다. 주로 사용하는 import 방식은 윗부분이겠네요.
아래 내용은 참고 바랍니다.

6. Dynamic Import (동적 가져오기)

// 컴포넌트 지연 로딩
const LazyComponent = React.lazy(() => import('./LazyComponent'));

// 런타임에 동적으로 가져오기
const loadModule = async () => {
  const module = await import('./module');
  return module.default;
};

7. Conditional Import (조건부 가져오기)

// 개발/프로덕션 환경에 따라
if (process.env.NODE_ENV === 'development') {
  import('./devTools').then(devTools => {
    // 개발 도구 사용
  });
}

 

8. Re-export (재내보내기)

// index.js에서 여러 컴포넌트를 한번에 내보내기
export { default as Component1 } from './Component1';
export { default as Component2 } from './Component2';
export * from './utils';

---

각 방식은 상황에 따라 적절히 선택해서 사용하면 됩니다. 가장 일반적으로는 1. Named Import 와 2. Default Import 를 조합해서 사용하는 경우가 많습니다.

 

감사합니다.