[TIL]react, styled-component를 활용해 반응형 웹사이트 만들기 -4 styled-components 로 props전달하기

목표

styled-components에 props값을 넘겨줘 메뉴를 반응형으로 클릭 했을 때만 나타나게 변경해 주겠습니다.

react-Hooks를 활용해 컴포넌트 내에 menu라는 state값을 만들어 false를 선언합니다.
10번째 줄에 ContlorBox에 state를 해당 컴포넌트로 내려주면 이 값은 styled-components의 ContlorBox에 props로 내려가게 됩니다. props.menu=== false ? none :flex 조건을 주어 menu가 true가 됐을때 display효과를 줘 컨트롤박스가 나타나게 수정해 주었습니다.

onClick={() => {setmenu(!menu)}}

menubar 태그에 onClick효과를 줘 클릭했을 때 마다 setmenu가 작동해 menu의 값을 반전 시켜주게 되면 저희가 원하는 작업이 완성되게 됩니다!

import React, { useState } from 'react';


function Nav() {
    const [menu, setmenu] = useState(false) // reactHooks    

  return (
    <Common>
      <Home href='/'>에이블리</Home>
      <LogoImg src={ABLY}/>

      <ContlorBox menu={menu}>
        <Contlor href='/connect'>계약</Contlor>
        <Contlor href='/login'>로그인</Contlor>
        <Contlor href='/signup'>회원가입</Contlor>
      </ContlorBox>
      <Menubar href='#' onClick={() => {setmenu(!menu)}}>
          <IoIosMenu></IoIosMenu>
      </Menubar>
    </Common>
  );
}

const ContlorBox = styled.div`

    display: flex;
    align-items:center;
    @media screen and (max-width: 500px) {
        
        flex-direction: column;
        align-items:flex-end;
        display: ${({menu}) => {
           return menu === false ? 'none' : 'flex'
        }};
    }
`

---

결과

이로서 Nav의 반응형에 대해 공부해 보았습니다. reactstrap등 완성되어 있는 것도 있지만 한번 만들어 보는것도 나쁘지 않은거 같네요 ㅎㅎ
기회가 된다면 그리드도 한번 사용해 게시글을 반응형으로 구현해 보겠습니다