ExtJS 컴포넌트 내에서 React 앱/라이브러리를 로드하는 방법

제목: ExtJS 컴포넌트 내에서 React 앱/라이브러리를 로드하는 방법

ExtJS와 ReactJS는 모두 상호작용성 있는 웹 애플리케이션을 구축할 수 있는 강력한 자바스크립트 프레임워크입니다. ExtJS 3.1을 사용하고 있으며 프로젝트에 ReactJS를 통합하려는 경우, ExtJS 컴포넌트 내에서 React 컴포넌트를 로드하고 렌더링하는 과정에서 일부 도전에 직면할 수 있습니다.

도전의 이해

ExtJS 3.1에서는 React 컴포넌트를 로드하고 렌더링하는 것이 조금 복잡할 수 있습니다. 일반적인 접근 방법 중 하나는 React, React-DOM, Redux 등 필요한 라이브러리를 패키지화된 스크립트로 vendor.lib.js와 같은 벤더 라이브러리 파일에 포함시키는 것입니다. 다음은 ExtJS 컴포넌트에서 React 라이브러리를 로드하려는 예시입니다:

var CompositeViewer = Ext.extend(Ext.BoxComponent, {
    itemId: 'CompositeViewer',
    requires: [
        'ReactDOM' //내 라이브러리 파일 이름은 vendor.lib.js입니다.
    ],
    initComponent: function() {
        Ext.apply(this, {
            autoEl: {
                tag: 'div',
                cls: 'normalize'
            }
        });
        CompositeViewer.superclass.initComponent.apply(this, arg);
    },
    onRender: function(ct, position) {
        CompositeViewer.superclass.onRender.apply(this, arg);
        console.log(ReactDOM); //당연히 ReactDOM은 정의되지 않습니다.
        // React 앱과 다른 라이브러리를 로드/렌더링하는 방법을 알려주세요.
    },
    beforeDestroy: function() {
        CompositeViewer.superclass.onDestroy.apply(this, arg);
    }
});

해결책: ExtJS 컴포넌트 내에서 React 로드하기

ExtJS 3.4.1 예시

ExtJS 3.4.1을 사용하는 경우, 다음 코드는 ExtJS 패널 내에서 React 컴포넌트를 로드하고 렌더링하는 방법을 보여줍니다:

Ext.onReady(function () {
    Ext.create({
        xtype: 'panel',
        renderTo: Ext.getBody(),
        title: 'ExtJS 패널',
        items: [{
            xtype: 'label',
            text: 'ExtJS 컴포넌트'
        }, {
            xtype: 'panel',
            listeners: {
                afterrender: function () {
                    const e = React.createElement;

                    ReactDOM.render(
                        e('div', null, 'ReactJS 컴포넌트'),
                        this.el.dom
                    );
                    console.log('afterrender');
                }
            }
        }]
    });
});

ExtJS 5 이상 예시

ExtJS 5 이상 버전을 사용하는 경우, 다음은 ExtJS 패널 내에서 React 컴포넌트를 로드하고 렌더링하는 예시입니다:

Ext.application({
    name: 'Fiddle',

    launch: function () {

        Ext.create({
            xtype: 'panel',
            renderTo: Ext.getBody(),
            requires: [
                'ReactDOM'
            ],
            title: "일부 ExtJS 패널",
            items: [{
                xtype: 'label',
                text: "ExtJS 컴포넌트"
            }, {
                xtype: 'panel',
                id: 'react-panel',
                height: 400,
                initComponent: function () {
                    console.log('여기서 일부 extjs 작업 수행');
                    this.superclass.initComponent.apply(this, arguments);
                },
                listeners: {
                    afterrender: function () {
                        console.log();
                        const e = React.createElement;

                        ReactDOM.render(
                            e('div', null, 'ReactJS 컴포넌트'),
                            this.el.dom
                        );
                        console.log('afterrender');
                    }
                }
            }]
        });
    }
});

결론

ReactJS를 ExtJS 애플리케이션에 통합하는 것은 도전적일 수 있지만, 제공된 예시들을 따라 React 컴포넌트를 ExtJS 컴포넌트 내에서 로드하고 렌더링하는 방법을 더 명확하게 이해할 수 있어야 합니다. React와 ReactDOM과 같은 필요한 종속성을 포함시키고, ReactDOM.render() 같은 적절한 메소드를 사용하여 ExtJS 컨테이너 내에서 React 컴포넌트를 렌더링하는 것을 기억하세요.

React를 ExtJS 애플리케이션에 통합하는 방법에 대한 더 구체적인 지침 및 단계별 접근 방식을 알아보려면 해당 주제에 대해 작성한 중간 매체 기사를 확인해볼 수 있습니다. 이 기사에서는 재사용 가능한 React 라이브러리 생성, Ext 컨테이너와의 통합, webpack, Babel, TypeScript와 같은 도구 활용에 대해 다룹니다.

이러한 기술을 따라가면 ExtJS와 ReactJS의 이점을 모두 활용하여 동적이고 상호작용적인 사용자 경험을 제공할 수 있는 웹 애플리케이션을 개발할 수 있습니다.

참고 자료 : 

reactjs