inflearn logo
강의

講義

知識共有

[React 第1部] 作って比較しながら学習するReact

[純粋なJS 2]タブ1

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

333

geuni

投稿した質問数 11

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

MVC react

回答 3

2

elecch

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

1

jeonghwan

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

2

2wndrhs

2번 코드로 작성한다면

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

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

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

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

0

jeonghwan

더 간결하고 좋네요.

2

jeonghwan

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

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

0

geuni

답변 감사합니다!

0

jeonghwan

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

리액트 1,2부 이후 후속 강의나 준비 중인 다른 강의가 있으신가요?

1

92

2

super.show() 호출하는 이유가 궁금합니다.

1

88

2

class와 constructor를 이용한 객체 지향 프로그래밍

0

229

2

mvc 패턴 질문

0

201

2

Cannot read properties of undefined (reading 'props')

0

274

2

delegate, emit 필요한 이유

0

197

2

어떤거를 먼저 들어야 하는지 도와주세요

1

266

1

localhost:8080 접속 불가

1

284

1

최근검색어 3 풀이에서

1

189

1

import 문제

1

235

1

자동변환 관련

1

204

1

sort() 질문 드립니다.

1

304

2

reset 시점에 searchResult 빈 배열로 update

2

314

2

Button에 Onclick사용

1

249

1

npx lite-server error 확인 요청드립니다.

1

470

2

node 20이상 쓸때 꿀팁

4

760

3

디버깅 관련질문이 있습니다.

1

295

1

[순수JS2]탭 3(풀이) 질문있습니다.

1

229

1

추상화를 어떻게 받아들이면 될까요??

1

436

1

on 메서드 eventName 문의

1

268

1

import에 관해서 질문드립니다

1

258

1

view.js의 on 메소드에 대해 질문드립니다

1

261

1

componentDidMount에서 getKeywordList()를 하는 이유

1

243

1

[순수JS1]검색폼2_git branch 이동관련

1

281

1