TIL56.tabs menu(React, Vue)

Tabs menu with React

コード#コード#

export default class MenuTab extends Component {
  constructor() {
    super();
    this.state = {
      activeId: 1,
    };
  }

  goToPage = (id) => {
    this.setState({activeId: id})
  };
  

  render() {
    return (
        <div className="wrapper">
          <ul className="tabs">
            <li onClick={() => this.goToPage(1)}>제주도</li>
            <li onClick={() => this.goToPage(2)}>서울</li>
            <li onClick={() => this.goToPage(3)}>부산</li>
          </ul>
          <div className="contents">
            {this.state.activeId === 1 && <First />}
            {this.state.activeId === 2 && <Second />}
            {this.state.activeId === 3 && <Third />}
          </div>
        </div>
       );
  }
}

リファクタリングコード

//상수이기 때문에 클래스 밖에서 변수 선언 + 대문자로 작성
const MAPPING_OBJ = {
  1: <First />,
  2: <Second />,
  3: <Third />,
};

//객체로 맵핑
const MAPPING_ARRAY = ["제주도", "서울", "부산"];

export default class MenuTab extends Component {
  constructor() {
    super();
    this.state = {
      activeId: 1,
    };
  }

  goToPage = (id) => {
    this.setState({ activeId: id });
  };

  render() {
    return (
        <div className="wrapper">
          <ul className="tabs">
            {MAPPING_ARRAY.map((region, idx) => (
              <li onClick={() => this.goToPage(idx + 1)}>{region}</li>
            ))}
          </ul>
          <div className="contents">{MAPPING_OBJ[this.state.activeId]}</div>
        </div>
     );
  }
}

Tabs menu with Vue

コード#コード#

<template>
    <div class="registerWrapper">
        <div>
            <ul class="tabs">
                <li
                    :class="activeId === 1 ? 'activeTab' : ''"
                    @click="clickTab(1)"
                >
                    로그인
                </li>
                <li
                    :class="activeId === 2 ? 'activeTab' : ''"
                    @click="clickTab(2)"
                >
                    회원가입
                </li>
            </ul>
            <div class="content" v-if="activeId === 1">
                <Login />
            </div>
            <div class="content" v-else>
            <Signup />
            </div>
        </div>
    </div>
</template>

<script>
import Login from "./components/Login";
import Signup from "./components/Signup";

export default {
    components: { Login, Signup },
    data() {
        return {
            activeId: 1
        };
    },
    methods: {
        clickTab(id) {
            this.activeId = id;
        },
    }
};
</script>