인프런 커뮤니티 질문&답변

안녕하세요 강사님

저는 DOM selector를 이용해 theme color를 변경하는 대신, v-bind를 이용해 theme을 지정해주는 방식을 사용해보았는데 잘 동작하는것 같습니다.

style binding을 이용했을 때에는 코드량이 줄고, theme이 지정된 컴포넌트에 관련 코드가 있어서 조금 더 동작을 파악하기 좋아 보였는데,

혹시 이렇게 작성했을 때 문제가 될 수 있거나 주의해야할 점이 있는지 궁금합니다.

좋은 강의 해주셔서 감사합니다!

<!-- Navbar.vue -->
<template>
    <nav class="header" :style="{backgroundColor: navbarColor}">
     ......
</template>

<script>
export default {
    computed: {
        ...mapState(['navbarColor'])
    }
    .......
}
</script>


<!-- App.vue -->
<template>
  <div id="app">
    <Navbar />    
    <router-view class="container" :style="{backgroundColor: bodyColor}"></router-view>
  </div>
</template>

<script>
export default {
    .......
    computed: {
        ...mapState([
            'bodyColor'
        ]),
    },
    updated() {
        const body = document.querySelector('body');
        if(body) body.style.backgroundColor = this.bodyColor;
    },
    ......
}
</script>