우솝 Nav-bar PR

:: 구현 사항 설명

• nav-bar UI구현
• 상수 데이터 불러와서 map()메서드를 사용하여 상수데이터의 mainMenu 데이터값을 뿌려준다 setstate함수를 부모에서 자식컴포넌트로 넘겨준다

 {NAVBARDATA_TEXT.map(top => (
              <NavTopCategorie
                key={top.id}
                id={top.id}
                setMenuState={setMenuState}
                setNewNav={() => apearPerfumeCategory()}
                name={top.mainMenu}
              />
            ))}
          

• <NavTopCategrie/>컴포넌트에 클릭이벤트를 활용해서 클릭을 할때마다 그것에 맞는 id값을 setstate에 저장한후부모 컴포넌트의 state에 저장해준다 그이유는 그 id값을 사용하여 클릭한 카테고리id값에 맞는 데이터를 불러와서 클릭하는 카테고리마다 맞는 하위 카테고리를 생성하기 위함이다

const NavTopCategorie = ({ name, setNewNav, setMenuState, id }) => {
  return (
    <li className="navList">
      <a
        className="clickList"
        onClick={e => {
          e.preventDefault();
          setNewNav();
          setMenuState(id);
        }}
        href="/"
      >
        {name}
      </a>
    </li>
  );
};

• 삼항 연산자를 사용하여 newNav state를 기본값은 false로 저장해놨다가true일때는 <PerfumeCategorie/>컴포넌트가 생기도록구현 하였다 버튼도 같은원리를 사용해서 newNav state가 true일때 생겼다가 클릭하면 flase로 바꾸면서 다시 <PerfumeCategorie/>랑 버튼을 사라지도록 구현하였다

 {newNav === true ? (
          <PerfumeCategorie data={NAVBARDATA_TEXT[menuState].subMenu} />
        ) : null}

  {newNav === true ? (
                <button onClick={() => setNewNav(false)}>닫기 X</button>
              ) : null}

• 아까전에 자식컴포넌트에서 저장해온 id값을 사용해서 NAVBARDATA_TEXT의 [menuState]의 id값 데이터의 subMenu데이터를 자식컴포넌트에 넘겨줬다

   {newNav === true ? (
          <PerfumeCategorie data={NAVBARDATA_TEXT[menuState].subMenu} />
        ) : null}

• 넘겨받은 데이터를 이용해서 그데이터의 id값의 left데이터들을 map()메서드를 사용해서 그에 맞는 데이터를 뿌려주었다 right데이터도 똑같은 방식으로 map()메서드를 사용해서 데이터를 뿌려주도록 구현하였다

  {data.left.map(cate => (
              <NavBarCategorie key={cate.id} name={cate.name} />
            ))}

 {data.right.map(two => (
              <NavBarCategorieTwo key={two.id} name={two.name} />
            ))}

:: 성장 포인트

• setstate를 사용하여 부모 컴포넌트에서 자식 컴포넌트로 넘겨준뒤 다시 데이터를 받아서 부모데이터로 전달하는 방식을 알게되었습니다
• map()메서드를 통해서 데이터들을 뿌려주는 방식을 조금이나마 알게되었습니다
• 상수 데이터를 통해서 전체데이터를 받아서 전달하여 알맞은곳에 적용하는 법을 알게되었습니다
• onClick이벤트를 통해서 여러가지 데이터를 변화를 주는 법을 알게되었습니다
• 각각의 데이터값을 이용해서 스타일속성에 변화를 주는법을 알게되었습니다