index.js와 app.js를 분리하는 이유는 뭘까?

지인혁·2023년 11월 17일

🤔 들어가며

데브코스 교육을 수강하며 컴포넌트 단위로 자바스크립트로 개발하고 있었다.

그런데 항상 index.js에서 최상위 태그를 선택하고 app.js에서 최상위 태그를 props로 전달 받아 하위 컴포넌트 페이지들을 구현하고 있었다.

그러다가 index.js의 코드는 그냥 최상위 태그를 선택하고 app.js에 넘겨주는 로직만 계속 반복되었고 나는 굳이 index.js가 필요할까?? 그냥 app.js에서 한 번에 시작하면 되지 않을까?? 라는 생각을 계속 했다.

그러다 강의에서 로토 강사님이 계속 index.js와 app.js를 분리했는데 분리하는 이유를 한 번 찾아보시면 좋을 것 같다고 하셔서 한 번 찾아보며 공부하기로 했다.

분리된 index.js와 app.js

먼저 분리된 index.js와 app.js를 보자

// index.js
import App from './App.js';

const $target = document.querySelector("#app");

new App({ $target });

// app.js
import PostEditPage from './Page/PostEditPage.js';
import PostPage from './Page/PostPage.js';
import { initRouter } from './router.js';

export default function App({ $target }) {
    const postPage = new PostPage({ 
        $target,
    });
    const postEditPage = new PostEditPage({ 
        $target,
        initalState: {
            postId : "new", 
            post: { 
                title: "", 
                content: "" 
            }} 
        })

    this.route = () => {
        const { pathname } = window.location;

        $target.innerHTML = ``;

        if(pathname === "/") {
            postPage.setState();
        }
        else if(pathname.indexOf("/posts") === 0) {
            const postId = pathname.split("/")[2];

            postEditPage.setState({ postId });
        }
    }

    initRouter(this.route);
    this.route();
}

분리된 index.js와 app.js를 보면 index.js에서는 그냥 최상위 타겟 태그를 app.js에만 넘겨주고 있고 별 다른 로직은 없다.

app.js에서는 받은 요소 태그를 기준으로 하위 컴포넌트들에 대한 로직을 담고 있다.

흠... 굳이 index.js 말고 app.js에서 최상위 태그를 선택하고 사용하면 되지 않을까?? 그럼 모듈 하나가 줄어들고 더 간략해질 수 있는데...

이런 생각이 나는 계속해서 들었다.

뭐 혼자 궁금하면 해결이 되나 그래서 많은 자료들을 찾아봤다.

👌 index.js, app.js 역할, 분리 이유

index.js와 app.js 분리하는 주 이유는 프로젝트의 구조를 명확하게 하고 코드의 관리를 용이하게 하기 위해서다.

일단 index.js와 app.js의 역할을 알아야 분리하는 이유를 알 수 있다고 생각한다.

index.js

index.js는 애플리케이션의 진입점 역할을 하며 애플리케이션을 시작하는 곳이다.

index.js는 시작점 역할을 하는 만큼 애플리케이션의 전체적인 중요한 설정들을 포함하고 있다. 이는 해당 애플리케이션의 로직이 아니라 로직에 필요한 설정들을 담고 있다.

app.js

app.js는 애플리케이션의 주요 로직을 담고 있는 핵심 컴포넌트다. app.js에서는 애플리케이션의 라우팅, 상태 관리 등의 주요 기능을 구현한다.

분리 이유

index.js와 app.js를 분리함으로써, 애플리케이션의 설정과 주요 로직을 명확하게 구분할 수 있다.

만약 app.js에서 주요 설정과 로직을 모두 담당하면 app.js의 역할이 너무 커지면서 유지보수에도 좋지 않다.

이렇게 분리하게 되면 각 파일의 역할이 명확해져 코드를 이해하고 유지보수하는데 효율적이다. 또한 나중에 app.js의 로직을 다른 프로젝트에서 재사용하거나, 교체하는 작업이 필요할 때 분리된 app.js의 로직을 다른 프로젝트의 index.js 설정에 붙여 넣기만 하면 되기에 매우 편리하다.