[Vue.js] 컴포넌트화 하여 게시판 글 리스트 만들기

내가 만들고자 하는 화면(피그마) & 현재까지 만든 화면

PostList.vue : 여러 개의 PostItem을 보여주는 뷰
PostItem.vue : 하나의 게시글
Community.vue : 메인 화면

- 문제 상황

게시글을 더 보기 위한 버튼인 '더보기 버튼'을 PostList.vue에 넣는 게 좋을까?
아니면 그냥 메인화면인 Community.vue에 넣는 게 좋을까?

PostList.vue에 '더보기 버튼'을 넣는 경우

장점:

• 컴포넌트의 기능 확실: PostList.vue는 게시글 목록과 관련된 모든 기능 몰빵해서 컴포넌트 역할 명확히 함
• 상태 관리의 단순: PostList.vue 내부에서 게시글 목록과 로딩 상태를 관리하므로, 부모-자식 간의 데이터 흐름이 간단

단점:

• UI 복잡도: PostList.vue 내부에 UI 요소 추가로 복잡해질 수 있음
  
  

Community.vue에 '더보기 버튼'을 넣는 경우

장점:

• 레이아웃 용이: '더보기 버튼'을 고정된 위치에 배치하여 전체 화면 레이아웃을 쉽게 제어 가능
  - UI 요소 분리: UI 요소가 분리되어 PostList.vue는 게시글 목록에만 집중 가능

단점:

• 상태 관리의 복잡: 더보기 버튼 클릭 시 상태를 PostList.vue로 전달하여 목록을 갱신하는 로직이 필요.
  -> 부모-자식 간의 데이터 흐름을 복잡하게 만들 수 있음.
  
  
  
  
  
  

- 문제 해결 과정

찾아보니까 Facebook이랑 Twitter도 게시물 목록 컴포넌트 안에서 관리한다.
대기업이 그러는 이유는 있겠지..ㅋㅋㅋ

일단 PostList.vue에 넣은 다음 '더보기 버튼'을 어떤 식으로 정렬할 지 생각해보고 레이아웃에 이상이 없으면 그대로 하는 게 좋을 것 같다. 왜냐하면 데이터 간의 흐름을 간단히 하는 게 더 중요하고 어렵다고 생각하는 편이라..!

//PostList.Vue의 스타일 코드

<style scoped lang="scss">
  .post-list-container {
    background-color: #a0a0a0;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* 부모 요소에 높이를 채우도록 설정 */
    justify-content: space-between;
  }
</style>

'더보기 버튼'의 위치관리가 어려울 것 같았서 쫄았는데 생각보다 어렵지 않았다.

• 해결 단계
  1. post-list-container의 크기를 처음엔 height=100%; 설정 -> 실패
  : height=100%하면 부모의 크기랑 같아서져서 위에 리스트 위에 있는 버튼이 찌그러졌다.(버튼의 크기를 정확히 설정하지 않았기 때문에)
  
  2. flex-grow; 후 justify-content: space-between; 설정 -> 성공!!
  : 'postlist'와 '더보기 버튼'을 각각 div박스로 묶고, 둘의 거리를 일정하게 유지하도록 하면 post-list-container 안에 아이템이 'postlist'와 '더보기 버튼' 2개만 있었기 때문에 양 끝에 배치가 되었다.