웹사이트에서 많이 사용되고 있는 'tabs menu'를 리액트와 뷰를 이용하여 만들어보자.
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>
);
}
}
<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>
뷰가 쓰다보면 간결해서 좋은점이 많지요!
좋은 글 잘보구 갑니다!