TypeScript와 React Native로 배우는 모듈 시스템 Import/Export - TypeScript #5

• TypeScript와 React Native로 배우는 모듈 시스템

•   import/export 사용 방법

•   네임스페이스와 모듈의 차이점

이번에는 타입스크립트의 모듈에 대해 정리해 보겠습니다. 프로그래밍을 하다 보면 코드가 점점 길어지고 복잡해지기도 합니다. 예를 들어, React Native로 앱을 만들 때 화면을 구성하는 컴포넌트, 데이터를 가져오는 함수, 스타일을 정의하는 코드가 모두 한 파일에 있다면 나중에 수정하거나 협업할 때 머리가 아플 겁니다.

이를 위해 모듈에 대해 고려해야 합니다. 모듈은 쉽게 말해 코드를 기능별로 쪼개서 파일 단위로 관리하는 방법입니다. 마치 책꽂이에 책을 주제별로 정리하듯 말이죠.

TypeScript와 React Native로 배우는 모듈 시스템

반응형

 

TypeScript와 React Native로 배우는 모듈 시스템

TypeScript에서 모듈은 JavaScript의 모듈 시스템을 기반으로 동작합니다. JavaScript에는 크게 두 가지 모듈 방식이 있는데, 바로 CommonJS와 ES 모듈입니다.

• CommonJS는 `require`와 `module.exports`를 쓰는 방식으로, Node.js에서 흔히 봤을 겁니다.
• ES 모듈은 `import`와 `export` 키워드를 사용하는 최신 표준이에요. React Native는 기본적으로 ES 모듈을 지원하니, 이쪽에 익숙해지는 게 좋습니다.
  
  

  import/export 사용 방법

이제 모듈을 어떻게 주고받는지 구체적으로 알아볼게요. TypeScript에서 모듈을 다룰 때는 `export`로 내보내고, `import`로 가져옵니다. 두 가지 주요 방법이 있는데, 기본(default) export와 이름이 있는(named) export입니다.

먼저 기본 export는 한 파일에서 딱 하나의 기능이나 값을 내보낼 때 사용합니다. React Native에서 컴포넌트를 만들 때 자주 보게 될 방식이에요. 예를 들어, 로그인 화면을 이렇게 작성할 수 있습니다.

// LoginScreen.tsx
import React from 'react';
import { View, Text, Button } from 'react-native';

const LoginScreen = () => {
  return (
    <View>
      <Text>로그인 화면</Text>
      <Button title="로그인" onPress={() => console.log('로그인 시도')} />
    </View>
  );
};

export default LoginScreen;

 

 

 

이 파일을 다른 곳에서 가져올 때는 이렇게 합니다.

// App.tsx
import LoginScreen from './LoginScreen';

const App = () => {
  return <LoginScreen />;
};

 

반면, 이름이 있는 export는 여러 개의 함수나 변수를 내보내고 싶을 때 유용합니다.

예를 들어, 스타일을 관리하는 파일을 만들어볼게요.

// styles.ts
export const buttonStyle = {
  backgroundColor: 'blue',
  padding: 10,
};

export const textStyle = {
  fontSize: 16,
  color: 'white',
};

 

이걸 가져올 때는 중괄호를 사용합니다.

// LoginScreen.tsx
import { buttonStyle, textStyle } from './styles';

React Native 프로젝트에서 흔히 저지르는 실수 중 하나는 파일 경로를 잘못 쓰는 겁니다. `./styles` 대신 `styles`로만 쓰면 TypeScript가 "모듈을 찾을 수 없다"라고 에러를 뱉을 수 있어요. 또, `. ts`나 `. tsx` 확장자를 생략해도 되지만, 경로가 정확한지 항상 확인하세요. 

 

 

  네임스페이스와 모듈의 차이점

네임스페이스는 TypeScript 초창기에 변수나 함수의 이름 충돌을 막기 위해 도입된 기능입니다. 예를 들어, 두 개발자가 각각 `calculate`라는 함수를 만들었는데, 이걸 한 프로젝트에서 쓰면 충돌이 생기겠죠. 네임스페이스는 이런 문제를 해결하려고 코드를 그룹으로 묶어주는 역할을 합니다.

간단한 예제를 보죠.

namespace MathUtils {
  export function add(a: number, b: number): number {
    return a + b;
  }
}

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

 

하지만 요즘은 네임스페이스를 거의 안 써요. 왜냐? 모듈 시스템이 더 편하고 강력하기 때문입니다.

모듈은 파일 단위로 코드를 분리해서 충돌 걱정 없이 관리할 수 있고, `import`/`export`로 필요한 부분만 가져올 수 있습니다. 반면 네임스페이스는 주로 한 파일 안에서 코드를 정리할 때 쓰였고, 파일 간 연결이 약하다는 단점이 있죠.

 

 

그러면 네임스페이스는 언제 써야 할까요?

사실 React Native 같은 최신 프로젝트에선 거의 필요 없습니다. 다만, 오래된 TypeScript 프로젝트를 유지보수하거나, 모듈 시스템을 도입하기 어려운 환경에서 간단히 코드를 정리할 때 유용할 수 있습니다. 예를 들어, 외부 라이브러리의 타입 정의를 확장할 때 가끔 네임스페이스를 보게 될 수도 있어요.