[React] 컴포넌트 가져오기 및 내보내기

jjinny_0609 2023. 11. 15. 18:15

728x90

코드의 별개 파일로 분리하기 - 모듈화

리액트 애플리케이션을 개발할 때, 한 파일에 모든 코드를 넣는 것은 권장되지 않습니다. 대신, 각 컴포넌트를 별도의 파일로 분리하여 코드를 모듈화하는 것이 좋습니다. 이번 시간에는 컴포넌트를 가져오고 내보내는 방법에 대해 알아보겠습니다.

1. 컴포넌트를 별도의 파일로 분리하기

2. 컴포넌트 가져오기

컴포넌트를 별도의 파일로 분리하려면, 해당 컴포넌트를 새로운 파일에 정의하고, 필요한 곳에서 가져와야 합니다. 예시로 Greeter 컴포넌트를 Greeter.js 파일로 분리해보겠습니다.

// Greeter.js
function Greeter() {
  return <h1>Hello!</h1>;
}

export default Greeter;

3. 여러 개의 컴포넌트 가져오기

여러 개의 컴포넌트를 가져올 때는 중괄호를 사용하여 가져옵니다. Dog 컴포넌트를 Dog.js 파일로 만들고, App.js에서 여러 컴포넌트를 가져오는 예시를 살펴봅시다.

// Dog.js

function Dog() {
  return (
    <div>
      <h2>WOOF!!!</h2>
      <p>Hello!</p>
    </div>
  );
}

export default Dog;

// App.js
import Greeter from './Greeter';
import Dog from './Dog';

export default function App() {
  return (
    <div>
      <Greeter />
      <Dog />
    </div>
  );
}

4. 함수 또는 변수 가져오기

컴포넌트 외에도 함수나 변수를 가져올 수 있습니다. 이때는 중괄호를 사용합니다.

// MathUtils.js
export function add(x, y) {
  return x + y;
}

// App.js
import { add } from './MathUtils';

export default function App() {
  return (
    <div>
      <p>Result: {add(3, 4)}</p>
    </div>
  );
}

5. 함수 선언문과 함수 표현식의 차이

export default function App()

이 형태는 함수 선언문을 사용한 것입니다.
함수 선언문은 런타임 이전에 호이스팅(hoisting)이 발생합니다. 즉, 코드 상단으로 끌어올려지기 때문에 함수를 선언하기 전에도 호출이 가능합니다.
사용 시에는 그냥 App()과 같이 호출할 수 있습니다.

// App.js
export default function App() {
  return <div>Hello, World!</div>;
}

// 다른 파일에서 사용
import App from './App';

// 사용
<App />

export default App;

이 형태는 함수 표현식을 사용한 것입니다.
함수 표현식은 선언과 할당이 동시에 이뤄지며, 호이스팅이 발생하지 않습니다. 따라서 선언 이전에 호출하면 오류가 발생합니다.
사용 시에는 반드시 App()이 아니라 App으로만 호출 가능합니다.

// App.js
const App = () => {
  return <div>Hello, World!</div>;
};

export default App;

// 다른 파일에서 사용
import App from './App';

// 사용
<App />

일반적으로는 두 가지 형태 중 하나를 선택하여 사용할 수 있습니다. 함수 선언문 형태는 가독성이 높고, 코드 상단에서 어디에 있는지 명확하게 알 수 있어 좋습니다. 함수 표현식 형태는 함수를 변수에 할당하므로, 필요한 경우 더 복잡한 로직을 추가하기도 편리합니다. 선택은 주로 코드 스타일이나 프로젝트의 규칙에 따라 다를 수 있습니다.

6. 컴포넌트 이름과 파일 이름 일치시키기

컴포넌트 파일의 이름과 컴포넌트의 이름을 일치시키는 것이 좋습니다. 이렇게 하면 코드를 이해하기 쉽고 협업 시에 혼동을 줄일 수 있습니다.

컴포넌트를 파일로 분리하고 가져오는 것은 리액트 애플리케이션 개발에서 중요한 부분입니다. ES6 모듈 문법을 활용하여 각 모듈(파일)을 구성하면 코드를 보다 모듈화하고 유지보수하기 쉽게 만들 수 있습니다. 계속해서 다양한 컴포넌트를 만들고 필요한 곳에서 가져와 사용해보세요.

728x90