[TIL/React] 2023/06/27

Layout.js

import React, { useRef } from "react";
import { styled } from "styled-components";

const Header = styled.div`
  background-color: #c07848;
  display: flex;
  width: 100%;
  height: 10vh;
  position: sticky;
  top: 0;
  z-index: 999;
  justify-content: space-around;
`;

const LogoContainer = styled.div`
  width: 100px;
  background-color: gray;
  display: flex;
  justify-content: center;
  align-items: center;
`;

const NavButtonContainer = styled.div`
  display: flex;
  align-items: center;
  column-gap: 40px;
`;

const NavButton = styled.button``;

const HamburgerIconContainer = styled.div`
  width: 100px;
  background-color: gray;
  display: flex;
  justify-content: center;
  align-items: center;
`;

const Content = styled.div`
  height: 100vh;
  overflow: auto;
`;

const Footer = styled.div`
  background-color: gray;
  display: flex;
  height: 20vh;
  width: 100%;
  justify-content: space-around;
  margin: 0 auto;
`;

const FooterTextContainer = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
`;

const Layout = ({ children }) => {
  const homeRef = useRef(null);
  const addRef = useRef(null);
  const recentRef = useRef(null);
  const myRef = useRef(null);
  const refs = [homeRef, addRef, recentRef, myRef];

  const handleHomeClick = () => {
    homeRef.current.scrollIntoView({ behavior: "smooth" });
  };

  const handleAddClick = () => {
    addRef.current.scrollIntoView({ behavior: "smooth" });
  };

  const handleRecentClick = () => {
    recentRef.current.scrollIntoView({ behavior: "smooth" });
  };

  const handleMyClick = () => {
    myRef.current.scrollIntoView({ behavior: "smooth" });
  };

  return (
    <div>
      {/* header area */}
      <Header>
        {/* logo */}
        <LogoContainer>
          <p>로고 자리</p>
        </LogoContainer>

        {/* nav button */}
        <NavButtonContainer>
          <button onClick={handleHomeClick}>Home</button>
          <button onClick={handleAddClick}>AddTask</button>
          <button onClick={handleRecentClick}>RecentTodo</button>
          <button onClick={handleMyClick}>MyTodo</button>
        </NavButtonContainer>

        {/* hamburger icon */}
        <HamburgerIconContainer>
          <p>햄버거</p>
        </HamburgerIconContainer>
      </Header>

      {/* content area */}

      {children.map((child, index) => (
        <Content ref={refs[index]} key={index}>
          {child}
        </Content>
      ))}

      {/* footer area */}
      <Footer>
        <FooterTextContainer>
          <p>My task</p>
          <p>Copyright © 2023 All rights reserved</p>
          <p>Powered By SITE123 - Create your own website</p>
        </FooterTextContainer>
        <NavButtonContainer>
          <button onClick={handleHomeClick}>Home</button>
          <button onClick={handleAddClick}>AddTask</button>
          <button onClick={handleRecentClick}>RecentTodo</button>
          <button onClick={handleMyClick}>MyTodo</button>
        </NavButtonContainer>
      </Footer>
    </div>
  );
};

export default Layout;

Home.js

import React, { forwardRef } from "react";

const Home = forwardRef((props, ref) => {
  return (
    <div ref={ref} style={{ height: "1000px", backgroundColor: "red" }}>
      홈
    </div>
  );
});

export default Home;

오늘의 삽질

어제 예정한 대로, 오늘은 공식문서의 코드를 참고하여 스크롤 기능을 완성하는 것이 목표였다. 개별 컴포넌트에서 forwardRef를 사용하는 것은 큰 문제가 되지 않았다.

분명 제대로 했는데, 맵핑 과정에서 footer가 화면 최하단에 위치하지 않고, 첫 번째 컴포넌트와 두 번째 컴포넌트 사이에 위치했다. Content 태그를 map 외부에서 감싸고 있어서 발생한 일이었다.

왜 처음부터 인지하지 못했는지 매우 화났지만, 목표한 바는 이뤘으니 다행이다. 내일은 RecentTodo까지 기능을 구현하고 스타일링 하는 것을 목표로 하겠다.