:: 구현 사항 설명
- 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이벤트를 통해서 여러가지 데이터를 변화를 주는 법을 알게되었습니다
- 각각의 데이터값을 이용해서 스타일속성에 변화를 주는법을 알게되었습니다
