.map()
을 사용하지 않고 자식 컴포넌트에서 사용할 경우TabARR.tsx
파일에 탭 메뉴들을 배열로 만들어줌export const BlogMenus = [
{ id: 0, name: "블로그", content: "Tab menu 블로그" },
{ id: 1, name: "판매", content: "Tab menu 판매" },
{ id: 2, name: "댓글", content: "Tab menu 댓글" },
{ id: 3, name: "좋아요", content: "Tab menu 좋아요" },
];
export const SaleMenus = [
{ id: 4, name: "내 정보 관리", content: "Tab 내정보 관리" },
{ id: 5, name: "판매 작품", content: "Tab 판매 작품" },
{ id: 6, name: "구매 작품", content: "Tab 구매 작품" },
{ id: 7, name: "판매 관리", content: "Tab 판매 관리" },
];
props
로 내려보냄// ../pages/blog
import { BlogMenus } from "../src/components/Tab/TabArr";
return(
// .. 생략
<BlogContent>
<BlogTab Menus={BlogMenus} />
</BlogContent>
)
// ../pags/mypage
import { SaleMenus } from "../src/components/Tab/TabArr";
return(
// .. 생략
<MypageTitle>
<BlogTab Menus={SaleMenus} />
</MypageTitle>
)
props
로 받고 interface
설정.map()
메소드를 사용해 Tab 메뉴들을 만들어줌interface TabProps {
Menus: {
id: number;
name: string;
content: string;
}[];
}
export default function Tab({ Menus }: TabProps) {
// 어떤 Tab이 선택되어 있는지 확인하기 위한
const [curIndex, setIndex] = useState(0);
const onClickMenuHandler = (index: number) => {
setIndex(index);
};
return(
<>
<TabMenu>
{Menus.map((section, index: number) => (
<li
role="presentation"
key={index}
className={
curIndex === index ? "tab-submenu tab-focused" : "tab-submenu"
}
onClick={() => onClickMenuHandler(index)}
>
{section.name}
</li>
))}
</TabMenu>
<TabContent>
{Menus[curIndex].name === "블로그" ? <BlogList /> : null}
{Menus[curIndex].name === "판매" ? <SaleList /> : null}
{Menus[curIndex].name === "댓글" ? <MyCommentList /> : null}
{Menus[curIndex].name === "좋아요" ? <LikeList /> : null}
{Menus[curIndex].name === "내 정보 관리" ? <ProductstList /> : null}
{Menus[curIndex].name === "판매 작품" ? <ProductstList /> : null}
{Menus[curIndex].name === "구매 작품" ? <ProductstList /> : null}
{Menus[curIndex].name === "판매 관리" ? <ProductstList /> : null}
</TabContent>
</>
)
}
처음엔 name
이 아니라 idx
로 작성했었는데 idx
의 경우 어떤 식으로 자동 생성되는 지 모르겠어서 한 눈에 알아볼 수 있는 name
으로 변경하였다.
props의 type을 정하는 방법이 생각보다 잘 되지 않아서 어려웠다.
interface TabProps {
id: number;
name: string;
content: string;
}
export default function Tab({ Menus }: TabProps) {
//생략
<TabMenu>
{Menus.map((section, index: number) => (
<li
role="presentation"
key={index}
className={
curIndex === index ? "tab-submenu tab-focused" : "tab-submenu"
}
onClick={() => onClickMenuHandler(index)}
>
{section.name}
</li>
))}
</TabMenu>
//생략
}
'id' PropType is defined but prop is never used
'content' PropType is defined but prop is never used
'TabProps' 형식에 'Menus' 속성이 없습니다.ts(2339)
'section' 매개 변수에는 암시적으로 'any' 형식이 포함됩니다.ts(7006)
TabProps
형식에 Menus
속성이 없습니다를 해결하기 위해 인터페이스에 Menus
를 배열로 넣어줬다.interface TabProps {
Menus: [id: number, name: string, content: string];
}
export default function Tab({ Menus }: TabProps) {
//생략
<TabMenu>
{Menus.map((section, index: number) => (
<li
role="presentation"
key={index}
className={
curIndex === index ? "tab-submenu tab-focused" : "tab-submenu"
}
onClick={() => onClickMenuHandler(index)}
>
{section.name}
</li>
))}
</TabMenu>
<TabContent>
{Menus[curIndex].name === "블로그" ? <BlogList /> : null}
{Menus[curIndex].name === "판매" ? <SaleList /> : null}
{Menus[curIndex].name === "댓글" ? <MyCommentList /> : null}
{Menus[curIndex].name === "좋아요" ? <LikeList /> : null}
{Menus[curIndex].name === "내 정보 관리" ? <ProductstList /> : null}
{Menus[curIndex].name === "판매 작품" ? <ProductstList /> : null}
{Menus[curIndex].name === "구매 작품" ? <ProductstList /> : null}
{Menus[curIndex].name === "판매 관리" ? <ProductstList /> : null}
</TabContent>
</>
'string | number' 형식에 'name' 속성이 없습니다. 'string' 형식에 'name' 속성이 없습니다.ts(2339)
interface TabProps {
Menus: {
id: number;
name: string;
content: string;
}[];
}