[TIL]21.08.08-learning to Vue

10711 단어 TILTIL

TIL 21.08.08

컴포넌트 통신 방식

뷰 컴포넌트는 각각 고유한 데이터 유효 범위를 갖는다.
따라서, 컴포넌트 간에 데이터를 주고 받기 위해선 다음과 같은 규칙을 따라야 한다.
상위에서 하위로는 데이터를 내려준다, 프롭스속성
하위에서 상위로는 이벤트를 올려준다, 이벤트 발생

컴포넌트 통신 규칙이 필요한 이유

특정 컴포넌트의 변화에 따라서 나머지 컴포넌트가 유기적으로 데이터를 주고 받았을때,
데이터의 방향을 예측하기 어려워서이다.
특정 기능(상태 혹 데이터)이 바뀌었을때 그로인한 버그를 추적하기 어려워서이다. (n방향 통신의 문제점)
mvc 패턴을 예로 들어주셔서 은근 이해가 쉬웠다.
스프링 개발 경험이 이럴때 도움이되는군.

컴포넌트 통신 규칙이 생겼을 때 장점

데이터의 흐름을 추적할 수 있다. 항상 데이터(Props)는 내려가고, 아래에서 위로는 이벤트(Event)가 올라가기 때문이다.

props 속성의 특징

리액티비티, 상위 컴포넌트의 데이터가 바뀌는 순간 하위 컴포넌트의 데이터가 바뀌면서(하위 컴포넌트의 프롭스 속성이 반영되면서) 화면까지 다시 그려진다.

Event emit

하위 컴포넌트에서 상위 컴포넌트로는 데이터를 다시 올리는게 아닌 이벤트를 올린다. 이것이 바로 Event emit
vue.js 제공하는 기능

<body>
    <div id="app">
        <app-header></app-header>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var appHeader = {
            template: '<button v-on:click="passEvent">click me</button>',
            methods: {
                passEvent: function(){
                    this.$emit('pass');
                }
            }
        }
        new Vue({
            el: '#app', //id app 연결
            components: {
                'app-header': appHeader
            }
        });
    </script>
</body>


이런식으로 뷰 개발자 도구를 통해 확인 가능하다.

컴포넌트 태그에서 조작을 해주지 않았기에,
props 등록 할때와 비슷하게 해당 태그에서 올라온 이벤트를 잡아줘야한다!
상위 컴포넌트(해당 코드에서는 Root)에서 실행할 매서드를 정의하고 돌려보자
v-on:하위 컴포넌트에서 발생한 이벤트 이름="상위 컴포넌트의 메서드 이름"
아래 코드는 event emit으로 콘솔 출력!

<body>
    <div id="app">
        <!-- <app-header v-on:하위 컴포넌트에서 발생한 이벤트 이름="상위 컴포넌트의 메서드 이름"></app-header> -->
        <app-header v-on:pass="logText"></app-header>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var appHeader = {
            template: '<button v-on:click="passEvent">click me</button>',
            methods: {
                passEvent: function(){
                    this.$emit('pass');
                }
            }
        }
        new Vue({
            el: '#app', //id app 연결
            components: {
                'app-header': appHeader
            },
            methods: {
                logText: function() {
                    console.log('hello');
                }
            }
        });
    </script>
</body>

배우면 배울수록 자바할때 배운 객체지향과 닮은것 같아서 생각한게,객체지향 관점에서 Vue는 객체이고, el은 참조 되어 있는 메모리 주소라고 생각된다. 닮아서 쑥쑥들어온다,,
Vue 너무 재밌다-

프로그래머스 [양궁대회] - js
바닐라js 를 사용한 jwt token 로그인 구현

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage