끄적끄적 코딩
Published 2021. 1. 8. 05:45
[React] 배열 값 동적 출력 React
// 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

검색 태그