[리액트] 여러 개의 Component를 export하는 방법

문제

 

Component.js 파일에 함수형 컴포넌트 2개를 선언했다. 이 2개의 컴포넌트를 export하기 위해서 아래와 같이 작성하였는데 에러가 났다

function Component1(props){
    return(
        <div>함수형 컴포넌트1</div>
    );
}

const Component2 =(props) =>{
    return(
        <div>함수형 컴포넌트2</div>
    );
}


export default Component1;
export default Component2;

 에러가 난 이유는 "Only one default export allowed per module"  이기 때문이다. 

 

이를 해결한 코드는 아래와 같다

 

소스코드

import React from 'react';

function Component1(props){
    return(
        <div>함수형 컴포넌트1</div>
    );
}

const Component2 =(props) =>{
    return(
        <div>함수형 컴포넌트2</div>
    );
}


// export default Component1;
// export default Component2;
export  {Component1 , Component2}

 

 

import logo from './logo.svg';
import './App.css';
import {Component1,Component2} from './ComponentEx';

import React from 'react';

class App extends React.Component{
  render(){
    return(
      <div className="App">
        <Component1></Component1>
        <Component2></Component2>
      </div>
    );
  }
}
export default App;

 

 

참고 사이트 :https://stackoverflow.com/questions/46039976/exporting-multiple-modules-in-react-js

exporting multiple modules in react.js