[React/실전형 리액트 Hooks/노마드코더] #1 USESTATE (useTabs)

 

강의출처

 

https://youtu.be/2C2B4k3JOBg

 

 

 

 

---

 

 

useTabs

 

 

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

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) => {
  const [currentIndex, setCurrentIndex] = useState(initialTab);
  if (!allTabs || !Array.isArray(allTabs)) {  //allTabs가 아니거나 배열이 아니면
    return;
  };
  
  return {
      currentItem: allTabs[currentIndex],
      changeItem: setCurrentIndex
  };
};

const App = () => {
  const {currentItem, changeItem} = useTabs(0, content);
  return (
    <div className="App">
      {content.map((section, index) => (
        <button onClick={() => changeItem(index)}>{section.tab}</button>
      ))}
    <div>{currentItem.content}</div>
    </div>
  );
};

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

 

 

content.map에서 section이 있고 index가 있다.

index는 0 또는 1이 되어야 하고 모든 버튼은 onClick 이벤트를 가진다.

 

누군가 클릭하면 우리는 index가 무엇이든지 상관없이 changeItem(index)을 실행하고

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

 

그리고 changeItem은 setCurrentIndex의 item을 바꿔준다.

이는 State를 바꿔준다.

그래서 currentItem의 currentIndex를 바꿔줄 것이고

 

그렇게 해서 사용자가 버튼을 눌렀을 때 내용의 값이 달라지게 되는 것이다.

 

 

 

 

---

 

(참고 !) React Hook 오류 해결

 

 

필자는 처음에 아래 코드 부분에서 오류가 발생했다.

 

 

const useTabs = (initialTab, allTabs) => {
  if (!allTabs || !Array.isArray(allTabs)) {  //allTabs가 아니거나 배열이 아니면
    return;
  };
  const [currentIndex, setCurrentIndex] = useState(initialTab);
  return {
      currentItem: allTabs[currentIndex]
  };
};

 

 

React Hooks 발생 오류

 

 

 

이 에러는 ESLint에서 발생하는 것으로 보이며, React Hook을 사용하는 부분에서 발생한 오류이다.

이 오류 메시지에서는 useState Hook이 조건부로 호출되었을 때 발생할 수 있는 문제를 설명하고 있다.

 

 

React Hook을 사용할 때는 조건부 또는 반복문과 같은 블록 내부에서 사용하지 않도록 주의해야 한다.

React Hook은 항상 컴포넌트의 최상위 레벨에서 호출되어야 하며, 모든 렌더링에서 동일한 순서로 호출되어야 한다.

 

 

그래서 아래와 같이 수정했더니 잘 작동하는 것을 확인할 수 있었다.

 

 

const useTabs = (initialTab, allTabs) => {
  const [currentIndex, setCurrentIndex] = useState(initialTab);
  if (!allTabs || !Array.isArray(allTabs)) {  //allTabs가 아니거나 배열이 아니면
    return;
  };
  
  return {
      currentItem: allTabs[currentIndex]
  };
};

 

 

 

 

 

다음 시간에는 useEffect에 대해 알아보도록 하자 !