TIL. MenuTap을 구현해보자 - 8/21

- MenuTap

nav바에서 가고싶은 곳을 클릭했을때 그 곳에 맞는 컴포넌트가 나오게 하고 싶은 경우가 있다.
이럴땐 어떻게 해야할까?

다양한 방법 중에 가장 괜찮았던 방법을 한번 사용해 보자.

1. 변수에 컴포넌트 담기

---

먼저 가고싶은 컴포넌트들을 임포트 시킨 후 변수에 object 형태로 담아준다.

import First from "경로"
import Second from "경로"
import Third from "경로"

const componentList = {
  0 : First,
  1 : Second,
  2 : Third
}

2. state에 변수 만들어 놓기

---

처음으로 키자마자 나올곳은 First이니 그렇게 설정해 놓자

this.state = {
  goTo : 0,
}

3. li태그에 onclick이벤트 주기

---

클릭했을때 스테이트의 goTo의 값이 가고자하는 경로로 바뀔 수 있도록 코드를 짜준다.

clickHandler = (num) => {
  this.setState({
    goTo : num,
}

<li onClick = {() => this.clickHandler(0)>Frist</li>
<li onClick = {() => this.clickHandler(1)>Second</li>
<li onClick = {() => this.clickHandler(2)>Third</li>

4. 컴포넌트를 담은 객체로 컴포넌트를 호출해보자

---

{componentList[this.state.goTo]}

이런식으로 넣으면 끝!

이제 자유롭게 사용해보자