// useTabs
import { useState } from "react";
const useTabs = (initialTab, allTabs) => {
const [currentIndex, setCurrentIndex] = useState(initialTab);
if (!allTabs || !Array.isArray(allTabs)) { // 값이 없거나 배열이 아닌 경우 리턴
return;
}
return {
currentItem: allTabs[currentIndex], // 두번째 파라미터의 배열 n번 인덱스 값 반환
changeItem: setCurrentIndex, // 해당 함수를 통해 n번 인덱스 수정
};
};
export default useTabs;
// index.js
import React, { useState } from "react";
import ReactDOM from "react-dom";
import useTabs from "./useTabs";
const content = [
{
tab: "Section 1",
content: "This is the content of the Section 1",
},
{
tab: "Section 2",
content: "This is the content of the Section 2",
},
];
const App = () => {
const { currentItem, changeItem } = useTabs(0, content);
return (
<div className="App">
<div>
<div>useTabs</div>
<div>
{content.map((section, index) => (
<button key={index} onClick={() => changeItem(index)}> <!-- useTabs에 currentIndex 수정 -->
{section.tab} <!-- content[index].tab 출력 -->
</button>
))}
</div>
<div>{currentItem.content}</div> <!-- content[index].content 출력 -->
</div>
</div>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
배열 값을 반환하는 useTabs 함수는 useTabs.js로 분리하였습니다.
currentItem부분을 통해 배열 값이 반환되며,
changeItem함수를 사용하여 배열의 index부분을 수정할 수 있습니다.
'React' 카테고리의 다른 글
[React] useRef (0) | 2021.01.08 |
---|---|
[React] title (0) | 2021.01.08 |
[React] Input (0) | 2021.01.08 |
[React] useState (0) | 2021.01.08 |
[React] 간단한 게임 사이트 (0) | 2020.12.18 |