카테고리 분류하는 사이드바 만들어보기

미리보기(코드)

function CommunitySidebar() {

  return (
    <div className='community-left'>
      <div className='community-sidebar'>
        {category?.map((value, i) => {
          return (
            <div className='sidebar-menu ' key={i}>
              <a className='sidebar-title' href={`/community/${value.name}`}>
                <strong>{value.name}</strong>
                <FontAwesomeIcon icon={faAngleRight} />
              </a>
              {
                value.sub?.map((subvalue, index) => {
                  return (
                    <a className='sidebar-subtitle'>&nbsp;-&nbsp;&nbsp;&nbsp;{subvalue.name}</a>
                  )
                })
              }
            </div>
          )
        })
        }
      </div>
      <div className='community-sidebar-space'></div>
    </div>
  )
}

export default CommunitySidebar;

 

미리보기(사진)

 

목적

커뮤니티 기능의 사이드바를 제작한 내용이다.

커뮤니티를 제작하다보니 글들에 카테고리를 걸어두어 같은 카테고리끼리 묶어두는 기능이 필요했는데, 사이드바를 통해 해결하고자 하였다.

필요한 기능

<정보 게시판>, <코딩 게시판>, <홍보 게시판>, <문의 게시판> 4개의 큰 카테고리 안에는 각각 작은 카테고리가 있다.

큰 카테고리의 이름을 누르면 그 안의 글들을 모두 보여준다.

작은 카테고리는 누를 필요가 없는데 글들을 분류하는 기능으로 만들어두었다.

 

고민사항

1. 카테고리들의 이름을 전부 데이터베이스에 저장하고, 매번 axios 요청을 통해 카테고리 명을 불러올까?

이유 : 추후 카테고리를 추가하거나 삭제할 수 있기 때문에 수정에 용이한 방법을 사용하고자 함

선택하지 않은 이유 : 커뮤니티 기능에서 항상 필요한 정보이기 때문에 너무 잦은 통신을 필요로 할 수 있음.

 

2. 그럼 카테고리들의 이름을 전부 Client에 달아두는 건 어떨까?

이유 : 어차피 자주 사용하고 한 번 불러오면 변함없는 사항이기 때문에 첫 통신 시 Client에 보내주는 것이 가장 효율적이라 판단

 

카테고리 데이터 형식

export let category = [{
  name: '정보',
  sub: [
    {
      id: 0, 
      name: '문제추천',
    },
    {
      id: 1,
      name: '코딩 뉴스',
    },
    {
      id: 2,
      name: '팁과 노하우',
    }
  ]
}, {
  name: '코딩 게시판',
  sub: [
    {
      id: 3,
      name: 'Q&A',
    },
    {
      id: 4,
      name: '자유',
    },
    {
      id: 5,
      name: '언어',
    },
    {
      id: 6,
      name: '프로젝트',
    },
    {
      id: 7,
      name: '학부생 공부비법',
    }
  ]
}, {
  name: '홍보 게시판',
  sub: [
    {
      id: 8,
      name: '대회',
    },
    {
      id: 9,
      name: '내 문제 홍보',
    },
  ]
}, {
  name: '문의 게시판',
  sub: [
    {
      id: 10,
      name: '문의하기',
    },
    {
      id: 11,
      name: '내 문의',
    }
  ]
},
]

그래서 이렇게 만들었다.

큰 카테고리명을 하나의 객체로 만들고 작은 카테고리명을 sub라는 list 속에 넣어 4개의 객체를 만들었다.

이러면 게시물을 저장할 때 카테고리 명을 id로 구분할 수 있기 때문에 숫자로 저장할 수 있게 되고, 때문에 소 카테고리 수정에 용이하다.

또한 큰 카테고리 명으로 분류된 게시물들을 모아보고자 할 때, 숫자로 구분한 데이터를 받아올 수 있게 되어 더욱 효율적이다.

 

예시 )

정보 게시판을 눌렀을 때, 게시물의 id 값이 0~2인 글들만 최신순으로 가져와달라고 서버에 요청하면 된다.

 

 

---

~학부생의 사이드프로젝트 시 제작한 코드에 대한 내용입니다. 완벽하지 않으니 모든 피드백 환영합니다!~