[멋쟁이사자처럼] 부트챌린지: 11시간만에 트위터만들기 - v-if, v-for

 

오늘은 `v-if`, `v-for`에 대해서 배웠다. 양은 그렇게 많지 않다. 이걸 배우면서 느낀 건 JSP와 유사한 부분이 많다는 점이다. JSP에 관련된 글은 아래와 같으니 참고.

 

[Java 풀스택 과정 강의] 3월 25일

[Java 풀스택 과정 강의] 3월 25일

 

 

오늘 배운 것

v-if

`v-if`는 말 그대로 특정 조건을 충족했을 경우 해당 태그가 나타나게 된다. 예를 들어, `<p v-if="isLoggedIn">환영합니다!</p>`에서 `isLoggedIn`이 `true`(참)일 경우, 환영합니다! 라는 메시지가 나타난다. 이러한 `isLoggedIn`의 참과 거짓은 이전에 배운 `computed` 등으로 처리할 수 있다. 물론 if 제어문을 배워본 사람들은 알겠지만, `v-else-if`와 `v-else`라는 else if와 else 문도 착실하게 구현할 수 있다.

 

비슷하게 `v-show`가 있는데 `v-show`는 참일 경우 `display`를 나타나게 하는 것이고, `v-if`는 아예 해당 태그의 렌더링 자체에 대한 여부라서 다소 다르다. 필요할 때 사용하면 되겠다.

 

v-for

`v-for`는 `forEach`와 비슷한데, 이건 즉, JSP에서 사용한 `c:forEach`와 완전히 유사하다. JSP의 경우 `<c:forEach var="item" items="${itemList}">`라면, Vue.js에서는 `<div v-for="item in itemList"></div>` 처럼 사용한다. 재미있게도 `v-for`에서 사용하는 문법이 파이썬과 언뜻 비슷해보인다(파이썬이라면 `for item in itemList:` 형식으로 써야 한다).

 

v-for에는 고유값이 있다면 key를 적어야 한다. 따라서 `<div v-for="item in itemList" :key="item.id"></div>` 같이 `:key`가 자주 사용된다. 이 key값을 보면 무언가 떠오를 수도 있는데, 이것은 React의 `.map()`과 비슷하다.

 

{itemList.map((item) -> (
  <div key={item.id}>
    {item.name}
  </div>
))}

 

실무에서는 대체로 key가 있는 것이 좋기 때문에, `:key`와 함께 대체로 사용한다.

 

 

이번 실습 과제에서는 크게 중요한 것은 없었지만(객체 배열에 대해서 설명해주셨는데 아는 내용이라 크게 중요하지 않았다) 실습하면서 안 배열을 `props`로 넘길 때의 방법에 대해서 이야기한다.

 

내가 부모 컴포넌트에서 이런 식으로 배열을 넘긴다면,

export default {
  name: "ParentComponent",
  data() {
    return {
      itemList: [
        {
          id: 1,
          user: {id: 'User', name: '김유저'},
          content: '안녕하세요',
        },
        {
          id: 2,
          user: {id: 'User', name: '김유저'},
          content: '테스트입니다',
        }
      ]
    }
  }
}

<ChildComponent :itemList="itemList"/>

 

자식의 경우 받을 때 타입을 `Array`로 지정하고 받아야한다. 따라서 전개는 다음처럼 된다.

 

export default {
  name: "ChildComponent",
  props: {
    itemList: {
      type: Array,
      required: true,
    }
  },
}

<div v-for="item in itemList" :key="item.id">
	이름: {{ item.user.name }}<br>
	내용: {{ item.content }}
</div>

 

만약 배열이 아니라 그냥 일반 key-value로 된 Object를 넘기려고 한다면 `type:Object`로 지정하면 된다.

 

이걸로 오늘 공부는 종료.