• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

Tab 상수 관련되서 질문 드립니다.

22.03.13 15:14 작성 조회수 157

1

 TabLable의 프로퍼티명을 상수 객체로 선언하신 이유가 있을까요? 추후 구현에서 TabType에 따라 안의 컨텐츠가 달라지니 map안에서 type === 'KEYWORD'와 같이 하드코딩 방지하기 위해서 일까요?

(1)

const TabType = {
  KEYWORD: 'KEYWORD', // 추천
  HISTORY: 'HISTORY'  // 최근
};

const TabLable = {
  [TabType.KEYWORD]: '추천 검색어',
  [TabType.HISTORY]: '최근 검색어'
}

Object.values(TabType)
            .map(tabType => ({ tabType, tabLable: TabLable[tabType] }))
            .map(this._getTab)
            .join('')

-------------------------------

(2)
const TabLable = {
  'KEYWORD': '추천 검색어',
  'HISTORY': '최근 검색어'
}

Object.entries(TabLable)
        .map((row) => {
          const [ tabType, tabLable ] = row;
          return { tabType, tabLable }
        })
        .map(this._getTab)
        .join('');

답변 3

·

답변을 작성해보세요.

2

박찬홍님의 프로필

박찬홍

2024.04.05

이거 이해안되서 애먹고 있었는데 이런식으로 바꿔 생각하면 되는군요 감사합니다.(꾸벅)

수업에서 사용한 코드가 좀 어려우셨나 봅니다. 읽기에 편한 게 좋다고 생각합니다.

2

2wndrhs님의 프로필

2wndrhs

2023.04.01

2번 코드로 작성한다면

const TabLable = {
  KEYWORD: '추천 검색어', 
  HISTORY: '최근 검색어', 
};

Object.entries(TabLable).map(this._getTab).join('');

_getTab([tabType, tabLable]) {
  return `
    <li data-tab='${tabType}'>
      ${tabLable}
    </li>
  `;
}

이런식으로 작성하는 것도 좋아 보이네요 😊

더 간결하고 좋네요.

2

질문하신 내용을 보고 코드를 보니 TabType이 없어도 될것 같습니다. 습관적으로 타입을 선언하고 이걸 다른 곳에서 사용하려고 타입을 선언한 것인데요. 말씀하신대로 하드코딩을 방지하려는 의도입니다.

제안해주신 2번 코드로도 충분합니다.

geuni님의 프로필

geuni

질문자

2022.03.19

답변 감사합니다!

ㅎㅎ 다음 수업에도 궁금한 점 있으시면 질문주세요