brunch

브런치북 웹을 그리는 작가 08화

라이킷 13 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by zwoo May 25. 2020

Nuxt 선생님, 제 state 못 보셨나요?

전역 state 의 목록을 볼 수 있다는 것

나에게 있어서 Nuxt js 는 너무 어려워서 마음 속으로 선생님이라고 칭하고 있다.

선생님, 제 onClick 이벤트 좀 동작시켜 주세요.

안돼, v-on:click 이나 @click 을 쓰도록 해.

새로운 규칙을 학습하는 데 무척 오래 걸리는 편인 나로서는 자바스크립트 문법도 겨우 익혀가고 있는 상황에서 갑자기 앞에 알파벳 v 를 달고 나타난 템플릿 문법을 받아들이기 어려웠다. .map() 대신 v-for 를 쓰고, onClick 대신 v-on:click 을 써서 페이지 하나를 만들며 감을 잡을 때쯤, state 변경이라는 난관에 봉착했다. Next.js 에서처럼 useState 훅 같은 간단한 state 변경기능이 Nuxt.js 에는 없었다.* 그대신 store (vuex) 라는 전역 상태관리 컴포넌트 디렉토리가 존재했다. 이를 이해하는데 상당히 애를 먹었고, 본문에서는 store 의 개념과 장점에 대해 적어보고자 한다. 틀린 부분이 있을 수 있고, 혹여 바로잡아주시는 분이 계시다면 너무 감사해서 기프티콘을 보내드릴 것이다.

*훅은 없지만, store 를 쓰지 않고도 간단하게 state 를 변경하는 방법은 있는 것 같다. 내가 못 찾았을 뿐...

1. 도서관 같은 store

//faq.js 코드

export const state = () => ({
  clicked: false
})

export const mutations = {
  toggle: state => {
    state.clicked = !state.clicked
  }
}

각각의 파일은 모듈처럼 관리된다. index. js 파일에 최초 state 값과 mutations, getters, actions 등을 정의하고 export 시켜놓으면 이제 state 상태를 모듈로 관리할 준비를 마친 것이다. 여기서 기능이나 목적에 따라 상태관리 모듈을 정의할 수 있다. 나는 faq 페이지를 만들고 질문상자를 클릭하면 상자가 길어지면서 답변을 볼 수 있도록 하는 아코디언 메뉴를 만들고 싶었다. 그래서 faq 모듈을 생성했다. 이후 faq/toggle 을 실행시킬 때마다, $store.state.faq.clicked 값이 '참 -> 거짓 -> 참 -> 거짓' 으로 변경된다.

마치 도서관의 도서목록처럼 기능과 목적에 따라 전역 state 의 카테고리를 정리할 수 있게 되는 것이다.

2. 정확한 위치를 알고 쓰는 전역변수

//faq.vue

<div v-for="section in faqDummy">
<div class="section-title">
         {{ section.title }}
  </div>
   <div v-for="each in section.item" v-bind:key="section.item.id">

         // v-for 함수를 통해 faqDummy 데이터를 이중으로 맵을 돌렸다
     <div
       class="section-box"
        v-on:click="open()"

v-bind:class="{ isOpen: $store.state.faq.clicked }">

</div>
<div class="answer">

{{ each.answer }

</div>
</div>

</div>

// section-box 라는 class 를 부여해 css 로 기본 스타일을 잡고 v-on:click 이벤트에 open 함수를 실행시켰다. 이 함수는 store/faq/toggle 옵션을 실행시킬 함수이다. 마지막으로 v-bind:class 를 통해 새로운 클래스를 붙여주는데, 해당 클래스는 store 의 state 중에서 faq 모듈의 clicked state 의 값이 참인지 거짓인지에 따라 붙거나 떼어진다.

<script>

methods: {
  open() {
    this.$store.commit('faq/toggle')
  }

// section-box 를 클릭해 open 함수가 실행되면 faq모듈의 toggle 옵션이 수행되어 clicked 라는 state 의 값을 참-> 거짓-> 참... 으로 변경해준다.
}

</script>

이렇게 정확하게 구획된 채로 전역변수의 state 관리를 하게 되면 프로젝트가 아무리 커지고state 개수가 많아져도 난잡하지 않게 관리할 수 있다. 자주 사용하지 않는 변수는 없애거나, 비슷한 것끼리 묵는 리팩토링도 수월할 것이다. Next.js 의 경우 한 컴포넌트에서 필요한 state 는 간단한 훅으로 내부에서만 관리하고 전역으로 사용되는 state (유저가 페이지 이동을 해도 계속 유지되어야 하는 계정정보 같은 것들) 은 context 넣어서 관리할 수 있다. 아무래도 관리해야 할 state 가 많아진다면 무엇이 어디에 있는지 찾기 어려울 수도 있을 것이다.

하지만, 프로젝트 경험이 많지 않은 나로서는 아직까지 한 컴포넌트 내에서 state 관리를 하는 데에 큰 불편을 느껴본 적이 없다. 일일이 모듈을 나누어 정확한 위치를 적어가면서 state 변경을 실행시켜야 하는 것이 더 비효율적으로 느껴지는 측면도 있다. 얼마나 큰 프로젝트, 혹은 어떤 특성을 가진 프로젝트에서 store 활용이

효율성 면에서 진가를 발휘할지 사실 지금은 잘 와닿지는 않는다.

여담

Next.js 에서 styled components 를 활용해 props 값에 따라 스타일 변경을 하는 데에 익숙해졌는데, Nuxt.js 에서는 styled components 라이브러리를 쓸 수 없다(...) 비슷한 걸 발견하고 설치했으나 동작하지 않는다. ㅎㅎ.. 일일이 state 값의 변화에 따라 class 를 바인드시켜줌을 통해 동적 스타일을 구현해야 하는 것인지 의문이 든다. 분명 더 편리한 방법을 찾아낼 것이다 나는 반드시..