[REACT] IMPORT / EXPORT

 

 

Component

Component 파일 안에서 선언한 다른 Component를 import / export

- class 앞에 export 키워드 작성

 

- Bpp.js 안에 Cpp.js, Dpp.js 선언

import React, { Component } from 'react';

class Bpp extends Component {
    render() {
        return (
            <div>
            <h1>Bpp</h1>  
            </div>
        );
    }
}

// 다른 파일에서 Bpp안에 있는 Cpp를 사용하고 싶을 때, 앞에 export 작성
// 아니면 'Cpp' is not exported from './components/bpp.js' 오류 뜸
export class Cpp extends Component {
    render() {
        return (
            <div>
            <h1>Cpp</h1>  
            </div>
        );
    }
}

export class Dpp extends Component {
    render() {
        return (
            <div>
            <h1>Dpp</h1>  
            </div>
        );
    }
}

export default Bpp;

 

- App.js

import React, { Component } from 'react';
import Bpp, { Cpp, Dpp } from './components/bpp.js';

class App extends Component {
  render() {
    return (
      <div>
        <Bpp></Bpp>
        <Cpp></Cpp> 
      </div>
    );
  }
}

export default App;

 

 

Function

함수를 다른 파일에 작성한 후 import / export

 

- fpp.js

// export : 끌여다 쓰기 위함

export function f2() {
    console.log("f2");
}

export function f3() {
    console.log("f3");
}

 

- App.js

import React, { Component } from 'react';
import * as Fpp from './components/fpp.js'; // 함수

class App extends Component {
  render() {
    Fpp.f2();
    Fpp.f3();
    return (
      <div>

      </div>
    );
  }
}

export default App;

 

 

Component + Function

Component 파일 안에서 선언한 다른 Component + Function import / export

 

- gpp.js

import React, { Component } from 'react';

class Gpp extends Component {
    render() {
        return (
            <div>
                <h1>Gpp</h1>
            </div>
        );
    }
}

export function f4() {
    console.log("f4");
}

export class Hpp extends Component {
    render() {
        return (
            <div>
                <h1>Hpp</h1>
            </div>
        );
    }
}

export default Gpp;

 

- App.js

import React, { Component } from 'react';
import Gpp, { Hpp } from './components/gpp.js';
import * as GppFunc from './components/gpp.js';

class App extends Component {
  render() {
    GppFunc.f4();
    return (
      <div>
        <Gpp></Gpp>
      </div>
    );
  }
}

export default App;

 

 

Component in Folder

각각 다른 폴더 안에 있는 Component 파일 import / export

 

- sub1/ipp.js

import React, { Component } from 'react';
import Jpp from '../sub2/jpp.js'

class Ipp extends Component {
    render() {
        return (
            <div>
                <h1>Ipp</h1>
                <Jpp></Jpp>
            </div>
        );
    }
}

export default Ipp;

 

- sub2/jpp.js

import React, { Component } from 'react';

class Jpp extends Component {
    render() {
        return (
            <div>
                <h1>Jpp</h1>
            </div>
        );
    }
}

export default Jpp;

 

- App.js : ipp.js를 jpp.js가 받고, App.js에서는 jpp.js만 import해도 두개 다 불러와짐

import React, { Component } from 'react';
import Ipp from './components/sub1/ipp.js';

class App extends Component {
  render() {
    return (
      <div>
        <Ipp></Ipp>
      </div>
    );
  }
}

export default App;

 

 

Folder

Folder 자체를 import / export

- folder안에 index.js 파일이 있어야 가능

 

- sub3/index.js

import React, { Component } from 'react';
import Spp from './spp.js';

class Apple extends Component {
    render() {
        return (
            <div>
                <h1>Sub3</h1>
                <Spp></Spp>
            </div>
        );
    }
}

export default Apple;

 

- spp.js : sub3안에 있는 파일들 중 하나

import React, { Component } from 'react';

class Spp extends Component {
    render() {
        return (
            <div>
                <h1>Spp</h1>
            </div>
        );
    }
}

export default Spp;

 

- App.js

import React, { Component } from 'react';
import Sub3 from './components/sub3';

class App extends Component {
  render() {
    return (
      <div>
        <Sub3></Sub3>
      </div>
    );
  }
}

export default App;