React Tab Menu 구현

메뉴를 눌렀을때 선택된 메뉴에 bold와 underline을 주며 하단 내용을 바꿈

Tab 메뉴의 항목별로 나타낼 항목 정의

const TabUI = {
    1: (
      <TabContentsBoxStyle>
        <TabContentsTextStyle>
          단 한번의 입력으로 자동 작성되는 나만의 낚시 장비 세트
        </TabContentsTextStyle>
        <TabContentsImageStyle src="./assets/my_img1@3x.png"></TabContentsImageStyle>
      </TabContentsBoxStyle>
    ),
    2: (
      <TabContentsBoxStyle>
        <TabContentsTextStyle>
          지역 및 어종으로 나눠서 보는 나만의 낚시 포인트, 어보서비스!
        </TabContentsTextStyle>
        <TabContentsImageStyle src="./assets/my_img2@3x.png"></TabContentsImageStyle>
      </TabContentsBoxStyle>
    ),
  };

Tab 메뉴를 클릭했을때의 이벤트 정의

1. 어떤 메뉴를 클릭했는지

2. 클릭했을때, 클릭 안했을때

3. 클릭 함수

//어떤 버튼을 선택했는지
const [selected, setSelected] = useState(1);
//버튼을 선택했을때 true로 줘서 활성상태로 바꾸기, 클릭 안했을땐 false
const [rightActive, setRightActive] = useState(false);
//기본으로 보여줄 항목은 true
const [leftActive, setLeftActive] = useState(true);
//버튼 이벤트 정의
function selectMenu(props) {
if (props === 1) {
  setSelected(1);
  setLeftActive(true);
  setRightActive(false);
} else if (props === 2) {
  setSelected(2);
  setLeftActive(false);
  setRightActive(true);
}

스타일 컴포넌트에 props 전달해서 css 동적으로 변화

const TabLeftButtonStyle = styled.div`
 font-weight: ${(props)=>props.leftActive ? bold : regular};
 font-decoration : ${(props)=>props.leftActive ? underline : none};
`;

function Tab() {
  const [rightActive, setRightActive] = useState(false);
  const [leftActive, setLeftActive] = useState(true);
  }
    return (
        <TabNavStyle>
			//Tab 버튼
          <TabLeftButtonStyle
            onClick={() => selectMenu(1)}
            //아래와 같이 정의하면 styled에 props로 전달 가능
            leftActive={leftActive}
          >
            나의 낚시 장비
          </TabLeftButtonStyle>         
        </TabNavStyle>
    )
}

export default Tab

전체 코드

const TabLeftButtonStyle = styled.div`
 font-weight: ${(props)=>props.leftActive ? bold : regular};
 font-decoration : ${(props)=>props.leftActive ? underline : none};
`;
const TabRightButtonStyle = styled.div`
 font-weight: ${(props)=>props.RightActive ? bold : regular};
 font-decoration : ${(props)=>props.RightActive ? underline : none};
`;
// tab 메뉴의 버튼 눌렀을때 나타날 컴포넌트 정의
const TabUI = {
    1: (
      <TabContentsBoxStyle>
        <TabContentsTextStyle>
          단 한번의 입력으로 자동 작성되는 나만의 낚시 장비 세트
        </TabContentsTextStyle>
        <TabContentsImageStyle src="./assets/my_img1@3x.png"></TabContentsImageStyle>
      </TabContentsBoxStyle>
    ),
    2: (
      <TabContentsBoxStyle>
        <TabContentsTextStyle>
          지역 및 어종으로 나눠서 보는 나만의 낚시 포인트, 어보서비스!
        </TabContentsTextStyle>
        <TabContentsImageStyle src="./assets/my_img2@3x.png"></TabContentsImageStyle>
      </TabContentsBoxStyle>
    ),
  };
function Tab() {
	//어떤 버튼을 선택했는지
  const [selected, setSelected] = useState(1);
	//버튼을 선택했을때 true로 줘서 활성상태로 바꾸기, 클릭 안했을땐 false
  const [rightActive, setRightActive] = useState(false);
  const [leftActive, setLeftActive] = useState(true);
	//버튼 이벤트 정의
  function selectMenu(props) {
    if (props === 1) {
      setSelected(1);
      setLeftActive(true);
      setRightActive(false);
    } else if (props === 2) {
      setSelected(2);
      setLeftActive(false);
      setRightActive(true);
    }
  }
    return (
        <TabNavStyle>
				//Tab 버튼
          <TabLeftButtonStyle
            onClick={() => selectMenu(1)}
            leftActive={leftActive}
          >
            나의 낚시 장비
          </TabLeftButtonStyle>
          <TabRightButtonStyle
            onClick={() => selectMenu(2)}
            rightActive={rightActive}
          >
            나의 어보
          </TabRightButtonStyle>
        </TabNavStyle>
		//선택된 버튼에 따라 그려지는 컴포넌트
        {TabUI[selected]}
    )
}

export default Tab