[React] Active Tab 만들기

cons obj= {
  0: <First/>,
  1: <Second/>,
  2: <Third/>} // components를 import 한 후, obj 의 value 값으로 전달. 


class Tab extends Component {
  
constructor() {
    super();
    this.state = {
      activeId: 0
    };
  }
  
clickHandler= id => {this.setState({activeId: id})} 

render() {
  
return(
<ul>
<li onClick ={()=> this.clickHandler(0)]>First</li>
<li onClick ={()=> this.clickHandler(1)]>Seconde</li>
<li onClick ={()=> this.clickHandler(2)]>Third</li>
</ul>
<div className="contents"> {obj[this.state.activeId]}</div>
  )
 }
}
export default Tab;

<핵심>

가상 obj에 idx 를 key 로, component를 value로 할당한 후, 클릭 위치에 따라 화면을 다시그려준다.