TIL : 99번째- 230427 [4-4-목]

배움 __IL/TIL 1기

TIL : 99번째- 230427 [4-4-목]

Mo_bi!e 2023. 4. 27. 18:10

I. 들어가며

어제 컴포지션API 썻고, computed 속성을 썻어

기존에 바인딩 되어있는데 data 중에서 내가 원하는 것을 타겟팅해서 동기화된 속성을 만들 때 우리는 computed 를 썻어

이것은 함수를 기반으로 해!

계산식이 달라진다는것이 정말로 달라지는지 보아야해

항목에다가 삭제버튼 추가할거야

눌렀을 떄 항목이 삭제될거고 vuw스럽게 MVC방법론으로 자연스럽게 하는것을 보자

II. Vue.js

1. 삭제하기

(1) 들어가며

input type 에서 button 등의 차이?

<button> 태그는 이미지를 버튼처럼 쓰기위해서 안에다가 이미지를 넣을 수 있어

꼭지금은 아냐, 버튼이 input 인 필요없이, js 기반이기 때문에 엘리먼트가 큰 의미를 가지지않는 이상한 세계야

어떤사람은 버튼을 span 누구는 div로 해! 그런데 문서는 css 등을 빼도 그 자체가 가치가있어야해

퍼블리싱 강의에서도 section이나 tag의 의미에 대해서 그렇게 쓰는거야

(2) 데이터 심기

1) data-id (vue.js 이전방법)

<div>
    <ul>
        <li v-for="m in model.list" >
            <input type="hidden" value="">
            <span>{{ m.name }}</span>
            <input type="button" value="del" @click="menuDelHandler" data-id="2">
        </li>
    </ul>
</div>

data-id 로 해서 가능해

2) data-set 이란

어떤 태그라도 데이터를 충분히 심을 수 있다. (data set)

data-* 은 내가 마음대로 정할 수 있다

표준적인 방법으로 데이터를 심을 수 있다.

이렇게 하고 js에서 꺼내서 쓸 수도 있어!

3) vue.js 에서의 방법

이런경우 쿼리셀렉터를 이용해서 js에서 이용도 가능하다

하지만 이보다 클릭요소가 아닌 데이터도 전달이 가능하다!

<script>
	function menuDelHandler(id){
//기존 쿼리셀렉터 방식 말고 다른방식을 해보자!!
        console.log(id)

        console.log("test");

    }

</script>


<template>
    <Header />

    <div>
        <ul>
            <li v-for="m in model.list" :data-id="2">
                <input type="hidden" value="">
                <span>{{ m.name }}</span>
                <input type="button" value="del" @click="$event => menuDelHandler(m.id)">
            </li>
        </ul>
    </div>

$event => menuDelHandler(m.id) 에다가 매개변수로 넣어서 보내 줄 수있다.

id 값을 보내서 그 아이디 값에 대해서 삭제하자!

4) 보내진 값을 삭제하기

    function menuDelHandler(id){
//기존 쿼리셀렉터 방식 말고 다른방식을 해보자!!
        console.log(id)

        console.log("test");

        model.list.splice(2,1);

    }

splice 로 삭제가 가능하다

이 경우 두번째 에서 하나를 삭제한다.

5) 받아온 id 값을 삭제하기

삭제부분에다가 바로 id 넣으면 안된다

이 경우 findInedx() 를 써보자!

function menuDelHandler(id){
//기존 쿼리셀렉터 방식 말고 다른방식을 해보자!!
    console.log(id)

    console.log("test");

    let idx = model.list.findIndex(m => m.id == id);    
    model.list.splice(idx,1)
}

클릭한 id 값과 model.list 의 id 값을 비교하고,

그 인덱스를 찾는다

이렇게 하면 [del] 버튼을 누르면 삭제된다.

2. watch

(1) watch의 정의

1) 의의

감시하고, 변경되면 콜백함수 호출한다.

2) watch 코드

어떤 데이터가 바뀌면, 콜백함수 실행되게 하는거야!

삭제[del] 될 때 마다 log에 hohoh 가 출력이돼

del 버튼으로 -> list 가 바뀜 (감시) -> hoho 출력

(2) watch의 이용

1) 용도

그런데 이거를 왜 쓰는걸까? 어디에다가 쓸 수있을까?

어떤 모델에다가 수치가 달라지면 수치에 대한것은 computed 를 쓴다면

watch는 모델이 달라지면 행위를 해야하는데, 많이쓰는것을 생각해보면...

2) 콘솔에 출력해보기

리액티브 위한 쿼리 변수를 만들고(텍스트박스 에다가)

입력받아야 하기에 2way 바인딩함 => 얘를 watch 하자

이것으로 출력! 콘솔에다가!

    let query = ref("");

    watch(query, ()=>{
        console.log(query.value);
    });

<template>
    <Header />
    <div>
        <label>검색어 : </label>
        <input type="text" v-model="query">
    </div>

model 로 2way binding을 하자

즉 검색어 에다가 "아가"라고 아래와 같이 입력한다

그러면 log 로 입력한것이 출력된다.

(3) filter() 및 include()

1) 의의

정리 하면 filter() 는 새로운 배열로 반환하는 방식인데, 특정 조건을 만족해야햔다.

예컨데 위 코드에서 word는 words 의 각 요소들이다

이 요소들의 문자열수가 6개를 초과하는 경우(true, false)에 result 에 반환한다.

문자열이 해당되어있는지 판별한다.

그리고 true, false 를 이용해서 반환한다

3) filter() 및 includes() 쓰기

watch(query, ()=>{
    console.log(query.value);

    console.log(typeof(model.list));

    model.list = model.list.filter((m) => m.name.includes(query.value));

    if(query.includes(""))
        load();

    // let a = model.list.filter((query) => filter.eqaual());
    // let b = [1,2,3];
    // console.log( b.filter());

    // console.log(a);



});

filter() 를 이용해서 그 부분만 넣어준다. 그리고 include() 로 같은부분이 있는지 찾아준다.

배열로 반환을 할 때, 쿼리문에 해당하는(true)만 배열에 담아준다

그리고 그것을 model.list 에다가 저장해준다

model.list = model.list.filter((m) => {
    return m.name.includes(query.value)
});
model.list = model.list.filter((m) => m.name.includes(query.value));

다음과 같이 같은 기능을 두가지 방식으로 했다

3. 기타

(1) readonly

1) 의의

달라지는 내용이 클라 상에서만 달라지는거라면 데이터만 변경하면되는데, DB연동하다면 fetch 염두하고 해야한다!

readonly 는 읽기전용인데, 복사본으로 하는 것이다

하나는 입력을 받게, 하나는 출력을 전용으로 쓰게한다.

복사를 해서 보여준다. -> 이 경우 언래핑 해서 보여줌

(2) watchEffect()

바뀌자마자 동시실행할지, 먼저할지 옵션이 많아

함수 실행관련한것이다.

의존성을 반응적으로 추척하고, 의존성이 변경될 떄 마다 다시실행하는 것

(4) shallowRef()

ref얕은 방식인데,

얕다는게 뭘까?

shallow 쓰는순간 ref 가 의미가 없어져!

값은 바뀌지만 리액티브 되는게 아니야~!

데이터구조의 성능 최적화를 위해쓴다는데 아직 정확히 파악이 어려움

(5) 트리거 레프

강제 트리거 이펙트를 의미한다

shallowRef 경우에서 사용됨 로 하는데, 반응안하다가 어느순간 딱 반응하고싶을 떄

(6) props

1) 의의

조그마한 컴포넌트 에게 데이터를 보내주면서 쓰는거야

주의 : 읽기전용이야!

2) 새로운 컴포넌트 만들기

    <button @click="clickHandler" >클릭버튼</button>

</div>

<newList :list="model.newList" />

</template>

newList 를 한다

그리고 :list 를 해서 Props 로 데이터를 보내준다.

3) props 로 데이터 받기

<script setup>
    let props = defineProps({
        list:[]
    });
</script>



<template>
    <section>
        <h1>new list</h1>
        <ul>
            <li v-for="m in props.list">{{ m.name }}</li>
        </ul>
    </section>
</template>

list 프로퍼티 에서 받아준다

그리고 이것을 출력을 하면된다.

App.vue 에서 입력한 값이

컴포넌트에 바로 전달되기 (위 이미지에서 301111 입력과 출력 부분)

    <div>
    hello {{ a }}
    hello {{ b }}
    </div>

    <div>
        a:<span v-text="a"></span><input v-model.number="a"/><br>
        b:<span v-text="b"></span><input v-model.number="b"/><br>
        
        price : <span v-text="menu.price"></span>
            <input v-model="menu.price"><br>

        <button @click="clickHandler" >클릭버튼</button>

    </div>

    <!-- <newList :list="model.newList" :title="추천메뉴" :b="b" /> -->
    <newList :list="model.newList" :title="b" />

위에서 b에다가 값을 넣으면 props.title 에다가 전달이 된다.

5) 마치며

이렇듯 컴포넌트는 주체가 아니야!

페이지 한번 가져오는 녀석이 나누어서 각자역할하는데, 사용할떄는 3가지가 필요해

첫번쨰는 데이터 가져다가 줄 수있어야하고 (속성)

두번쨰는 개가 가지고 있는 행위가 있으면 이것을 서비스 함수로 제공할 수 있어야해 (메소드)

세번째는 이벤트 관련

1. 보충

2. 회고

동적으로 다양한 것을 보일 수 있는것이 재밌다

어서 빨리 이런것들을 활용해서 구현을 해보고 싶은 마음이 크다.!!!

'배움 __IL > TIL 1기' 카테고리의 다른 글

TIL : 101번째- 230501 [5-1-월] (0)	2023.05.01
TIL : 100번째- 230428 [4-4-금] (0)	2023.04.28
TIL : 98번째- 230426 [4-4-수] (0)	2023.04.26
TIL : 97번째- 230425 [4-4-화] (1)	2023.04.25
TIL : 95번째- 230421 [4-3-금] (0)	2023.04.21

현재글TIL : 99번째- 230427 [4-4-목]

모-코드

Today :
Yesterday :

모-코드