REACT active-tab 구현하기

Nav바처럼 click이나 hover하면 메뉴가 내려오는 active-tab 구현하기

const obj = {
  0 : <First />,
  1 : <Second />,
  2 : <Third />
}

-렌더하는 컴포넌트를 객체에 저장한다.
-상수이므로 class안에서 쓸 이유가 없다.

class App extends Component {
  state={
    activeTab : 0,
  }
  clickHandler = (id) => {
    this.setState({
      activeTab: id
    })
  }
  render() {
    return (
      <div className="wrapper">
        <ul className="tabs">
          <li onClick={() => this.clickHandler(0)}>First</li>
          <li onClick={() => this.clickHandler(1)}>Second</li>
          <li onClick={() => this.clickHandler(2)}>Third</li>
        </ul>
        <div className="contents">
          {obj[this.state.activeTab]}
        </div>
      </div>
    );
  }
}
export default App;

-li를 클릭하면 clickHandler의 인자(0,1,2)를 전달해 activeTab의 state값이 전달받은 인자로 변경된다.
-변화한 activeTab의 state값을 객체 obj의 인덱스값으로 전달해(obj[this.state.activeTab]) 클릭한 li에 매칭된 컴포넌트를 보여준다.