[TabUI] react Tab UI 구현하기

state를 이용해서 간단하게 Tab UI를 구현했다.

 

여기서 소개하는 방법이 정답은 아니므로 다른 구현 방법이 있으면 댓글에 남겨주세요.

TabUI

위의 사진처럼 이전, 다음 버튼을 클릭하면 이전, 다음 뷰를 보여준다.

 

가장 먼저 베이스가 되는 TabUI.jsx 파일의 소스코드이다. (css는 styled-components를 사용했다.)

import React, { useState } from "react";
import styled from "styled-components";
import Page1 from "./Page1";
import Page2 from "./Page2";

export default function TabUI() {
  // 현재 보여주는 페이지
  const [pageState, setPageState] = useState(1);

  // TabUI에 사용할 페이지 컴포넌트
  const pageList = {
    1: <Page1 />,
    2: <Page2 />,
  };

  const handlePrePage = () => {
    // 첫 페이지에서 이전페이지 동작 방지
    if (pageState === 1) return;

    setPageState(pageState - 1);
  };

  const handleNextPage = () => {
    // 마지막 페이지에서 다음페이지 동작 방지
    // 마지막 페이지 받아오는 방법을 생각해봐야겠다.
    if (pageState === 2) return;

    setPageState(pageState + 1);
  };

  return (
    <Root>
      {pageList[pageState]}
      <ButtonWrapper>
        <button onClick={handlePrePage}>이전</button>
        <button onClick={handleNextPage}>다음</button>
      </ButtonWrapper>
    </Root>
  );
}

const Root = styled.div`
  width: 500px;
  height: 500px;
  background-color: #e2e2e2;
  border: 1px solid #f2f2f2;
  border-radius: 5px;
  margin: 100px auto;
  padding: 30px;
  box-sizing: border-box;
`;

const ButtonWrapper = styled.div`
  width: 100px;
  margin: 30px auto 0 auto;
  display: flex;
  justify-content: space-between;
`;

 

페이지 컴포넌트로 사용된 Page1 소스코드 (Page1, Page2의 디자인은 동일해서 Page1의 소스코드만 첨부합니다)

import React from "react";
import styled from "styled-components";

export default function Page1() {
  return <Root>페이지 1</Root>;
}

const Root = styled.div`
  width: 100%;
  height: 90%;
  background-color: gray;
  line-height: 400px;
`;

 

궁금한 점, 수정사항은 댓글로 알려주시면 감사하겠습니다.