useTabs

웹 페이지에서 자주 사용하는 Tab 기능을 구현하기 위해 필요한

useTabs을 간단히 알아보자.

const content = [
  { tab: "Section1", content: "I,m One" },
  { tab: "Section2", content: "I,m Two" },
  { tab: "Section3", content: "I,m Three" },
];
export const useTabs = (initial, allTabs) => {
  const [currentIdx, setCurrentIdx] = useState(initial);
  if (!allTabs || Array.isArray(allTabs)) {
    return;
  }
  return {
    currenContent: allTabs[currentIdx],
    changeContent: setCurrentIdx,
  };
};

const UseTabxample = () => {
  const { currenContent, changeContent } = useTabs(0, content);

  return (
    <div>
      {content.map((section, idx) => (
        <button onClick={() => changeContent(idx)}>{section.tab}</button>
      ))}
      <div>{currenContent.content}</div>
    </div>
  );
};

export default UseTabxample;

content 라는 배열을 만들어 TabList 를 넣어준다.

onClick 함수를 호출할 때마다 idx값을 전달하고, 현재 Tab 값이 변화하며 화면이 re-render 되도록 하는 간단한 로직이다.

내가 반영해야 할 것은,

1. 구조분해 할당으로 코드를 작성하는 것

2. 재사용 가능한 함수형 컴포넌트의 영리하게 짜는 것

useState만 이용하였다.

이 다음부터는 useEffect를 사용해보자.