Vue : Basic Syntax 3 (v-if, v-for)

이젠 서론 쓸 시간도 없다! 바로 본론!

---

v-if

: 조건부 렌더링을 수행하는 directive

: 표현식 값의 true/false를 기반으로 요소를 렌더링

: django html에서 클라이언트의 상태와 요청에 의한 출력 화면과 유사

html 구성은 버튼을 클릭 할 때, isSeen의 변수를 활용한다

초기 설정값 true

 

위처럼 정의했을 때, 클릭할 때마다 isSeen은 !isSeen에 의해 true는 false로, false는 true로 바뀌는 반응형 변수를 활용할 수 있으며, p tag 내부에 v-if와 v-else의 조건에 의해 html에 보이는 화면이 바뀐다.

버튼을 클릭할 때마다 바뀐다.

 

if와 else가 있다면 짝궁인 else-if도 있다.

총 4가지 경우의 수를 나누었다

반응형 변수에 할당

출력

 

반응형 변수에 random함수를 입혀준다면 호출 시, 랜덤하게 출력되는 모습도 확인할 수 있다.

그렇다면 모든 tag에 v-if를 입혀주어야 할까? 물론 아니다. 전체를 감싸고있는 태그면 이하 자식 태그들은 모두 묶여서 출력 또는 미출력이 가능하다.

div tag 두개를 template 태그로 묶어주었다

출력 결과

 

name을 바꿔주면 아무것도 출력되지 않는다. 이때 사용한 template tag의 유의사항이 있다.

 

근데 위와 같은 역할을 할 수 있는 Directives가 하나 더 있다. 이전에 Built-in Directives를 한번에 정리 해 두었을 때, v-show가 있었다는 것이 기억날 것이다.

v-if	v-show
조건부가 true일 경우 해당 Element 렌더링, 쌓기 가능 조건에 만족하지 않는다면 렌더링은 되어있지 않음 동적 데이터에 의해 조건부가 만족될 경우, 추가 렌더링	v-if와 동작은 동일, v-else-if 나 v-else 같은 동작은 없음 조건에 부합할 경우 숨긴 렌더링 요소를 등장시킴 style="display:none"을 뜻함
- Cheap initial load, expensive toggle : 초기 조건이 false인 경우 아무 작업도 수행하지 않음 : 토글 비용이 높다	- Expensive initial load, cheap toggle : 초기 조건에 관계 없이 항상 렌더링 : 초기 렌더링 비용이 더 높음
콘텐츠를 자주 전환해야하는 경우에는 미리 렌더링이 되어있는 v-show를 이용하는 것이 효율적 실행 중에 조건이 변경되지 않거나 변경이 거의 없는 경우에는 v-if를 권장

 

v-show의 경우 style태그의 display:none을 의미하기 때문에 페이지 자체의 렌더링은 되어있는 상태에서 보여줄 것인지 말것인지를 결정할 수 있다. 반대로 v-if는 조건에 만족해야 렌더링이 추가로 되는 것이므로 데이터를 추가로 주고받아야 하는 경우가 생긴다.

렌더링 되어있지만 화면에 보이지 않는 상태

 

---

v-for

: 소스 데이터(Array, Object, Number, String, Iterable)를 기반으로 요소 또는 템플릿 블록을 여러번 렌더링할 수 있다

: alias in expression 형식의 특수 구문을 사용한다. (이는 django나 python에서도 for문을 사용할 때 자주 이용했던 방식으로 for item in items는 items를 순회하면서 item이라는 변수로 반복되고있는 요소를 나타내는 것을 의미한다.)

: 순회하는 대상의 소스 데이터에 따라 순회 데이터를 지정할 수 있다

 

Array 데이터인 경우 index와 순회하는 리스트의 객체를 출력하는 모습

Object 데이터인 경우 index와 key와 value 모두 순회하는 모습

 

모든 데이터가 필요한 것이 아니라면 index는 굳이 명시할 필요 없다. 또, 순회 시 사용하는 변수명은 바꿀 수 있다. 하지만 주의할 점은, 데이터가 호출되는 위치는 고정이라는 것에 유의하자.

index와 value의 위치를 바꾸고 직접 할당했음에도 index에 원래 위치인 value가 할당되는 모습을 볼 수 있다

 

myArr내부의 객체 데이터에 직접 접근하는 모습

문제없이 출력

 

이번에는 중첩된 v-for문의 출력을 확인해보자, python에서도 2중 for문을 돌아 2차원 배열을 만들거나 순회하기도 했는데, 동일한 방식이라고 생각하면 된다. 예를들어, 리스트를 순회하면서 내부 객체를 순회하는 것처럼 말이다.

myInfo라는 array를 순회하면서 info(객체)의 데이터의 friends를 array 순회하는 형태

결과

v-for와 key

 

v-for에는 key와 함께 사용되어야 하는데, 이는 내부 컴포넌트의 상태를 일관 되게 하여 데이터의 예측 가능한 행동을 유지하기 위함이다. key는 반드시 각 요소에 대한 고유한 값을 나타낼 수 있는 식별자여야만 한다. database에서 pk와 유사하다. 이를 표현하기 위해서 객체의 경우, id 값을 넣어주기도 한다.

실질적으로 html에 호출하진 않지만, key를 할당 해놓는 것이다

• number 혹은 string으로 나타낸다
• Vue의 내부 가상 DOM 알고리즘이 이전 목록과 새 노드 목록을 비교할 때, 각 node를 식별하는 용도로 사용한다
• Vue 내부 동작 관련 부분으로 최대한 작성한다

간혹 index를 사용하는 경우를 볼 수 있는데, 권장사항은 아니다. 객체의 경우 index가 데이터의 대표성을 띄는 경우가 아니기 때문이다. 하지만 배열을 순회하는 경우 데이터에서 사용할 수 있는 것은 index 밖에 없기 때문에 불가피하게 key 값으로 index를 넣어주는 경우는 있다. 물론 이 역시 권장 사항은 아닌데, 배열이 동적으로 변하게 되면 index 역시 재정렬 되기 때문에 렌더링에 오류가 생길 수 있다. 따라서 특별한 경우가 아니라면 index를 사용하지 않으며 고유한 식별자를 사용하여 key를 설정해주어야 한다.

 

동일 요소에 v-for & v-if

 

Vue에서 while의 의미를 띄는 반복문 + 조건문은 존재하지 않는다. 그렇다면 조건문과 반복문을 동시에, 즉 v-for과 v-if를 동시에 사용할 수 있을까? 아쉽지만 불가하다. 동일한 요소에서 v-if가 v-for보다 우선순위가 높기 때문이다. 물론 v-if와 v-for가 서로 다른 변수에 접근한다면 문제가 되지 않는다. 하지만, for 내부의 요소를 접근할 때, 같은 요소 내에서는 접근이 불가하다.

반복문이 나오고 반복문 내부의 데이터에 접근하는 조건문을 예시로 들자

아쉽게도 todo에 대한 instance를 찾지 못하는 오류를 보여준다

 

간단하게 출력할 데이터에 추가로 template를 감싸서 출력해주기만 하면 된다.

반복문과 조건문을 나누어 활용한다

 

 

+ 부록

HTML <template> element

: 페이지가 '로드' 될 때 렌더링 되지 않지만, JavaScript를 사용하여 나중에 문서에서 사용할 수 있도록 하는 HTML을 보유하기 위한 메커니즘으로 보이지 않는 wrapper 역할을 한다.

: 실제 HTML 개발자 도구에서는 확인되지 않는다.

---

간단하게 v-for와 v-if에 대해서 알아봤는데, 아직 computed와 watch가 남아있다. 반응형을 위해 모두 알아야하는 방법들이므로 열심히 공부해보자