[Vue.js] 5. computed 기초 정리

티스토리 뷰

Web/Vue.js

[Vue.js] 5. computed 기초 정리

HAN_PY 2020. 12. 7. 12:58

0. 들어가면서

우리가 왜 computed를 배우는 가에 대한 이야기부터 해볼까 한다. 우리가 프로그래밍을 하는 목적이 있고, 그 목적에 따라 다양한 데이터가 들어갈 것이다. 그리고 데이터를 가공하기 위해서 구조화를 해야 하는데 이때 필요한 것이 computed라고 할 수 있다. methods에 함수가 들어가는 것과 비슷하게 computed에도 함수가 들어간다. 그렇다면 어떤 목적의 함수인지에 따라 computed와 methods에 나눠서 들어가는지를 중점으로 파악해 보자.

공식문서에 보면 computed와 watch에 대해 나오고 캐싱이라는 이야기도 나오지만, 초보자 수준에서는 위에서 이야기 한 부분만 이해하고 넘어가자. 왜냐하면 이 글을 읽는고 있다는 건 다른 어려운 용어들도 이해가 안 돼서 들어왔을 것이기 때문이다. 오케이 그러면 시작해보자.

이전 내용인 무한 스크롤 구현법이 궁금하다면 아래의 url을 눌러보자.

han-py.tistory.com/285

1. data 조회하기

computed를 이해하기 위해서는 우선 아래의 코드를 보자

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue Tutorial</title>
</head>
<body>

  <div id="app">
    
  </div>
  

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
      var app = new Vue({
        el: '#app',
        data: {
            accounts: [
                { name: 'neo', balance: 500, isBankrruped: true },
                { name: 'tak', balance: 700, isBankrruped: false },
                { name: 'john', balance: 350, isBankrruped: false },
                { name: 'justin', balance: 200, isBankrruped: true },
            ],
            bankrrupedPeople: []
        },
        methods: {
            getBankrrupedPeople: function () {
                this.accounts.forEach((account) => {
                    if (account.isBankrruped) {
                        this.bankrrupedPeople.push(account)
                    }
                    
                })
                
            }
        }
        
      })
  </script>
</body>
</html>

위 코드를 보면 data의 accounts를 활용하여 파산자를 뽑는 코드를 작성한 것이다. 그런데 위 코드를 구현하는 방식을 보면 빈 리스트를 bankrrupedPeople로 생성한 이후에 그 배열에 forEach를 이용하여 하나씩 넣는 방법을 사용했다. 그렇다면 이러한 방식이 효율적일까? 그렇지 않다. filter 메서드를 활용하면 쉽게 가능하다.

            getBankrrupedPeople: function () {
                const newArr = this.accounts.filter((account) => {
                    return account.isBankrruped
                })
                return newArr
            }

위의 코드가 필터로 구현할 것이다. 이때 포인트는 필터는 새로운 배열을 리턴한다는 것이다. 그런데 return newArr 부분을 굳이 적지 말고 처음부터 return을 적어줘도 된다. 아래의 코드는 바로 위의 코드와 같다는 것을 참고하자.

            getBankrrupedPeople: function () {
                return this.accounts.filter((account) => {
                    return account.isBankrruped
                })
            }

위 코드를 보면 먼가 return이 두 번 들어가서 이상한 거 같지만, 전혀 이상하지 않은 코드라는 점을 인지하자. 코드에 filter를 써서 완성해 보면 아래와 같다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue Tutorial</title>
</head>
<body>

  <div id="app">
    <h1>Bankrruped</h1>
    {{ getBankrrupedPeople() }}
  </div>
  

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
      var app = new Vue({
        el: '#app',
        data: {
            accounts: [
                { name: 'neo', balance: 500, isBankrruped: true },
                { name: 'tak', balance: 700, isBankrruped: false },
                { name: 'john', balance: 350, isBankrruped: false },
                { name: 'justin', balance: 200, isBankrruped: true },
            ],
            bankrrupedPeople: []
        },
        methods: {
            getBankrrupedPeople: function () {
                const newArr = this.accounts.filter((account) => {
                    return account.isBankrruped
                })
                return newArr
            }
        }
        
      })
  </script>
</body>
</html>

우리가 지금까지 배웠던 것들을 바탕으로 위의 코드의 가장 큰 차이점은, methods에 return이 들어갔다는 것이다. 그리고 적은 코드를 좀 살펴보면 data의 값을 변경한 것이 아니고 조회를 하여 필요한 정보만 뽑아낸 것이다.

왜 이러한 것을 구현하나?

결론부터 말하면 computed는 위의 방식처럼 조회할 때 쓰기 때문이다.

2. computed

데이터를 생성, 수정, 삭제 할 때는 methods에 함수를 적어서 하면 되고, 단지 읽을 때는 computed에 함수를 적어서 사용하면 된다. 그러면 methods와 computed의 코드에서 차이점은 무엇일까?

        methods: {
            getBankrrupedPeople: function () {
                const newArr = this.accounts.filter((account) => {
                    return account.isBankrruped
                })
                return newArr
            }
        },

-----------------------------------------------------------------------------

        computed: {
            getBankrrupedPeople: function () {
                const newArr = this.accounts.filter((account) => {
                    return account.isBankrruped
                })
                return newArr
            }
        }

methods의 코드를 computed의 코드로 옮겨 봤다. 코드 상의 차이는 없다. 위에서 언급한 것처럼 단지 computed에서는 데이터를 읽기만 할 때 사용하면 된다. 그렇다면 우리는 의문이 들 수 있다. 그냥 div안에서 {{ getBankrrupedPeople [0] }} 이런 식으로 적어도 읽는 것이 되는데 왜 굳이 computed를 쓰나요? 그 이유는 간단히 말하자면 코드를 구조화하기 위해서이다. 긴 코드를 작성한다면 우리는 코드 정리가 안된다. 따라서 {{ }} 이걸로 단순 출력도 물론 되지만, 조건을 걸어서 출력하고 싶은때, 관련된 조건을 전부 computed에 작성하면 된다.

이제 methods의 코드를 computed의 코드로 옮겨서 보자.

이때 주의점은 아래와 같다.

{{ getBankrrupedPeople() }}안의 괄호를 빼고 적자. => {{ getBankrrupedPeople }}
naming convention은 함수지만, 이름은 명사형으로 적는다. => bankrrupedPeople

정리하면 아래와 같다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue Tutorial</title>
</head>
<body>

  <div id="app">
    <h1>Bankrruped</h1>
    {{ bankrrupedPeople }}
  </div>
  

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
      var app = new Vue({
        el: '#app',
        data: {
            accounts: [
                { name: 'neo', balance: 500, isBankrruped: true },
                { name: 'tak', balance: 700, isBankrruped: false },
                { name: 'john', balance: 350, isBankrruped: false },
                { name: 'justin', balance: 200, isBankrruped: true },
            ],
        },
        methods: {
        },

        computed: {
            bankrrupedPeople: function () {
                const newArr = this.accounts.filter((account) => {
                    return account.isBankrruped
                })
                return newArr
            }
        }
        
      })
  </script>
</body>
</html>

computed 안에서는 함수지만 함수처럼 {{ getBankrrupedPeople() }}이렇게 쓰면 안된다. 즉, 함수라고 만들어 놨지만 리턴되는 값을 뷰가 알아서 data 처럼 들고 있는 거다.

정리) 데이터를 건들지는 않았지만, 데이터에 대한 내용을 잘만들어서 리턴 하고 싶은 함수는 전부, computed에 넣는다.

3. 마무리

이제 cli를 배우면서 좀 더 디테일 한것들을 알아보자. 지금까지는 페이지 하나였지만, 앞으로는 좀 더 복잡한 Vue를 배워보자!!

'Web > Vue.js' 카테고리의 다른 글

Vue_babel.config.js (0)	2020.12.09
Vue CLI 기초 정리 (0)	2020.12.08
[Vue.js] 4. scrollmonitor(무한스크롤) 적용하기 (0)	2020.12.05
[Vue.js] 3. lifecycle hook 적용하기 (0)	2020.11.20
[Vue.js] 2. 데이터 받기(get) (0)	2020.11.17

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

글 보관함

AI Platform / Web

티스토리 뷰