일상코딩/노트

Vue : Basic Syntax 4 (computed, watch)

코딩애벌레 2024. 5. 3. 22:49

이제 서론은 거의 쓰지 않을 것 같다. (바쁘자나~)

computed()

: 계산된 속성을 정의하는 함수

: 미리 계산된 속성을 사용하여 템플릿에서 표현식을 단순하게 하고 불필요한 반복 연산을 줄인다

: 읽기 속성(computed로 정의된 변수는 외부에서 변경 불가)을 띈다

위의 html 출력 예시를 들어보자
만약 todos가 한개라도 남아있다면 true 출력, 0개라면 게임을 한다

 

위처럼 출력하기 위해 html에서 직접 삼항 연산자를 사용하는 방법도 물론 문제가 되지 않지만, 최대한 가시성 좋게 하기위해서는 연산은 따로 진행하고 출력만 할 수 있게 하는 것이 좋을 것이다. 또, 여러번 연산해야한다면 html 요소가 계속 길어지며 보기 좋지 않다. 이를 위한 방법이 두가지가 있다.

지금까지 해왔던 함수 정의를 통해 변수를 직접 전달해주는 방법은 모두 알 것이다. 하지만 computed를 이용한다면 더 효율적이고 직관적인 표현이 가능하다. 

computed를 사용하기 위해선 먼저 Vue에서 불러와줘야 한다
methods의 경우 함수이기 때문에 호출하는 형식으로 html에 넣어주어야 return 값을 출력할 수 있다

 

그렇다면 method의 경우 변화를 추적 못하는 것이 아닐까? 그것도 아니다. 아래와 같이 버튼을 정의해서 할일을 직접 제거하면서 출력 값을 살펴보자.

이제 버튼을 누르면 splice에 의해 todos 내부의 객체 친구들이 삭제될 것이다.
computed / method 모두 잘 출력된다

 

또한 computed로 생성된 데이터는 읽기 전용 속성을 띄기 때문에 치명적인 오류는 아니지만 오류 알람이 오게된다. 따라서 computed로 만들어진 데이터에는 접근하지 않는 것이 Syntax적으로 맞는 방향이다.

  • computed의 반환 값은 의존하는 데이터의 파생된 값으로 이미 계산이 완료된 값이다
  • 일종의 snapshot이며 의존하는 데이터가 변경될 때만 새로운 snapshot이 생성된다
  • 계산된 값은 읽기 전용으로 취급되어야 하며 변경되어서는 안된다
  • 대신 새 값을 얻기 위해서는 의존하는 데이터를 업데이트 해주어야 한다
  • computed에서 reverse() 및 sort() 등 사용 시 원본 배열을 직접 관여하는 경우, 원본 배열을 복사본으로 만들어서 retrun해주어야 한다

출력에는 문제 없지만 경고 문구를 띄워주는 Vue.. 불친절해.

 


computed와 method의 차이

 

  • computed 속성은 의존된 반응형 데이터를 기반으로 캐시(cashed) 된다
    • Cashe란 ? 데이터나 결과를 일시적으로 저장해두는 임시 저장소를 뜻하며 같은 결과 혹은 데이터는 계산하지 않고 빠르게 접근할 수 있다
    • 웹 페이지의 캐시 데이터를 예시로, 과거에 방문한 적이 있는 페이지에 접속할 경우 페이지 일부 데이터를 브라우저 캐시에 저장 후 같은 페이지에 다시 요청 시 모든 데이터를 다시 응답 받는 것이 아니라 일부 캐시 되어있는 데이터를 사용하여 더 빠르게 웹 페이지를 렌더링 할 수 있다.
  • 의존하는 데이터가 '변경'된 경우에만 재평가된다
  • cashed 데이터를 통해 이미 계산한 결과에 대한 참조를 다시 평가할 필요 없이 이전에 계산된 결과를 즉시 반환할 수 있다
  • 반면, method는 다시 렌더링이 발생할 때마다 항상 함수를 실행해야 한다
computed method

- 의존하는 데이터에 따라 결과가 바뀌는 계산된 속성을 만들때 유용

- 동일한 의존성을 가진 여러 곳에서 사용할 때 계산 결과를 캐싱하여 중복 계산을 방지

- 의존된 데이터가 변경되면 내부에서 자동으로 업데이트

 - 단순히 특정 동작을 수행하는 함수를 정의할 때 사용한

- 데이터에 의존하는지 여부와 관계없이 항상 동일한 결과를 반환하는 함수

- 호출해야만 실행
무조건 computed만 사용하는 것이 아니라 상황과 목적에 맞게 적절하게 조합하여 사용한다

 

+ 추가내용

이전 시간에 배웠던 v-for에서 반복문과 조건문이 중복되었을 때, 해결법으로 computed를 활용해서 필터링 된 목록을 반환하여 반복을 할 수 있다. computed + filter는 자주 쓰이는 조합이다.

todos 대신 computed를 통해 새로 filter되어 반환된 completeTodos를 순회한다
filter를 통해 새로운 배열을 completeTodos에 할당해주는 것. 조건은 todo.isComplete가 false일 때 할당
filter를 통해 아직 할일을 하지 않은 것을 출력하는 모습을 볼 수 있다

watch()

: 하나 이상의 반응형 데이터를 감시하고, 감시하는 데이터가 변경되면 콜백 함수를 자동 호출 한다

: 예를들어 Array 데이터 내부에 객체가 추가되고 제거될 때마다 Array 길이를 확인한다면 추가 / 제거 함수가 실행 될 때마다 반응형 변수에 직접 할당해줘야하니 2개의 중복 함수가 쓰이게 된다. 이때, Array를 지켜보는 함수(watch)를 사용한다면 자동으로 Array가 변한 것을 인지할 때, 콜백 함수를 실행시킨다. 즉, 중복되는 함수를 한개만 사용 가능하다.

 

watch를 사용하지 않았을 때 각 실행 함수의 과정

 

watch를 사용하여 array를 째려보는 것

 


watch 구조

 

computed와 동일하게 Vue에서 호출해줘야 사용 가능하다
watch의 기본 구조

  • 첫번째 인자 (lookingData)

- watch가 감시하고 있는 대상을 의미 (반응형 변수, 값을 반환하는 함수 등)

 

  • 두번째 인자 (callback function)

- lookingData가 변경 되었을 때, 호출되는 콜백 함수

newValue : 감시하는 대상이 변화된 값

oldValue : 감시하는 대상의 기존 값

html 요소로 클릭할 때마다 count에 ++되어 출력되는 것을 구현하는 예시
watch를 통해 console창에 변화된 값과 변하기 전 값을 출력

 

데이터가 바뀌기 전 후를 모두 출력할 수 있는 것은 매우 특이한 함수(인자)인 것 같다. 그러면 처음에 예를 들었던 것도 구현해보자.

양방향 v-model을 message로 묶어서 text에 해당하는 길이를 출력한다
message의 변화를 감시한 뒤에, 바뀐 newValue를 통해 messageLength 변수에 할당
문제 없이 실시간으로 Message length가 출력되는 모습을 볼 수 있다

 

+ 부록

  computed watch
공통점
데이터의 변화를 감지하고 처리 및 관리
동작
의존하는 데이터 속성의 계산된 값을 반환
(읽기 속성)

 특정 데이터 속성의 변화를 감시하고 작업을 수행
(side-effects)
사용 목적
계산한 값을 캐싱(cashed)하여 재사용 중복 계산 방지

 데이터 변화에 따른 특정 작업 수행
사용 예시
연산된 길이, 필터링 된 목록 계산 등

 DOM 변경, 다른 비동기 작업 수행, 외부 API 연동 등
computed와 watch 모두 의존(감시)하는 원본 데이터를 직접 변경하지 않는다

 

 

배열 변경 관련 메서드 (v-for와 배열을 함께 사용할 때, 배열의 메서드를 주의해서 사용해야한다)

 

1. 변화 메서드

 - 호출하는 원본 배열을 변경

 - push(), pop(), shift(), unshift(), splice(), sort(), reverse()

 

2. 배열 교체

 - 원본 배열을 수정하지 않고 항상 새로운 배열을 반환

 - filter(), concat(), slice()

 

원본 데이터를 수정하거나 교체하지 않고 필터링하거나 정렬된 새로운 데이터를 표시하는 방법으로 computed와 method를 활용할 수 있는 것을 본문에서 확인했다. 가급적 computed를 활용하되 중첩된 v-for가 주어진다면 method를 통해 접근해주어야 한다.

여기까지 아주 기본적인 Syntax에 대해 알아봤다. 다음 시간에는 Components를 통해 화면 구성을 나눠볼 예정이다.

728x90