[vue.js] 헷갈리는 부분 정리 (작성중...)

1. 조건부 렌더링 (v-if, v-show)

https://v3-docs.vuejs-korea.org/guide/essentials/conditional.html

핵심은 v-show는 css가 display:none일 뿐이다. (DOM에는 남아있다)

2. v-bind vs v-model

v-model은 양방향 바인딩,

v-bind는 html의 속성을 설정할 때 사용한다. 'v-bind:속성'에서 'v-bind'를 생략하고 ':속성'만 써도 된다.(v-bind:src -> :src)

3. input 입력값 유효성검사

- 추천하는 조합은 @input + v-model 조합

- 또는 라이프사이클 메서드(실무에서 써보니까 웬만하면 렌더링 관련 될 때만 쓰는 게 좋은 것 같다)

- 라이프 사이클 메서드

 

(1) updated

컴포넌트 데이터가 변경될 때마다 호출되는 라이프사이클 훅. 이를 사용하여 데이터 변경 시 유효성 검사를 수행할 수 있습니다.

그러나 updated를 사용할 때는 모든 데이터 변경에 대해 호출되므로 성능에 영향을 줄 수 있습니다.

관련없는 데이터 변경이 발생하더라도 updated가 호출됩니다. 이런 경우 불필요한 유효성 검사가 수행될 수 있으므로, 성능 문제를 방지하기 위해 다음과 같이 변경된 데이터를 확인하고 필요한 경우에만 유효성 검사를 수행하도록 조건을 추가할 수 있습니다.

그러나 updated가 여전히 다른 데이터 변경에도 호출되기 때문에, 필요한 경우에만 호출되도록 하는 watch를 사용하는 것이 더 효율적일 수 있습니다.

 

(2) watch

장점: 특정 데이터 속성의 변경을 감지하여 변경에 따른 작업을 수행할 때 유용합니다. 따라서 데이터 변경에 대한 로직을 메서드와 분리하여 조직화하기 쉽습니다.
단점: 코드가 길어질 수 있으며, 감시 대상 데이터 속성이 여러 개인 경우 각각에 대해 watch를 설정해야 합니다.
watch를 선택할 수 있는 상황:

- 데이터 변경에 따른 로직이 복잡하거나 여러 작업을 포함할 경우

- 감시 대상 데이터 속성이 여러 개이고, 각각에 대해 유사한 작업을 수행해야 하는 경우

 

(3) watchEffect

특정 데이터 속성의 변경을 감지하고 자동으로 업데이트되는 함수입니다.

watchEffect는 함수 내에서 사용되는 반응성 데이터 속성을 자동으로 추적하고, 이러한 속성 중 하나가 변경될 때마다 함수를 다시 실행합니다.

watchEffect의 장점:

1. 자동 추적: 함수 내에서 사용되는 모든 반응성 데이터 속성을 자동으로 추적하여 코드가 간결하고 직관적입니다.
2. 즉시 실행: 컴포넌트가 생성될 때 watchEffect 내의 함수가 즉시 실행되므로 초기 상태에 대한 처리가 쉽습니다.

watchEffect의 단점:

1. 여러 데이터 속성을 추적: watchEffect는 함수 내에서 사용되는 모든 반응성 데이터 속성을 추적하므로, 불필요한 업데이트가 발생할 수 있습니다. 이 경우, 성능 최적화를 위해 watch를 사용하는 것이 더 적절할 수 있습니다.

watchEffect를 사용하는 것이 좋은 경우는 다음과 같습니다:

• 함수 내에서 사용되는 모든 반응성 데이터 속성에 대해 변경을 감지하고 싶을 때
• 초기 상태에 대한 처리가 필요한 경우

 

4. computed vs watch

결론 =>종속된 값 따라 계산(computed), 작업할때마다 계산해야할 때(메소드)

 

(1) computed (Computed Properties)

특징

• computed은 의존하는 데이터 속성에 기반한 값을 계산하는데 사용됩니다.
• computed은 캐싱을 지원합니다. 즉, 의존하는 데이터 속성이 변경되지 않으면, 계산된 속성은 이전 결과를 재사용하고 다시 계산하지 않습니다.
• computed은 일반적으로 다른 데이터 속성을 기반으로 새로운 값을 생성하거나 계산하는 데 사용되며, 그 결과는 템플릿 렌더링에 사용됩니다.

복잡한 로직이라면 반드시 computed 속성 을 사용해야한다.

const data = ref({ drawer: false, message: "안녕하세요" });

const reversedMessage = computed(() => {
  return data.value.message.split("").reverse().join("");
});

<div id="example">
  <p>원본 메시지: "{{ data.message }}"</p>
  <p>역순으로 표시한 메시지: "{{ reversedMessage }}"</p>
</div>

Vue는 vm.reversedMessage가 vm.message에 의존하는 것을 알고 있기 때문에 vm.message가 바뀔 때 vm.reversedMessage에 의존하는 바인딩을 모두 업데이트할 것입니다. 그리고 가장 중요한 것은 우리가 선언적으로 의존 관계를 만들었다는 것입니다. computed 속성의 getter 함수는 사이드 이펙트가 없어 코드를 테스트하거나 이해하기 쉽습니다.

 

특히 computed 속성은 종속 대상을 따라 저장(캐싱)됩니다. computed 속성은 해당 속성이 종속된 대상이 변경될 때만 함수를 실행합니다. 즉 message가 변경되지 않는 한, computed 속성인 reversedMessage를 여러 번 요청해도 계산을 다시 하지 않고 계산되어 있던 결과를 즉시 반환합니다.

또한 Date.now()처럼 아무 곳에도 의존하지 않는 computed 속성의 경우 절대로 업데이트되지 않는다는 뜻입니다.

computed: {
  now: function () {
    return Date.now()
  }
}

(2) 메소드 (Methods)

특징 :

• 메소드는 컴포넌트에서 직접 호출되는 함수로서, 여러 작업을 수행하거나 값을 계산하는 데 사용됩니다.
• 메소드는 캐싱을 지원하지 않습니다. 즉, 호출될 때마다 항상 함수를 실행하고 값을 다시 계산합니다.
• 메소드는 템플릿에서 호출되거나 다른 컴포넌트 이벤트와 연결되어 사용됩니다. 또한, 로직 처리나 데이터 요청 등 다양한 목적으로 사용할 수 있습니다.

1.  

간단한 예를 통해 차이점을 살펴봅시다.

javascriptCopy code
export default {
  data() {
    return {
      firstName: "John",
      lastName: "Doe",
    };
  },
  computed: {
    fullName: function () {
      console.log("Computed property called");
      return this.firstName + " " + this.lastName;
    },
  },
  methods: {
    getFullName: function () {
      console.log("Method called");
      return this.firstName + " " + this.lastName;
    },
  },
};

 

 

 

 

 

 

 

참조 :

https://jess2.xyz/vue/vue-tip/#2-router--%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%84%A4%EA%B3%84

 

 

 

https://joshua1988.github.io/web-development/vuejs/v-model-usage/

https://v3-docs.vuejs-korea.org/guide/essentials/conditional.html#v-else-if