기억의 실마리
2024. 5. 19. 21:55

이번 포스팅에서 다룰 내용은

정말 단순하게 컴포넌트 순서에 대한 것이다.

 

제목에 "모달" 을 붙인 이유는 필자가

한 화면에서 여러 모달을 필요로 하고

모달 위에 또 모달을 띄우는 겹모달을

구현해야 할 때 컴포넌트 순서를 정리하여

간결하게 해결하는 것이 개인적으로

개발자 경험이 가장 좋다는 생각이

들었기 때문에 포스팅하기로 했다.

 

컴포넌트의 순서

사실 컴포넌트의 순서라고 해봐야 결국

위에서 아래로 순서대로 쌓인다고 볼 수 있다.

필자의 주력인 React로 예시를 들어보겠다.

const Test = () => {
    return (
        <div>
            <p>1</p>
            <p>2</p>
            <p>3</p>
        </div>
    )
}

 

div 태그의 css 속성이 기본적으로 display: block 이라고 가정한다면

1
2
3

 

위와 같은 형태를 볼 수 있고 만약 display: flex 라고 가정하면 아래와 같이 화면에 나타날 것이다.

123

 

 

어찌보면 너무너무 당연한 이야기다.

 

하지만 position: fixed 또는 absolute라면 어떤가?

 

분명 컴포넌트의 순서를 생각해보지 않았다면

혼란이 올 것이다.

 

필자의 경우 위 123 태그들을 fixed로 띄운다면

순서에 관계 없이 동일선상에 띄워지는 것으로

생각하고 있었다.

 

그렇기 때문에 123 태그들의 우선순위를

각각 지정해주기 위해서는 css속성인 z-index를

활용해서 순서를 반드시 지정해주어야 하는 것으로

생각하고 있었다.

 

이 방법은 일차원적이면서도 가장 확실한 방법이기도 하다.

 

결론으로 이러한 상황에서 가장 간결하고

빠르게 해결할 수 있는 방법이 바로 컴포넌트의

순서를 활용하는 것이다.

 

일반적으로 html 태그가 위에서 아래로 쌓이는 것과

마찬가지로 position이 fixed거나 absolute라면

화면의 z축을 기준으로 태그가 한장씩 쌓이게 되는

개념이 되는 것이다.

 

즉, fixed 또는 absolute position을 가진 태그는

아래에 있는 컴포넌트일수록 더 높이 위치해있다고

볼 수 있다.

 

아래 예시 코드를 확인해보자.

const YoutubeQueuePlay = () => {
    return (
        <>
            {/* transform을 설정하여 내부 컨텐츠 fixed 의 기준을 지정 */}
            <div className="transform flex flex-col pc:flex-row w-full h-full cursor-default relative">

                {/* 저장된 플레이리스트 버튼 */}
                <SavedMusicListButton/>

                {/* 플레이어 컨텐츠 섹션 */}
                <PlayerSection/>

                {/* 어사이드 바 */}
                <PlayerAside/>
            </div>

            {/* 신청/수정 모달 */}
            <EditModal/>

            {/* 미리보기 모달 */}
            <PreViewModal/>
            
            {/* 저장된 리스트 모달 */}
            <SavedListModal/>
        </>
    )
}

위에서 총 3가지 모달이 있다.

< 신청, 수정 모달 >

< 저장된 리스트 모달 >

< 미리보기 모달 >

 

여기에서 이중 모달이 필요한 경우는

< 저장된 리스트 모달 >에서 저장된 유튜브의

미리보기를 볼 수 있도록 하기 위해서

저장된 리스트 모달 위에 < 미리보기 모달 >을

띄워야 하는 경우이다.

 

이러한 경우 < 미리보기 모달 > 이

< 저장된 리스트 모달 > 보다 상단에 위치해야 한다.

 

그렇다면 지금 위 예시코드로는 불가능하다.

< 미리보기 모달 > 이 < 저장된 리스트 모달 > 보다

상단에 존재하기 때문에 < 저장된 리스트 모달 > 의

우선순위가 더 높아져서 미리보기를 눌러서

< 미리보기 모달 >을 띄워도 가려지게 된다.

 

해결법은 단순히 순서만 바꿔주면 된다.

const YoutubeQueuePlay = () => {
    return (
        <>
            ...

            {/* 신청/수정 모달 */}
            <EditModal/>
            
            {/* 저장된 리스트 모달 */}
            <SavedListModal/>
            
            {/* 미리보기 모달 */}
            <PreViewModal/>
        </>
    )
}

 

 

마치며...

프로그래밍에 대한 이해도가 낮았을땐 결론을 짧은 경험과 유추만으로 결정짓는 습관이 고질적인 문제였다. 하지만 꾸준히 공부하고 개발 경험을 늘려갈수록 더 많은 것들이 보이게 되고 더 겸손해지고 부족함을 많이 느끼게 되는 것 같다. 스스로 유추하고 확신을 가지기보다 근거를 기반으로 확신을 내리는 방향성을 절대로 잊지 말자.

티스토리툴바