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

geuni님의 프로필 이미지

작성한 질문수

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

[순수JS 2] 탭 1

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

22.03.13 15:14 작성

·

220

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

elecch님의 프로필 이미지

2024. 04. 05. 20:49

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

김정환님의 프로필 이미지
김정환
지식공유자

2024. 04. 06. 07:01

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

2

2wndrhs님의 프로필 이미지

2023. 04. 01. 03:36

2번 코드로 작성한다면

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

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

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

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

김정환님의 프로필 이미지
김정환
지식공유자

2024. 04. 06. 07:01

더 간결하고 좋네요.

2

김정환님의 프로필 이미지
김정환
지식공유자

2022. 03. 19. 10:17

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

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

geuni님의 프로필 이미지
geuni
질문자

2022. 03. 19. 15:17

답변 감사합니다!

김정환님의 프로필 이미지
김정환
지식공유자

2022. 03. 19. 20:11

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

geuni님의 프로필 이미지

작성한 질문수

질문하기