[React] 외부 Component 호출 및 함수 호출

[해당 포스트는 개인적으로 공부를 하고 차후에 참고용으로 하고자 작성한 것입니다.
따라서 잘못된 부분이나 부족한 부분이 있을 수 있기에 참고하시기 바랍니다.]

이번 시간엔 외부 Component를 참조하거나, 외부 함수를 호출하는 방법에 대해서 알아보자.

 

Component Import

 

우선 3개의 Component를 생성해보자.

Main인 App.js 이외에 Bpp.js, Cpp.js를 생성하자.

 

App.js

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>

      </div>
    );
  }
}

export default App;

 

Bpp.js, Cpp.js

Class에서 App를 Bpp와 Cpp로 변경하고 export default 자리에 각 Component명에 맞게 변경한다.

 

우선 Main에서 각 Component를 가져와 참조하도록 하자.

저번 시간에 외부 Component나 CSS를 참고할 때 Import문을 사용했다.

다음과 같은 형태로 외부 Component를 참고해보자.

 

import 'Name' from ''Location'';

 

만약 Bpp를 참조하고 싶다면 다음과 같이 작성하면 된다.

 

import Bpp from './Bpp.js';

 

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

class App extends Component {
  render() {
    return (
      <div>

      </div>
    );
  }
}

export default App;

 

import ~ from ~;을 사용하면 가장 처음엔 export default로 선언된 Component를 가져올 수 있다.

export Component를 JSX에서 호출하는 방법은 다음과 같다.

 

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

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

export default App;

 

HTML 태그와 같이 <Component></Component> 또는 <Component/>와 같이 호출하면 된다.

 

만약에 default Component 외에 다른 Component가 있다고 가정하자.

예를 들어 Bpp.js에 Dpp.js라는 새로운 Component가 새로 추가가 되었다.

 

import React, { Component } from 'react';

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

class Dpp extends Component {
    render() {
        return (
            <div>

            </div>
        );
    }
}

export default Bpp;

 

이것을 호출하는 방법도 동일하다.

 

사용하기에 앞서 기본 import 된 react를 한번 보자.

기본적으로 rcc로 새로운 Component를 생성하면 다음과 같은 Component가 기본적으로 import 된 걸 알 수 있었다.

 

import React, { Component } from 'react';

 

여기선 react에 존재하는 React Component와 Component에 관한 Component를 가져오는 걸 알 수 있다.

이와 맞게 하나의 Component에 존재하는 다른 Component를 호출할 땐 { Component } 형태로 호출하면 된다.

 

import default Component, { Another Component } from 'Location' ; 

 

!주의 외부에서 사용하기 위해선 호출하고자 하는 Component는 export 키워드를 추가해줘야 한다!

 

Dpp Component를 다음과 같이 수정한다.

 

export class Dpp extends Component {
    render() {
        return (
            <div>

            </div>
        );
    }
}

 

이후 Main에서 Dpp Component를 import 하고 사용해보자.

 

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

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

export default App;

 

에러 없이 성공적으로 실행할 수 있을 것이다.

 

외부 Directory에 존재하는 Component도 호출할 수 있다.

테스트를 위해 sub1 Directory를 생성하고 Epp.js를 생성하자.

 

이와 같을 땐 상대 경로를 사용하여 './Directory Location/Component.js'을 추가하면 된다.

 

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

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

export default App;

 

Directory Import

이번엔 폴더를 통째로 해서 가져오도록 해보자.

예를 들어, Date라는 Directory에 여러 Component로 깔끔하게 만들어진 Main Component가 있다고 하자.

Main에서는 완성된 Component를 가져와서 적용시켜보고자 한다.

 

우선 Date Component를 생성할 sub2 Directory를 생성하자.

그리고 Date Component에 대해 생성을 해야 하는데 여기서 중요한 것이 있다.

해당 Directoy의 Main인 index.js를 생성해야 한다.

이후 새로운 Component를 생성하여 index.js에 추가하는 형태로 간다.

다음과 같이 sub2 Directory에 index.js랑 Time.js를 생성해보자.

 

index.js는 Time.js의 Component를 가져와 등록시키자.

코드는 다음과 같다.

 

Time.js

import React, { Component } from 'react';

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

export default Time;

 

index.js

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

class Date extends Component {
    render() {
        return (
            <div>
                <Time/>
            </div>
        );
    }
}

export default Date;

 

여기까지 설정하면 sub2 Directoy에 대한 설정을 다 완료했다.

이제 sub2 Directory에서 완성된 index를 가져와 Main에 적용하면 된다. Directory를 등록할 땐 js파일이 아닌 폴더째로 import 하면 된다.

 

import Time from './sub2';

 

import React, { Component } from 'react';
import Bpp, {Dpp} from './Bpp.js';
import Cpp from './Cpp.js';
import Epp from './sub1/Epp.js';
import Time from './sub2';

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

export default App;

 

호출은 똑같이 태그를 이용하여 호출한다.

결과는 Time Component에서 출력한 Hello가 나오게 될 것이다.

 

Function Import

 

이번엔 외부에 존재하는 함수를 가져와 사용할 수 있도록 해보자.

만약에 함수만 처리하는 sub3 Directory가 존재한다고 가정하자. 그리고 function1.js에 사용할 함수들이 있다고 가정한다.

 

export function f1(){
    console.log("Hello1");
    
}

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

 

import로 가져오는 것들은 기본적으로 export가 된 것들을 가져와 사용할 수 있다.

따라서 export가 안 된 함수는 외부에서 사용할 수 없다.

 

외부 Component가 아닌 export 된 함수를 가져와서 처리할 땐 다음과 같이 import 시키면 된다.

 

import * as Name from ''JavaScript File Location'';

 

*의 의미는 JavaScript File Location에 존재하는 Name의 export된 모든 것을 참조한다는 것이다.

우리는 sub3에 존재하는 function1.js를 가져와 사용할 것이니 다음과 같이 입력하자.

 

import * as function1 from './sub3/function1.js';

 

import React, { Component } from 'react';
import Bpp, {Dpp} from './Bpp.js';
import Cpp from './Cpp.js';
import Epp from './sub1/Epp.js';
import Time from './sub2';

import * as function1 from './sub3/function1.js';

class App extends Component {
  render() {
    return (
      <div>
        <Bpp/>
        <Cpp/>
        <Dpp/>
        <Epp/>
        <Time/>
        {function1.f1()}
        {function1.f2()}
      </div>
    );
  }
}

export default App;

 

호출하는 함수 또한 JavaScript문법이므로 JSX에서 사용하기 위해선 {}를 이용하여 함수를 호출하도록 하자.

결과는 다음과 같다.