inflearn logo
강의

講義

知識共有

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

[おすすめ/最近の検索語]おすすめの検索語1

componentDidMount에서 getKeywordList()를 하는 이유

解決済みの質問

241

shs0707

投稿した質問数 2

1

안녕하세요. 강의 재밌게 잘 듣고 있습니다.

강의를 듣다 궁금증이 생겨 질문 남깁니다. 

store.getKeywordList() 메서드를 사용해서 keywordList를 storage에서 가져오는 작업을

componentDidMount에서 하셨는데,

main.js의 search 메서드에서 submit이 발생했을 때, store에서 searchResult를 가져오는 것처럼

keyword tab을 클릭했을 때 keywordList를 가져오는 방식으로 작성하지 않고 componentDidMount를 사용하신 이유가 궁금합니다.

 

 

아래와 같이 onClick과 핸들러를 사용하여 작성해도 정상적으로 동작하는 것처럼 보이는 것을 확인했습니다.

  handleTabClick(tabType) {
    if (tabType == TabType.KEYWORD) {
      const keywordList = store.getKeywordList();
      this.setState({ keywordList });
    }
  }

...

    const tabs = (
      <>
        <ul className="tabs">
          {Object.values(TabType).map((tabType) => {
            return (
              <li
                className={tabType === this.state.selectedTab ? "active" : ""}
                key={tabType}
                onClick={() => { this.setState({ selectedTab: tabType })
                                  handleTabClick(tabType)}}
              >
                {TabLabel[tabType]}
              </li>
            );
          })}
        </ul>
        {this.state.selectedTab === TabType.KEYWORD && keywordList}
        {this.state.selectedTab === TabType.HISTORY && historyList}
      </>
    );

react mvc

回答 1

1

jeonghwan

클릭시 탭 데이터를 조회하는 방식을 말씀하시는 거군요? 그렇게 구현할 수도 있을것 같습니다. 수업에서는 컴포넌트가 마운트되었을 때 데이터를 조회하는 것인데요. 컴포넌트 생명주기에서 한 번만 데이터를 가져오게 됩니다.

이것은 데이터의 성격에 따라 다른데요. 화면 렌더링시 변하지 않는 값은 컴포넌트 마운트 시점에 불러오고요. 검색 결과처럼 바꿔야하는 값은 매번 유저 인터렉이션이 있을 때마다 호출해 주는 좋습니다.

0

shs0707

아하, 탭을 클릭할 때마다 데이터를 조회하면 성능이 좋지 않겠네요.

답변 감사합니다!

 

질문이 하나 더 있는데요.

setState에 의해 다시 랜더링될 때, 내부 컴포넌트의 componentDidMount도 동작을 하나요..?

 

예를 들어, App의 search 메서드 내에서 setState()가 동작하면서 KeywordTab 컴포넌트의 componentDidMount가 동작하는지에 대한 질문입니다.

0

jeonghwan

componentDidMount는 컴포넌트가 렌더 트리에 마운트 될때 호출되는 메소드입니다. 컴포넌트 생애주기 동안 한 번만 호출되기 때문에 상태 변화와는 무관합니다. setState를 호출하더라도 해당 컴포넌트의 componentDidMount가 호출되지는 않아요.

수업에서는 search 메서드에서 스토어게게 검색 키워드를 전달하는데요.

  • store.search(searchKeyworkd)

스토어가 검색 이력에 추가하는 역할을 하게될 것입니다. 이후에 상태를 갱신하면(this.setState) 다시 렌더(this.redner)되는 구조에요.

0

shs0707

답변 감사합니다!!

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

1

90

2

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

1

81

2

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

0

224

2

mvc 패턴 질문

0

197

2

Cannot read properties of undefined (reading 'props')

0

270

2

delegate, emit 필요한 이유

0

196

2

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

1

265

1

localhost:8080 접속 불가

1

282

1

최근검색어 3 풀이에서

1

188

1

import 문제

1

231

1

자동변환 관련

1

203

1

sort() 질문 드립니다.

1

304

2

reset 시점에 searchResult 빈 배열로 update

2

311

2

Button에 Onclick사용

1

247

1

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

1

470

2

node 20이상 쓸때 꿀팁

4

758

3

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

1

295

1

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

1

229

1

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

1

435

1

[검색폼 1] View.js 파일 질문과 학습 질문

1

329

1

on 메서드 eventName 문의

1

266

1

import에 관해서 질문드립니다

1

254

1

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

1

258

1

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

1

279

1