[Vue.js] 기초 개념 정리 - Watch, Array, for문(반복문), if문

🗂 목차

[Vue.js] 기초 개념 정리 - 기본 환경 구성

[Vue.js] 기초 개념 정리 - Vue Router

[Vue.js] 기초 개념 정리 - Vue LifeCycle Hook

[Vue.js] 기초 개념 정리 - data(), Data 처리

[Vue.js] 기초 개념 정리 - Watch, Array, for문(반복문), if문

 

 

 

🐱 Git Hub 주소 : https://github.com/junyharang-FrontEnd-coding-study/vue.js-study

📖 참고 자료 : https://www.youtube.com/watch?v=sqH0u8wN4Rs

 

 

 

🚀 watch 란?

개발자가 정의한 Data에 대해 해당 Data가 어떻게 변경되는지를 모니터링 하는 친구인 것이에요.

 

위와 같이 data Object의 Key 값을 함수 형식으로 만든 뒤 해당 Data Value가 변경이 되면 Catch를 할 수 있는 것이에요.

 

 

위와 같이 watch안에 input1()에 Inpu1 Data의 내용을 출력 하도록 하게 되면 기존에 button 등으로 Event를 걸어 Click이 일어나면 함수를 호출해서 Data를 받아 왔는데, 프로그램 상에서 어떤 Data의 값이 변경되는지 모니터링 할 때 유용하게 사용할 수 있는 것이에요.

 

이렇게 `abcde`를 입력하면 해당 내용이 출력 되는 것을 확인 할 수 있는 것이에요.

watch를 가지고 Data가 변경이 일어날 때 어떤 작업을 할 수 있게 코딩할 수 있는 것이에요.

 

 

 

🚀 Vue.js의 배열(Array)

웹 개발을 할 때, 목록(List) 조회나, 상세 조회 시에 여러 Tag, 댓글들을 가져와야 할 것이에요.
이렇게 여러 Data를 받아올 때 사용할 수 있는 것이 배열인 것이에요.

먼저 data()에 options라고 선언하고, Object가 여러개 들어 있는 배열을 만들어 줄 것이에요.

 

     🔽  Vue.js의 배열과 반복(for)문

 

 

위와 같이 select Tag를 통해 option Tag를 만들어 v-for를 만들었는데, 이건 for문인 것이에요.

v-for 형식 : `v-for="({Data}, {Index})"

즉 앞에 d는 options라는 배열에서 가져오게 될 Data를 의미하고, I는 Index, 즉, 배열이 3개닌까 0~2가 될 것이에요.

 

 

그런 뒤 뒤에 in을 써주고, 변수명을 써주게 되면 배열 변수 안에 있는 값을 하나씩 가져오면서 반복을 처리하게 되는데, 돌면서 Index 번호까지 가져오는 형식이 된 것이에요. Java로 치면 For-each문과 비슷하네요!

 

 

for 문의 경우 key 값을 무조건 넣어주어야 하는 것이에요. 이 key값은 해당 반복문을 유일하게 식별할 수 있는 이름을 넣는다고 생각하면 될 거 같아요.

 

 

그리고 {{d.v}}는 가져온 Data에 위에 배열에서 선언한 Value 값을 가져오라는 의미인 것이에요.

 

 

그럼 이렇게 Select Box가 만들어 진 것을 확인할 수 있는 것이에요.

 

 

그런 뒤 `:value="d.k"`를 선언해 주게 되면 이용자가 보이는 화면에서는 Data 안에 Value 즉, 도시 이름이 보이겠지만, 실제 Server 내부에서는 k로 정의한 S, B, J 등을 이용하게 되는 것이에요.

Vue.js에서는 `:` 이렇게 콜론을 쓰게 되면 Data Value에 바로 접근할 수 있는 것이에요.

 

 

 

이번에는 region 이라는 변수에 "J"라는 Key를 입력 해 주고, select Box 기본값으로 보여줄 v-model에 "region"을 선언하게 되면 Two-Way 방식으로 Bindding이 되어 있는 것이고, 

 

위의 그림과 같이 기본값이 'Jeju'로 되어 있는 것을 확인 할 수 있는 것이에요.

 

 

이번에는 table Tag를 통해서 배열과 for문을 이용해 보려고 하는 것이에요.

 

 

이렇게 Table이 만들어 지는 것을 확인 할 수 있는 것이에요!

 

 

이번에는 select Tag에 Even를 걸어서 Select Box가 변경이 되면 `changeRegion()`이 호출되도록 할 것이에요.

 

 

 

 

이렇게 하게 되면 select Box가 변경이 되면 changeRegion()이 호출이 되고, 그 안에 경고창을 열고 this.region (Region 변수의 값)을 가져오게 되는 것이에요.

 

 

 

🚀 Vue.js의 조건(if)문

이번에는 아래와 같이 tableShow라는 변수를 만들고, 기본값을 false로 만들어 줄 것이에요.
table을 조건에 맞추어서 보여줬다가 안 보여줬다가를 해보기 위해서에요.

 

tableShow 변수 생성

 

그런 뒤 table Tag에 v-if를 넣어주고 해당 변수를 넣어주게 해줄것이에요.
v-if는 조건이 만족되면 해당 Element에 대해 Rendering 처리를 하겠다는 것이에요.

 

변수에 기본값이 `false`이닌까 해당 table이 보이지 않는 것이에요.

 

 

이번에는 해당 변수 기본값을 `true`로 바꿔볼 것이에요.

 

 

그러면 위와 같이 table이 다시 보이게 되는 것을 볼 수 있는 것이에요.

 

 

     🔽  v-show란?

v-show는 똑같이 화면에 보여줄지 말지(rendering을 할지 말지)를 정할 수 있는 것인데, v-if랑은 좀 다른 것이에요.

 

 

 

반응형

 

위와 같이 해당 변수의 기본값이 `false`이다 보니 화면에 보이지 않는 것이에요.

 

     🔽  v-show와 v-if의 차이점

v-if는 조건에 만족하지 않으면 아예 Rendering 자체를 하지 않지만, v-show 같은 경우는 조건에 만족하고, 안 하고를 떠나서 무조건 Rendering을 하는 것이에요.

근데 display option에서 hidden과 같은 것과 같이 실제 html Element는 Rendering은 되었으나, 화면에만 보여주지 않는 것이 바로 v-show인 것이에요.

그럼 이 두가지는 어떨 때 적절하게 사용할 수 있을까요?

개발을 할 때 화면에서 보여졌다가 안 보여졌다가를 자주 처리를 할 때, v-if를 사용하게 되면 Rendering을 했다가 안 했다가가 반복이 되는데, Rendering을 하는 것과 destroy를 할 때 Resource가 많이 들게 되는데, v-show 같은 경우엔 Rendering을 했지만, 화면에 보이지만 않기 때문에 이럴 경우는 v-show를 사용하는 것이 적절한 판단이 될 수 있는 것이에요.

반대로 특정 조건에 이루어졌을 때만, 화면에 보여지게 될 건데, 지속적으로 보였다 안 보였다가 아니라면 예를 들어 관리자만 볼 수 있는 페이지가 있다고 가정 했을 때, 관리자가 아닌 회원은 접근을 막아야 하기 때문에 이럴 때는 v-if를 사용하는 것이 적절한 판단이 될 수 있는 것이에요.

이렇게 되면 관리자가 아닌 이상 해당 Page는 Rendering 자체가 안되기 때문에 Resource도 아낄 수 있고, 보안도 지킬 수 있겠네요!