[Hooks] 4. useTabs

API나 다른 어떤것으로부터 무언가를 가져오려고 한다.

그건 내 content가 될거다.

 

section1, section2의 버튼을 만들어주자.

---

선택한 section의 content만 보여주고 싶다면?

initialTab과 allTabs를 받을거다.

그 다음에는 useState가 항상 initalTab을 갖게할거다.

---

내가 현재 선택한 탭의 content의 인덱스를 얻고 싶다면?

useTab(0)일 때 

즉, 배열의 인덱스가 0 일 떄, 첫 번째 요소를 가져온다는 것.

 

currentItem은 allTabs(currentIndex)가 될거다.

 

---

function이 시작될 때 에러를 확인하려고 한다.

실패한 상태일 때 그냥 return

Array.isArray() 메서드는 해당 인자가 Array인지 알려준다.

allTabs가 true가 아니거나 배열이 아니라면 리턴되고 끝날거다.

---

여기 tab이 없는 걸 볼 수 있고 function은 종료 시켰으므로 문제를 제기하지 않는다.

---

 

이제 하고 싶은건 실제로 현재 item의 content를 보여주는거다.

useTabs는 currentItem을 return 해준다.

useTabs(0, content) 에서 첫 번째 인자값에 따라 content 값이 달라진다.

---

이제 자동으로 되게 바꿔보자.

 

이건 state를 업데이트 시켜줄거다.

누군가 클릭하면 index가 무엇이든지 상관없이 chageItem(index)을 실행할거고

chageItem의 index는 index안에 있는 값인 0또는 1로 바꿔준다.

그건 setCurrentIndex의 item을 바꿔줄거다. (이는 state를 바꿔준다.)

 

그래서 currentItem의 currentIndex를 바꿔줄거고 모든것을 새로고침하는거다.

---

<코드기록>

import React, {useState} from "react";
import ReactDOM from "react-dom";

const content = [
  {
    tab: "Section 1",
    content: "I'm the content of the section 1"
  },
  {
    tab: "Section 2",
    content: "I'm the content of the section 2"
  }
]

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


const App = () => {
  const {currentItem, chageItem} = useTabs(0, content); /* content는 배열이므로 [0] */
  return (
    <div className="App">
      {content.map((section, index) => (
      <button onClick={()=> chageItem(index)}>{section.tab}</button>))}
      <div>{currentItem.content}</div>
    </div>
  )
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

 

 

<실행화면>

setState는 모든 걸 새로고침 해준다. (re-render)

---

 

 

 

 

 

 

 

 

 

 

 

※ 본 포스팅은 개인 공부 기록을 목적으로 남긴 글이며 본 사실과 다른 부분이 있다면 과감하게 지적 부탁드립니다.