리액트 import, from, export 사용법

📌 초급 개발자를 위한 import와 from 사용법 완벽 정리

React에서 자주 사용되는 import와 from 문법을 쉽게 설명해줄게! 🚀
이 개념을 알면 React 프로젝트에서 모듈을 가져와서 사용하는 방법을 완전히 이해할 수 있어!

---

1️⃣ import와 from은 뭐야?

✅ 기본 개념

import와 from은 JavaScript의 ES6(ECMAScript 2015)에서 추가된 모듈 시스템이야.
📌 React에서 필요한 기능이나 파일을 가져올 때 사용됨.

import React from 'react';

✅ import React → React라는 기능을 가져옴
✅ from 'react' → react 라이브러리에서 가져온다는 의미

📌 즉, from은 "어디서 가져오는지"를 나타냄!

---

2️⃣ import 사용법 2가지

📌 import는 두 가지 방식으로 사용 가능해!

import 방식	사용법	설명
1. 기본 가져오기 (Default Export)	import X from '파일경로'	한 파일에서 하나의 기능만 가져올 때
2. 이름을 지정해서 가져오기 (Named Export)	import { X, Y } from '파일경로'	한 파일에서 여러 개의 기능을 가져올 때

---

3️⃣ Default Export (기본 내보내기)

📌 하나의 파일에서 하나의 기능만 내보낼 때 사용
📌 import할 때 이름을 마음대로 변경할 수 있음!

✅ 예제: App.js에서 기본 내보내기

// App.js (기능을 내보내는 파일)
function App() {
    return <h1>Hello, React!</h1>;
}

export default App; // 기본 내보내기

✅ 예제: index.js에서 가져오기

// index.js (기능을 가져오는 파일)
import MyComponent from './App'; // App을 MyComponent로 이름 변경 가능!

console.log(MyComponent); // App 함수가 출력됨

✅ export default App; → 기본 내보내기
✅ import MyComponent from './App'; → 가져올 때 이름 변경 가능!

---

4️⃣ Named Export (이름을 지정해서 가져오기)

📌 한 파일에서 여러 개의 기능을 내보낼 때 사용
📌 import할 때 { }를 사용하여 이름을 정확히 일치시켜야 함!

✅ 예제: utils.js에서 여러 개 내보내기

// utils.js (여러 개의 기능을 내보내는 파일)
export function add(a, b) {
    return a + b;
}

export function multiply(a, b) {
    return a * b;
}

✅ 예제: index.js에서 가져오기

// index.js (여러 개의 기능을 가져오는 파일)
import { add, multiply } from './utils';

console.log(add(2, 3));       // 5
console.log(multiply(2, 3));  // 6

✅ export function add() → Named Export
✅ import { add, multiply } from './utils' → 이름이 정확히 일치해야 가져올 수 있음!

---

5️⃣ Default Export vs Named Export 차이점

비교 항목	Default Export	Named Export
내보내는 개수	파일당 1개만 가능	여러 개 가능
가져올 때 이름 변경 가능?	✅ 가능	❌ 불가능 (정확한 이름 필요)
사용법	export default X;	export { X, Y };
가져오기	import AnyName from '파일경로';	import { X, Y } from '파일경로';

✅ Default Export → 하나만 내보낼 때
✅ Named Export → 여러 개 내보낼 때

---

6️⃣ React에서 자주 쓰는 import 예제

✅ 1. React 기본 모듈 가져오기

import React from 'react';

✅ React 라이브러리에서 React 기능을 가져옴.

✅ 2. useState 같은 React 기능 가져오기

import { useState, useEffect } from 'react';

✅ { }를 사용하면 Named Export 방식!
✅ React에서 useState, useEffect를 개별적으로 가져옴.

✅ 3. CSS 파일 가져오기

import './App.css';

✅ CSS 파일도 import로 가져올 수 있음.

✅ 4. 이미지 가져오기

import logo from './logo.png';

✅ 이미지 파일을 가져와서 <img src={logo} />처럼 사용할 수 있음.

---

🎯 최종 정리

개념	설명	예제
import	모듈을 가져올 때 사용	import React from 'react';
from	가져올 모듈의 위치 지정	'react', './App'
Default Export	한 파일에서 하나만 내보내기	export default App;
Named Export	여러 개 내보내기 가능	export { add, multiply };
CSS 가져오기	CSS 파일을 import 가능	import './App.css';
React 기능 가져오기	Hook을 사용할 때 필요	import { useState } from 'react';

✅ 이제 import와 from을 확실히 이해했어!
🚀 React 프로젝트에서 다양한 기능을 가져올 때 활용하면 돼!

📌 export란? (초급 개발자를 위한 쉬운 설명)

✅ export는 JavaScript에서 "내보내기"를 하는 키워드야.
✅ 하나의 파일에서 작성한 코드를 다른 파일에서도 사용할 수 있도록 공유(모듈화) 하는 역할을 해!

---

1️⃣ export를 왜 사용할까?

React에서 여러 파일을 나눠서 개발할 때, 특정 기능(컴포넌트, 함수, 변수 등)을 다른 파일에서도 사용할 수 있도록 공유해야 해.
이때 사용하는 것이 바로 export야! 🚀

export const name = "React"; // name 변수를 내보내기
export function greet() {    // greet() 함수를 내보내기
    return "Hello!";
}

✅ 이렇게 내보낸 기능을 다른 파일에서 import로 가져올 수 있음!

---

2️⃣ export의 종류

export에는 두 가지 방법이 있어!

export 방식	사용법	가져올 때 (import)
1. Default Export (기본 내보내기)	export default	import X from '파일'
2. Named Export (이름을 지정해서 내보내기)	export { X, Y }	import { X, Y } from '파일'

✅ 차이점:
1️⃣ Default Export → 하나의 파일에서 한 개만 내보낼 수 있음!
2️⃣ Named Export → 여러 개의 기능을 내보낼 수 있음!

---

3️⃣ Default Export (기본 내보내기)

📌 한 파일에서 하나의 기능만 내보낼 때 사용.
📌 import할 때 이름을 자유롭게 변경할 수 있음!

✅ 예제: App.js에서 기본 내보내기

// App.js (기능을 내보내는 파일)
function App() {
    return <h1>Hello, React!</h1>;
}

export default App; // 기본 내보내기

✅ 예제: index.js에서 가져오기

// index.js (가져오는 파일)
import MyComponent from './App'; // App을 MyComponent로 이름 변경 가능!

console.log(MyComponent); // App 함수가 출력됨

✅ export default App; → 기본 내보내기
✅ import MyComponent from './App'; → 이름을 바꿔도 동작함!

---

4️⃣ Named Export (이름을 지정해서 내보내기)

📌 한 파일에서 여러 개의 기능을 내보낼 때 사용.
📌 가져올 때 { }를 사용하여 이름을 정확히 일치시켜야 함!

✅ 예제: utils.js에서 여러 개 내보내기

// utils.js (여러 개의 기능을 내보내는 파일)
export function add(a, b) {
    return a + b;
}

export function multiply(a, b) {
    return a * b;
}

✅ 예제: index.js에서 가져오기

// index.js (여러 개의 기능을 가져오는 파일)
import { add, multiply } from './utils';

console.log(add(2, 3));       // 5
console.log(multiply(2, 3));  // 6

✅ export function add() → Named Export
✅ import { add, multiply } from './utils' → 이름이 정확히 일치해야 가져올 수 있음!

---

5️⃣ Default Export vs Named Export 차이점

비교 항목	Default Export	Named Export
내보내는 개수	파일당 1개만 가능	여러 개 가능
가져올 때 이름 변경 가능?	✅ 가능	❌ 불가능 (정확한 이름 필요)
사용법	export default X;	export { X, Y };
가져오기	import AnyName from '파일경로';	import { X, Y } from '파일경로';

✅ Default Export → 하나만 내보낼 때
✅ Named Export → 여러 개 내보낼 때

---

6️⃣ React에서 export를 활용한 예제

✅ 1. React 컴포넌트 기본 내보내기

// Button.js
function Button() {
    return <button>Click me!</button>;
}

export default Button; // 기본 내보내기

📌 App.js에서 가져오기

// App.js
import Button from './Button'; // 기본 내보내기는 이름 변경 가능!

function App() {
    return (
        <div>
            <h1>Welcome!</h1>
            <Button />  {/* 가져온 Button 컴포넌트 사용 */}
        </div>
    );
}

export default App;

---

✅ 2. React에서 여러 개 내보내기 (Named Export)

// utils.js
export function formatDate(date) {
    return date.toISOString().slice(0, 10);
}

export function getRandomNumber() {
    return Math.floor(Math.random() * 100);
}

📌 App.js에서 가져오기

// App.js
import { formatDate, getRandomNumber } from './utils';

console.log(formatDate(new Date())); // 날짜 출력
console.log(getRandomNumber());      // 0~99 사이의 랜덤 숫자 출력

---

🎯 최종 정리

개념	설명	예제
export	파일에서 기능을 내보내기	export default App;
export default	하나의 기능만 내보내기	export default Button;
export { }	여러 개의 기능을 내보내기	export { add, multiply };
import (기본)	Default Export 가져오기	import X from '파일';
import (이름 지정)	Named Export 가져오기	import { X, Y } from '파일';

✅ 이제 export가 무엇인지, 어떻게 사용하는지 확실히 이해했어!
🚀 React 프로젝트에서 컴포넌트와 유틸리티 함수를 관리할 때 꼭 필요한 개념이야!