📌useScroll

• 유저가 스크롤 해서 무언갈 지나쳤을 때 색상을 바꾸거나 사용자가 원하는대로.

const useScroll = () => {
  // 스크롤 X, Y 좌표를 객체로 저장
  const [state, setState] = useState({ y: 0, x: 0 });

  // 윈도우 객체로부터 scrollX, Y를 받아옴
  const onScroll = () => {
    setState({ y: window.scrollY, x: window.scrollX });
  };

  useEffect(() => {
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return state;
};

우선 setState를 이용해서 사용자의 스크롤 위치 객체를 저장합니다. 사용 범위를 넓히기 위해서 X, Y 좌표를 모두 객체에 저장했습니다.

onScroll은 window 객체의 스크롤 이벤트의 리스너입니다. 사용자가 스크롤할 때마다 window 객체로부터 스크롤 좌표를 받아와 업데이트합니다.

마지막으로 useEffect를 이용해서 side-effect로 window 객체에 이벤트 리스너를 달아줍니다. 마찬가지로 컴포넌트가 언마운트 될 때 이벤트 리스너를 제거해줍니다.

function UseScroll(props) {
  const { y } = useScroll();
  return (
    <div style={{ height: "1000vh" }}>
      <h1 style={{ position: "fixed", color: y > 100 ? "green" : "red" }}>
        Hello, Strangers!
      </h1>
    </div>
  );
}

y의 값만 받아옴.
y 좌표값에 따른 h1의 색을 바꿔줌. green or red

📌UseTabs

• content를 가져올 때 사용.

1. API에서 데이터를 가져올 때를 가정.

const item = [
  {
    title: "content1",
    content: "컨텐츠 1",
  },
  {
    title: "content2",
    content: "컨텐츠 2",
  },
  {
    title: "content3",
    content: "컨텐츠 3",
  },
];

2. item.map을 통해 3개의 버튼을 생성.

const App = () => {
  return (
    <div className="App">
      {item.map((item) => (
        <button>{item.title}</button>
      ))}
      <div>{currentItem.content}</div>
    </div>
  );
};

• item.title 버튼의 이름 설정.

3. useTabs

const useTabs = (initialTab, allTabs) => {
  if (!allTabs || !Array.isArray(allTabs)) {
    return;
  }
  //배열이 아닐 때 return
  const [currentIndex, setCurrentIndex] = useState(initialTab, allTabs);
  return {
    currentItem: allTabs[currentIndex],
    changeItem: setCurrentIndex
    //changeItem은 기본적으로 setCurrentIndex를 가짐.
  };
};

• initialTab: Tab의 초깃값 설정.
• if(!allTabs || !Array.isArray(allTabs)) : 탭이아니거나 배열이 아닐 때 return;
• currentItem, changeItem을 return;

4. App

const App = () => {
  const { currentItem, changeItem } = useTabs(0, item);
  //item[0]을 얻고싶다. 배열의 인덱스가 0일때 첫번째 요소를 가져온다.
  //useTabs은 currentItem을 return
  return (
    <div className="App">
      {content.map((item, index) => (
        <button onClick={() => changeItem(index)}>{item.title}</button>
        //index는 0 혹은 1
        //onClick이면 changeItem(index) 실행.
      ))}
      <div>{currentItem.content}</div>
    </div>
  );
};

• useTabs함수로 초기값 0으로 설정.
• button을 click하였을 때 click한 button의 index값을 changeItem으로 넘겨줌.
• changeItem에서 index에 맞는 값을 설정. -> 그에 맞는 content값 넘겨줌.