한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online를 들으며 정리한 내용입니다.

Vuex(Store) 개요

문제점
search라는 컴포넌트로 api를 요청해서 그 결과를 가지고 있는 상태입니다. 또한 이 검색 결과를 movie-list라는 컴포넌트에 뿌려서 데이터를 활용해볼 예정입니다.

하지만 search라는 컴포넌트와 movie-list라는 컴포넌트는 형제 요소입니다. 하지만 형제요소들 사이에서 데이터를 주고받을 수 있는 방법은 아주 제한적입니다.

따라서 이를 효율적으로 관리해줄 수 있도록 데이터를 한곳에 몰아서 정리해주는, 중앙집중식 라이브러리인 Vuex를 활용해보도록 하겠습니다.

※참고(데이터통신)
부모-자식 : Props-emit
상위-하위: provide-inject

1. MovieList, MovieItem 컴포넌트 생성

1-1 MovieList.vue

MovieList

<template>
  <div class="container">
    <div class="inner">
      <MovieItem
        v-for="movie in movies"
        :key="movie.imdbID" />✅point
    </div>
  </div>
</template>

<script>
import MovieItem from '~/components/MovieItem'
export default {
  components : {
    MovieItem
  },
  data() {
    return {
      movies: []
    }
  }
}
</script>

Home.vue

<template>
  <Headline />
  <Search />
  <MovieList />
</template>

<script>
import Headline from '~/components/Headline'
import Search from '~/components/Search'
import MovieList from '~/components/Search'
export default {
  components : {
    Headline,
    Search,
    MovieList
  }
}
</script>

1-2 MovieItem.vue

<template>
  <div></div>
</template>

2. 형제 컴포넌트간의 데이터 통신와 Vuex

Search.vue에서 부모 컴포넌트인 Home.vue로 데이터를 전달한 후 다시 Home.vue에서 자식 컴포넌트인 MovieList.vue로 데이터를 전달해줍니다.

하지만 이 경우에는 중간 매개체 역학을 하는 컴포넌트가 꼭 필요하게 됩니다. 하지만 만약 그 관계가 복잡해지는 경우 매개채 역할을 하는 컴포넌트가 여러개가 되는 복잡함이 생기게 됩니다.

이 문제를 해결하기 위해 Vuex라는 중앙집중식 라이브러리를 활용할 수 있습니다. 이를 이용하면 관계가 복잡해지더라도 중간매개체를 Store라는 저장소 한개만을 사용할 수 있게 됩니다.

또한 프로젝트 내부의 어떤 컴포넌트에서도 데이터를 주고 받을 수 있게 됩니다.