tab component 전환

import React, { Component } from "react";
import First from "./First";
import Second from "./Second";
import Third from "./Third";
import Fourth from "./Fourth";
import "./App.scss";

const tabs = ["First", "Second", "Third", "Fourth"];

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

class Draft extends Component {
	state = {
		activeTabId: 0
	};

	clickHandler = id => {
		this.setState({
			activeTabId: id
		});
	};

	render() {
		console.log("this.state: ", this.state);
		// 비구조화할당
		const { activeTabId } = this.state;

		return (
			<div className="wrapper">
				<ul className="list-wrapper">
					{tabs.map((tab, idx) => {
						return (
							<li
								className={activeTabId === idx ? "selected" : ""}
								key={idx}
								onClick={() => this.clickHandler(idx)}
							>
								{tab}
							</li>
						);
					})}
				</ul>
				<div className="content-box">{obj[activeTabId]}</div>
			</div>
		);
	}
}

export default Draft;