탭 전환 스크립트 모듈화 실전 예제

 

 

웹 프로젝트를 진행하다 보면 탭 전환 기능을 구현할 일이 자주 생깁니다.

처음에는 단순히 fetch로 HTML을 불러와서 innerHTML에 넣고,

탭 클릭 시 보여주기/숨기기만 하면 충분해 보이죠.

 

하지만 프로젝트가 커질수록 코드가 중복되고,

전역 변수 충돌이나 페이지별 관리의 불편함 같은

문제가 하나둘씩 드러납니다.

 

이런 상황에서 필요한 건

공통 로직을 모듈화하고,

각 페이지에서는 최소한의 설정만 남기는

구조화입니다.

 

1. 문제 상황

• 탭 전환 로직을 페이지마다 중복 작성 → 유지보수 어려움
• 전역 변수(cache, loaded)가 다른 스크립트와 충돌 가능성
• 페이지마다 다른 파일맵을 관리해야 하는데, 공통 로직과 섞여 있어서 불편

 

2. 해결 전략

• 공통 로직은 하나의 모듈로 분리
• 페이지별로는 fileMap만 남겨서 관리
• 모듈은 init()과 setFileMap() 메서드만 외부에 노출 → 깔끔한 네임스페이스 유지

 

 

3. 코드 예제

공통 스크립트 (tabs.js)

 

const MyTabs = (function() {
    let fileMap = {};
    const loaded = {};

    function setFileMap(map) {
        fileMap = map;
    }

    async function init() {
        const links = document.querySelectorAll(".menu-link");
        let firstLink = Array.from(links).find(l => l.dataset.disabled !== "true");
        if (!firstLink) return;

        const key = firstLink.dataset.target;
        const targetEl = document.getElementById(`content-${key}`);

        const response = await fetch(fileMap[key]);
        const html = await response.text();
        targetEl.innerHTML = html;
        loaded[key] = true;
        showContent(key);
        firstLink.setAttribute("aria-current", "page");

        links.forEach(link => {
            link.addEventListener("click", async (e) => {
                e.preventDefault();
                if (link.dataset.disabled === "true") return;

                links.forEach(l => l.removeAttribute("aria-current"));
                link.setAttribute("aria-current", "page");

                const key = link.dataset.target;
                const targetEl = document.getElementById(`content-${key}`);

                if (!loaded[key]) {
                    const response = await fetch(fileMap[key]);
                    const html = await response.text();
                    targetEl.innerHTML = html;
                    loaded[key] = true;
                }
                showContent(key);
            });
        });
    }

    function showContent(key) {
        document.querySelectorAll(".container > div").forEach(div => {
            div.style.display = "none";
        });
        document.getElementById(`content-${key}`).style.display = "block";
    }

    return { init, setFileMap };
})();

 

페이지별 스크립트

<script src="tabs.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", () => {
        MyTabs.setFileMap({
            a: "content-a.html",
            b: "content-b.html"
        });
        MyTabs.init();
    });
</script>

 

 

마무리하며

 

탭 전환 기능은 단순해 보이지만,

프로젝트가 커질수록 관리 포인트가 늘어나고

유지보수가 어려워집니다.

 

공통 로직을 모듈화하고

페이지별로 fileMap만 정의하는 구조를 적용하면

코드 중복을 줄이고

충돌을 예방할 수 있습니다.

 

무엇보다 유지보수가 훨씬 쉬워지고,

다른 UI 컴포넌트에도

같은 방식으로 확장할 수 있다는 점에서

큰 장점이 있습니다.