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

[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)

[순수JS 2] 탭 1

작성

226

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('');

MVC react

답변 3

elecch

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

김정환

지식공유자

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

2wndrhs

2번 코드로 작성한다면

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

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

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

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