[React] React Hook-1.2 useState를 활용한 useTabs

< useState를 활용한 useTabs >

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";

const content = [
  {
    tab: "Romnace and Musical",
    content: "I think you like SingStreet, LaLaLand, The Greatest Show!"
  },
  {
    tab: "Fantasy",
    content: "Avengers, Harry Potter, The Lord of the Rings!"
  }
];

const useTabs = (initialTab, tabArray) => {
  if (!tabArray || !Array.isArray(tabArray)) return;
  const [currentIndex, setCurrentIndex] = useState(initialTab);
  return {
    currentItem: tabArray[currentIndex],
    changeItem: setCurrentIndex
  };
};

export default function App() {
  const { currentItem, changeItem } = useTabs(0, content);
  return (
    <div className="App">
      <h1>Which genre do you prefer more?</h1>
      {content.map((genreTab, genreIndex) => (
        <button onClick={() => changeItem(genreIndex)}>{genreTab.tab}</button>
      ))}
      <div>{currentItem.content}</div>
    </div>
  );
}

 

< 배열 생성 >

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";

const content = [
  {
    tab: "Romnace and Musical",
    content: "I think you like SingStreet, LaLaLand, The Greatest Show!"
  },
  {
    tab: "Fantasy",
    content: "Avengers, Harry Potter, The Lord of the Rings!"
  }
];

- tab과 content 요소를 가진 배열 content를 생성한다.

 

< useTabs >

const useTabs = (initialTab, tabArray) => {
  if (!tabArray || !Array.isArray(tabArray)) return;
  const [currentIndex, setCurrentIndex] = useState(initialTab);
  return {
    currentItem: tabArray[currentIndex],
    changeItem: setCurrentIndex
  };
};

- content가 담긴 배열(tabArray)이 전달되지 않았거나 전달된 tabArray가 배열이 아닌 경우 return을 통해 함수를 종료한다.

- useState를 initialTab로 초기화한다. 

    → currentIndex가 initialTab으로 초기화된다.

- content배열의 currentIndex번 째 요소와 setCurrentIndex 함수를 각각 setCurrentIndex, changeItem의 이름으로 return 한다.

 

 

< App() >

export default function App() {
  const { currentItem, changeItem } = useTabs(0, content);
  return (
    <div className="App">
      <h1>Which genre do you prefer more?</h1>
      {content.map((genreTab, genreIndex) => (
        <button onClick={() => changeItem(genreIndex)}>{genreTab.tab}</button>
      ))}
      <div>{currentItem.content}</div>
    </div>
  );
}

 

1. 

  const { currentItem, changeItem } = useTabs(0, content);

- useTabs 함수의 return 값을 가져온다.(currentItem와 changeItem이름 그대로 가져와야함)

- initialTab으로 0번 째 index 값을 넘겨준다.

 

2.

{content.map((genreTab, genreIndex) => (
    <button onClick={() => changeItem(genreIndex)}>{genreTab.tab}</button>
))}

- tab과 content가 들어있는 content를 map으로 순회하며 각 content의 요소와 index를 각각 genreTab와 genreIndex로 간주한다.

- button이 click되면 해당 genreTab의 genreIndex 이용해 현재 index를 변경한다.

 

3.

<div>{currentItem.content}</div>

- currentItem의 content 보여주기

 

< 초기 화면 →  0번 째 index의 content를 보여준다. >

< 두 번째 button을 선택한 화면 >