https://nomadcoders.co μμ κ°μλ₯Ό λ£κ³ μ 리ν λ΄μ© μ λλ€.
const useTabs = (initialTab, allTabs) => {
const [currentIndex, setCurrentIndex] = useState(initialTab);
// function μμν λ μλ¬ νμΈ
if (!allTabs || !Array.isArray(allTabs)) {
return;
}
// index
return {
currentItem: allTabs[currentIndex],
changeItem: setCurrentIndex
}
}
const content = [
{
tab: "section 1",
content: "section1μ content"
},
{
tab: "section 2",
content: "section2μ content"
},
{
tab: "section 3",
content: "section3μ content"
}
]
const App = () => {
const {currentItem, changeItem} = useTabs(0, content);
return (
<div className="app">
<div>
{content.map((section, index) =>
<button onClick={() => changeItem(index)}> {section.tab} </button>
)}
</div>
<div> {currentItem.content} </div>
</div>
)
}
Each child in a list should have a unique "key" prop.
μ΄μ κ°μ μλ¬κ° λ°μκ° λ°μνλ€.
key κ°μ΄ μμ΄μ μλ¬κ° λ°μνλ κ²...
<button onClick={() => changeItem(index)} key={index}> {section.tab} </button>
key={index}
λ₯Ό μ¬μ©νμ¬ ν΄κ²°νλ€!!!