Vue) 73번째 회고

---

1. Vue-Props

Vue-Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법이다.

이를 통해 컴포넌트 간의 단방향 데이터 흐름을 구현할 수 있다.

Props는 컴포넌트의 재사용성을 높이고 컴포넌트 간의 결합도를 낮추는 데 도움이 된다.

 

메소드/명령어	설명
props:['propName']	기본적인 prop 선언 방식
props:{ propName: Type }	타입을 지정한 prop 선언
props: { propName: { type: Type, required: true } }	필수 prop 선언
props: { propName: { type: Type, default: value } }	기본값을 가진 prop 선언

 

💻 예시 코드

<!-- 부모 컴포넌트 -->
<template>
  <child-component :message="parentMessage"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    }
  }
}
</script>

<!-- 자식 컴포넌트 (ChildComponent.vue) -->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
}
</script>

[vue.js] Props로 데이터 전달하기

- 참고 : tobo.log

[Vue.js 기초] components, props

- 참고 : wlwl99.log

---

2. v-if (조건부 렌더링)

v-if는 Vue.js에서 조건부 렌더링을 구현하는 디렉티브이다.

이 디렉티브는 표현식의 결과가 true일 때만 요소를 렌더링 한다.

false일 경우 요소는 DOM에서 완전히 제거된다.

v-else와 v-else-if와 함께 사용하여 복잡한 조건부 렌더링을 구현할 수 있다.

 

메소드/명령어	설명
v-if="condition"	조건이 참일 때 요소를 렌더링
v-else	v-if가 거짓일 때 렌더링할 요소를 지정
v-else-if="condition"	추가적인 조건을 지정할 때 사용

 

💻 예시 코드

<template>
  <div>
    <h1 v-if="isLoggedIn">Welcome, User!</h1>
    <h1 v-else-if="isLoading">Loading...</h1>
    <h1 v-else>Please log in</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false,
      isLoading: true
    }
  }
}
</script>

 

🚀 v-if v-show 차이

v-if와 v-show는 모두 Vue.js에서 조건부 렌더링을 위해 사용되는 디렉티브이다.

하지만 그 작동 방식과 용도에 있어 중요한 차이가 있다.

 

1️⃣ v-if

v-if는 조건에 따라 요소를 실제로 생성하거나 제거한다. 조건이 false일 때, 요소는 DOM에서 완전히 제거된다.

 

2️⃣ v-show

v-show는 항상 요소를 렌더링 하고 DOM에 유지하지만, CSS의 display 속성을 토글 하여 요소의 가시성을
제어한다.

 

💡 주요 차이점

특성	v-if	v-show
초기 렌더링	조건이 true일 때만 렌더링	항상 렌더링
DOM 조작	요소를 추가/제거	display 속성만 변경
성능 (초기)	초기 렌더링 비용이 낮을 수 있음	초기 렌더링 비용이 높을 수 있음
성능 (토글)	토글 비용이 높음	토글 비용이 낮음
사용 사례	런타임 중 조건이 자주 변경되지 않을 때	조건이 자주 변경될 때

 

💻 예시 코드

<template>
  <div>
    <h2>v-if 예시:</h2>
    <p v-if="showIfElement">이 요소는 v-if로 제어됩니다.</p>

    <h2>v-show 예시:</h2>
    <p v-show="showShowElement">이 요소는 v-show로 제어됩니다.</p>

    <button @click="toggleIf">Toggle v-if</button>
    <button @click="toggleShow">Toggle v-show</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showIfElement: true,
      showShowElement: true
    }
  },
  methods: {
    toggleIf() {
      this.showIfElement = !this.showIfElement
    },
    toggleShow() {
      this.showShowElement = !this.showShowElement
    }
  }
}
</script>

 

 위 예시에서

1. v-if로 제어되는 요소는 showIfElement가 false일 때 DOM에서 완전히 제거된다.
2. v-show로 제어되는 요소는 항상 DOM에 존재하지만, showShowElement가 false일 때
   display:none이 적용된다.

 

💡 선택 기준

1. 토글 빈도
   요소가 자주 토글되는 경우 v-show를 사용하는 것이 성능상 유리하다.
2. 초기 렌더링 비용
   초기 렌더링 비용이 높고 거의 토글되지 않는 요소의 경우 v-if가 더 적합할 수 있다.
3. SEO 고려
   v-if는 조건이 false일 때 요소를 완전히 제거하므로, 특정 요소를 검색 엔진에 노출시키지 않아야 할 경우
   유용할 수 있다. 

 

조건부 렌더링 — Vue.js

- 참고 : v2.ko.vuejs.org

[Vue.js] 조건부 렌더링 v-if, v-show

- 참고 : Son's DLog

[개념잡기] v-if 와 v-show 의 차이

- 참고 : pa-pico

---

3. v-for

v-for는 배열이나 객체의 각 항목에 대해 요소나 템플릿 블록을 반복하는 데 사용되는 디렉티브이다.
이를 통해 데이터 목록을 동적으로 렌더링 할 수 있다.
v-for는 특별한 속성인 key와 함께 사용하여 Vue의 가상 DOM 알고리즘이 노드의 ID를 추적할 수 있게 해야 한다.

 

메소드/명령어	설명
v-for="item in items"	배열의 각 항목에 대해 반복
v-for="(item, index) in items"	배열의 각 항목과 인덱스에 대해 반복
v-for="(value, key) in object"	객체의 각 속성에 대해 반복
:key="item.id"	각 반복 항목에 고유한 key 할당

 

💻 예시 코드

<template>
  <ul>
    <li v-for="(user, index) in users" :key="user.id">
      {{ index + 1 }}. {{ user.name }} - {{ user.email }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { id: 1, name: 'John Doe', email: 'john@example.com' },
        { id: 2, name: 'Jane Doe', email: 'jane@example.com' },
        { id: 3, name: 'Bob Smith', email: 'bob@example.com' }
      ]
    }
  }
}
</script>

[vue3] 리스트 렌더링(v-for)

- 참고 : songinho96.log

Vue.js

- 참고 : ko.vuejs.org

---

4. push, splice 함수

push와 splice는 JavaScript 배열 메소드로, Vue.js에서 반응형 데이터를 조작할 때 자주 사용된다.
push는 배열의 끝에 하나 이상의 요소를 추가하고, splice는 배열의 기존 요소를 삭제하거나 새 요소를 추가하여
배열의 내용을 변경한다.

 

메소드/명령어	설명
array.push(element1, ..., elementN)	배열의 끝에 하나 이상의 요소를 추가
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])	배열의 기존 요소를 삭제하거나 새 요소를 추가

 

💻 예시 코드

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item">{{ item }}</li>
    </ul>
    <button @click="addItem">Add Item</button>
    <button @click="removeItem">Remove Item</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Apple', 'Banana', 'Cherry']
    }
  },
  methods: {
    addItem() {
      this.items.push('New Fruit')
    },
    removeItem() {
      this.items.splice(1, 1) // 인덱스 1에서 1개의 항목 제거
    }
  }
}
</script>

[VUE] 배열에 값 추가 또는 삭제하기(push, splice)

- 참고 : ssjeong

---

5. IIFE ( Immediately Invoked Function Expression)

즉시 실행 함수 표현식의 약자이다.

이는 JavaScript에서 중요한 패턴으로, 함수를 정의함과 동시에 즉시 실행하는 방식이다.

 

💻 IIFE의 기본 구조

(function() {
	// 코드
})();

또는

(function() {
	// 코드
}());

 

💡 IIFE의 주요 특징

1️⃣ 즉시 실행

1. 함수가 선언되자마자 즉시 실행된다.
2. 별도의 호출 없이 자동으로 실행된다.

 

2️⃣ private 스코프 생성

1. IIFE 내부의 변수와 함수는 외부에서 접근할 수 없다.
2. 이는 변수의 충돌을 방지하고 코드의 안정성을 높인다.

 

3️⃣ 전역 스코프 오염 방지

1. IIFE 내부의 변수들이 전역 스코프를 오염시키지 않는다.

 

💡 IIFE의 활용

1️⃣ 모듈화

1. 관련 기능을 하나의 단위로 묶을 수 있다.
2. 모듈 패턴의 기초가 된다.

2️⃣ 초기화 코드

1. 애플리케이션의 초기 설정을 위한 코드를 실행할 때 사용한다.

 

3️⃣ 라이브러리 래퍼

1. 라이브러리 코드를 IIFE로 감싸 전역 스코프와의 충돌을 방지한다.

 

💻 IIFE의 변형 : 파라미터 전달

(function(window, document) {
  // window와 document를 사용하는 코드
})(window, document);

 

💻 IIFE의 변형 : 반환값

var result = (function() {
  return {
    property: "value"
  };
})();

 

💡 IIFE의 장점

1. 변수와 함수의 스코프를 제한하여 충돌을 방지한다.
2. 코드의 모듈화와 구조화에 도움을 준다.
3. 클로저를 생성하여 private 데이터를 유지할 수 있다.
4. 전역 네임스페이스의 오염을 최소화한다.

 

📌 현대 JavaScript에서의 IIFE

1. ES6 모듈 시스템의 도입으로 IIFE의 사용이 줄어들었다.
2. 그러나 여전히 레거시 코드나 특정 상황에서 유용하게 사용된다.

 

🚀 SyntaxError: Identifier 'createApp' has already been declared 해결 방법

위의 문제는 IIFE로 Vue 인스턴스를 감싸주면 식별자 충돌 문제를 해결할 수 있다.

 

1️⃣ SyntaxError

createApp({
    data() {
        return {
            key:'값1',
            key2:'값2',
            message:'안녕하세요',
            htmlString:'<b><p style="color:blue;">맑게 갠 파란 하늘🌤️</p></b>',
            num1:'0',
            num2:'0',
            txtMessage:'',
            daumlogo:'https://t1.daumcdn.net/daumtop_deco/images/pctop/2023/logo_daum.png'
        }
    },
    methods: {
        myFunc() {
            console.log(this.message);
        },
        myChange1() {
            this.message = "안녕";
        },
        myChange2() {
            this.message = "반가워";
        },
    },
}).mount('#app');

 

2️⃣ SyntaxError 해결

(function() {
    const { createApp } = Vue;

createApp({
    data() {
        return {
            key:'값1',
            key2:'값2',
            message:'안녕하세요',
            htmlString:'<b><p style="color:blue;">맑게 갠 파란 하늘🌤️</p></b>',
            num1:'0',
            num2:'0',
            txtMessage:'',
            daumlogo:'https://t1.daumcdn.net/daumtop_deco/images/pctop/2023/logo_daum.png'
        }
    },
    methods: {
        myFunc() {
            console.log(this.message);
        },
        myChange1() {
            this.message = "안녕";
        },
        myChange2() {
            this.message = "반가워";
        },
    },
}).mount('#app');
})();

 

 🚀 두 코드의 차이점과 이 방법이 작동하는 원리 설명

1️⃣ 차이점 : 첫 번째 코드

1. 전역 스코프에서 직접 createApp을 사용한다.
2. createApp 식별자가 전역 스코프에 노출된다.

 

2️⃣ 차이점 : 두 번째 코드

1. IIFE 내부에서 createApp을 사용한다.
2. const { createApp } = Vue;로 Vue 객체에서 createApp을 추출한다.
3. 전체 코드가 함수 스코프 내에 캡슐화된다.

 

💡 원리

1️⃣ 스코프 격리

1. IIFE는 새로운 함수 스코프를 생성한다.
2. 이 스코프 내의 변수와 함수는 외부 전역 스코프와 격리된다.

 

2️⃣ 식별자 충돌 방지

1.  createApp이 함수 스코프 내에서만 존재하므로, 전역 스코프의 다른 createApp과 충돌하지 않는다.
2. 다른 스크립트나 라이브러리에서 정의한 createApp과 간섭이 없다.

 

3️⃣ 변수 은닉 

1.  IIFE 내부의 변수와 함수는 외부에서 접근할 수 없어 코드의 안정성이 향상된다.

 

4️⃣ 모듈화

1. 코드를 IIFE로 감싸면 일종의 모듈처럼 동작하여 코드 구조화에 도움이 된다.

 

5️⃣ 해결 방식 

1. 원래 코드에서 SyntaxError: Identifier 'createApp' has already been declared 오류
   createApp이 이미 다른 곳에서 선언되었기 때문에 발생했다.
2. IIFE를 사용하면 createApp이 함수 스코프 내에서만 존재하게 되어, 전역 스코프의
   createApp과 충돌하지 않는다.
3. 결과적으로 식별자 충돌 문제가 해결되고 코드가 정상적으로 실행된다.

 

이 방법은 특히 여러 스크립트나 라이브러리를 사용할 때 유용하며, 전역 네임스페이스의 오염을 방지하고
코드의 모듈화를 촉진한다.

 

자바스크립트의 IIFE

- 참고 : doondoony.log

[JS] 8. IIFE & 모듈 & 네임스페이스

- 참고 : eun-ng