동물앨범만들기 2-2

한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지

2. 동물 앨범 만들기-2-2

해결된 질문

작성

export default function TabBar({$app, initialState, onClick }) {
  this.state = initialState;
  this.onClick = onClick;

  this.$target = document.createElement('div');
  this.$target.className = 'tab-bar';
  $app.appendChild(this.$target);

  // 필요한 버튼
  this.template = () => {
    let temp = `<div id="all">전체</div>
    <div id ="penguin">펭귄</div>
    <div id ="koala">코알라</div>
    <div id="panda">판다</div>`;

    return temp;
  };

  this.render = () => {
    this.$target.innerHTML = this.template();

    //$currentTab변수에 현재 state값과 동일한 아이디를 갖는 버튼 요소 할당
    let $currentTab = document.getElementById(this.state);
    //$currentTab ? ($currentTab.className = "clicked") : "";
    $currentTab && ($currentTab.className = "clicked");

동물 앨범 만들기 2-2 강의부분에서

$currentTab 변수에 현재 state값과 동일한 아이디를 갖는 버튼 요소를 할당한다고 하셔쓴데,

왜 this.state가 들어가는지 이해가 가지 않습니다.

this.state값은 initialState이고 initialState은 APP컴포넌트에서 빈문자열이었는데...그 뒤로 추론이 되지 않아서....

흐름? 좀 알려주세요ㅡㅠ

javascript rest-api spa dom

답변 2

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. ggang89님, 질문 주셔서 감사합니다.

지금 작성하신 TabBar 컴포넌트에서는 상태 관리와 관련된 부분이 핵심입니다. this.state는 현재 탭바 컴포넌트가 어떤 상태에 있는지를 나타내며, 이는 다른 컴포넌트들과의 상호작용에서 중요합니다.

`this.state`의 활용 흐름 설명:

초기 상태:
- TabBar가 초기화될 때, initialState를 받아서 this.state로 설정합니다. 기본적으로 App에서 전달된 초기 상태를 받게 됩니다.
HTML 템플릿과 버튼 요소:
- template 함수는 UI를 구성하는 HTML 문자열을 생성하고, 이 문자열에는 각각의 버튼들(예: 전체, 펭귄, 코알라, 판다)이 포함됩니다.
현재 탭의 표시:
- render 함수에서 this.state를 기준으로 현재 어떤 탭이 선택되었는지를 확인합니다.
- document.getElementById(this.state)는 this.state에 저장된 값을 기준으로 해당하는 버튼을 찾습니다.
- 이 버튼의 id와 일치하는 HTML 요소의 className을 "clicked"로 설정하여 시각적으로 현재 선택된 탭임을 표시합니다.
현재 상태의 변화:
- 초기 상태는 빈 문자열일 수도 있지만, 주로 탭을 클릭하면서 상태가 변화합니다. onClick 핸들러를 통해 새로운 탭이 클릭될 때마다 this.state를 업데이트하며, render 함수가 다시 호출되어 UI가 갱신됩니다.

관련 질문 URL:
- 상태관리와 SPA - React와 유사한 상태 관리에 대한 개념을 이해하는 데 도움이 될 수 있습니다.

이 흐름을 이해하는 것이 현재 구현할 SPA 구조에서 상태 관리의 중요한 부분이며, JavaScript로 컴포넌트를 만들 때 상태 변화에 따라 UI를 업데이트하는 기본적인 패턴입니다. 만약 추가적인 설명이 필요하시다면, 이어서 질문해 주세요.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

효빈 Hyobin

지식공유자

안녕하세요 🙂 질문 주셔서 감사합니다.

$currentTab 변수에 현재 state값과 동일한 아이디를 갖는 버튼 요소를 할당하는 이유는,
동물 앨범 TabBar 부분에서 어떠한 부분이 선택되었는지를 표시하기 위함이죠.

질문 주신 부분을 설명해드리자면, 웹 페이지가 실행이되면 가장 먼저 App.js 코드가 실행됩니다.

init 함수를 통해 초기 상태값들이 설정되고, this.setState를 통해 초기 상태값들이 설정됩니다.
이 과정에서 tab.setState(this.state.currentTab)을 통해 TabBar의 state가 현재 App 컴포넌트의 state.currentTab인 'all'로 변경됩니다.

initialState는 초기 상태값을 의미하기 때문에 초반에는 빈 문자열로 설정해두었지만,
헷갈리신다면 initialState에 this.state.currentTab을 작성하셔도 괜찮을 것 같습니다 😄

아래에 인프런 AI 인턴이 남긴 댓글도 함께 읽어주시면 좋을 것 같네요! 좋은 질문 감사합니다!

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

동물앨범만들기 2-2

this.state의 활용 흐름 설명:

`this.state`의 활용 흐름 설명: