해커뉴스의 포함관계의 댓글 구현시 질문

Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념

작성

163

안녕하세요. 강사님!

해커뉴스의 ask에서 질문을 클릭하면 하나의 질문 item 페이지로 가게 되는데요.

거기서 댓글을 보면 댓글> 댓글> 댓글 이런식의 트리구조가 생기는 걸 볼수 있습니다.

json 데이타도 comments > comments > comments... 이런 다차원 배열로 되어있죠.

이부분을 어떻게 itemView.vue에서 <ul><li><ul><li>...포함 구조를 렌더링 할 수 있을지 궁금합니다.

얼마나 깊어질지 모르는 이런 상태에서 v-for를 써야하는지, 아니면 포함관계 태그를 문자열로 만들어 v-html로

넣어야 하는지 만약 그렇다면 어떻게 구현할 수 있는지 궁금합니다.

혹시 강사님이 이부분의 트리구조 댓글을 구현해 놓으신게 있다면 부탁드리겠습니다.

vuejs javascript

답변 2

Eulsoo Jung

질문자

안녕하세요. 선생님^^

말씀해 주신 힌트를 가지고 검색도 해보고 이렇게 저렇게 해보았는데, 잘 안되네요..

아래처럼 askItem이라는 computed 를 이용한 배열을 가지고 와서 거기의 id 를 key 설정했는데요.

이다음에는 어떻게 해야 v-for를 이용한 <ul><li><ul><li>...구조의 댓글로 뿌릴 수있는지 알려주시면 감사하겠습니다.

<ul class="comments">
<li
v-for="comment in askItem.comments"
v-bind:key="comment.id"
>
<div v-html="comment.content"></div>
</li>
</ul>

장기효(캡틴판교)

지식공유자

안녕하세요 을수님, 좋은 질문이네요! 댓글을 해커 뉴스와 같은 방식으로 표현하신다면 v-html 보다는 v-for 디렉티브를 쓰시는 게 더 효과적일 것 같습니다 :) v-for에 v-bind:key만 잘 입력해주시면 뷰 내부적으로 리스트 조작에 대한 튜닝은 알아서 진행해줄 겁니다..! 한 번 해보시고 잘 안되면 알려주세요 :)

인프런 커뮤니티 질문&답변

해커뉴스의 포함관계의 댓글 구현시 질문