• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    해결됨

componentDidMount에서 getKeywordList()를 하는 이유

23.12.08 11:19 작성 23.12.08 11:23 수정 조회수 130

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}
      </>
    );

답변 1

답변을 작성해보세요.

1

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

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

shs0707님의 프로필

shs0707

질문자

2023.12.09

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

답변 감사합니다!

 

질문이 하나 더 있는데요.

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

 

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

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

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

  • store.search(searchKeyworkd)

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

shs0707님의 프로필

shs0707

질문자

2023.12.10

답변 감사합니다!!