export, import

export와 import는 JavaScript 모듈 시스템을 사용하여 파일 간에 코드를 구조화하고 공유하는 데 사용

export

- 특정 파일에서 함수, 변수, 클래스 등을 내보낼 수 있다.

✍ 예시 코드

// MyComponent.js
import React from 'react';

// 컴포넌트 정의
class MyComponent extends React.Component {
  // ...
}

// 컴포넌트를 내보냄
export default MyComponent;

import

- 다른 파일에서 내보낸 함수, 변수, 클래스 등을 가져올 수 있다.

✍ 예시 코드

// AnotherComponent.js
import React from 'react';
import MyComponent from './MyComponent'; // MyComponent.js에서 내보낸 것을 가져옴

class AnotherComponent extends React.Component {
  render() {
    return (
      <div>
        <p>This is another component.</p>
        {/* MyComponent를 사용 */}
        <MyComponent />
      </div>
    );
  }
}

export default AnotherComponent;

명명된 export 사용

- 한 파일에서 여러 항목을 내보내고 다른 파일에서 특정 항목만 가져오려면 명명된 export를 사용할 수 있다.

✍ 예시 코드

// utils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// Calculator.js
import { add, subtract } from './utils';

console.log(add(5, 3)); // 8
console.log(subtract(5, 3)); // 2