React 동적 컴포넌트 호출하기 : dynamic component import

React 동적 컴포넌트 호출하기

임의적인 컴포넌트를 호출하고 싶을때 사용하는 방법이다. 더 효율적인 방법이 있겠지만 난 리액트를 잘 알지 못하기에 내가 할 수 있는 최선인 것 같다.

Component 를 쓰기 위해 사전에 컴포넌트 스크립트를 Import 해야 한다.

동적임포트 대상이될 컴포넌트를 직접 export 한다.

< / > index.jsx

import Frame from './frame/index.jsx';
import PageHtml from './pageHtml/index.jsx';

export default { Frame, PageHtml };

< / > Custom.jsx

import React from 'react';

export default class Custom extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {
        const Component = this.props.component.tag;

        return (
            <Component>
                {this.props.component.body}
            </Component>
        )
    }
}

이제 임의적인 컴포넌트를 호출한다.

// ./src/dashboard/portlets/index.jsx imoprt
// Object 담긴 컴포넌트들....
import * as Portlets from '../portlets';

export default class PortletController extends React.Component {

    ... 생략 ...
    
    render() {
    
        let tagname = 'PageHtml';
    
        return (
            // 오브젝트를 배열? 형식으로 호출하고 동적인 string 값을 대입한다.
            <Custom component={{ tag: Portlets[tagname], body: '' }} />
        )
    }
    
}

만약 Webpack 빌드과정에 동적임포트 대상이될 컴포넌트를 자동으로 모으려면 다음과 같이한다.

Webpack 을 이용한 대상 컴포넌트를 하나의 스크립트로 모아서 한개 파일을 임포트 할 것이다. 상세한 설정부분은 생략한다. 그리고 아래 설정 경로는 신경쓰지 않는 다.

와일드카드를 이용한 경로에 모든 대상을 찾을때 glob 패키지를 사용한다.
$ npm install -D glob

< / > webpack.config.js

var fs = require('fs');
var glob = require("glob");


module.exports = {

    ... 생략 ...
    
    plugins: [
    
        function() {
        
                // 동적으로 사용할 컴포넌트를 모두 index.jsx 파일에 기록한다.
                fs.writeFile('./src/dashboard/portlets/index.jsx', '');
                
                // 와일드카드를 이용하여 패턴에 맞는 모든 파일일 호출한다.
                glob('src/dashboard/portlets/**/config.json', null, function(err, files) {

                    for(var i in files) {
                        var file = __dirname + '/' + files[i];
                        fs.readFile(file, 'utf-8', function (err, data) {
                            var script = JSON.parse(data).script;
                            
                            // index.jsx 작성한다.
                            fs.appendFileSync("./src/dashboard/portlets/index.jsx", script + "\n");
                            console.log('Portlets Export add: ' + script);
                        });

                    }

                });
        }
    
    ],
    
    resolve: {
        extensions: ['', '.js', '.jsx'],
    }
}

구지 json 설정 파일을 이용하지 않아도 되지만 나중을 위해~ 난 사용하였다. 파일에는 컴포넌트를 사용하기 위한 스크립트 호출이 담겨져 있다.

< / > config.json

{
    "name": "PageHtml",
    "script": "export PageHtml from './pageHtml/index.jsx';"
}

webpack 을 빌드하면 아래의 파일이 생성된다.

< / > index.jsx

export Frame from './frame/index.jsx';
export PageHtml from './pageHtml/index.jsx';

이제 index.jsx import 하여 동적으로 컴포넌트를 사용하면 된다. Custom 을 이용하여 string 을 tag name 으로 사용할 수 있게 한다.

Syaku Blog by Seok Kyun. Choi. 최석균.