๋ถํธ์บ ํ ๋ ์งํํ ๋ฉ์ธ ํ๋ก์ ํธ์์
๋ด๊ฐ ๋งก์ ํํธ๋ฅผ ๋ฆฌํฉํ ๋ง ํ ์์ ์ด๋ค.
์ฐ์ ๊ฐ๋จํ footer
์ปจํฌ๋ํธ ๋จผ์ ์งํํ๋ ค๊ณ ํ๋ค.
footer ํน์ง
- footer๋ ํน์ ๊ฒฝ๋ก์์๋ ๋ณด์ด์ง ์๋๋ค.
- ์๋ฒ์์ ๊ฐ์ ธ์ค๋ ๋ฐ์ดํฐ๊ฐ ์๊ณ ํ์๋ค์ ์ ๋ณด๊ฐ ์์ฑ๋์ด ์๋ค.
<FooterContainer ispath={ispath}>
<InfoText>
<li>
<a
href="๊นํ๋งํฌ"
target="_blank"
rel="noreferrer"
>
ํ์์ด๋ฆ
<span>Front-End</span>
</a>
</li>
.
.
.
<li>
<a
href="๊นํ๋งํฌ"
target="_blank"
rel="noreferrer"
>
ํ์์ด๋ฆ
<span>Back-End</span>
</a>
</li>
</InfoText>
<FooterText>Copyright2023. 6 can do it all rights reserved.</FooterText>
</FooterContainer>
๋ณด๋ ๊ฒ ์ฒ๋ผ ๋ฆฌ์คํธ๊ฐ ๋ฐ๋ณต๋๋ ๊ตฌ์กฐ์ด๋ค.
๋ฐ๋ณต๋๋ UI ๋
Array.map()
์ ํ์ฉํด์ ์ถ์ฝํ ์ ์์ต๋๋ค.
๋ฆฌ์กํธ ๋ฆฌํฉํ ๋ง ๊ฐ์ด๋, react refactoring guide - @rayong๋
//constant.ts
export const FOOTER_DATA = [
{
id: 1,
name: 'ํ์์ด๋ฆ',
type: 'Front-End',
url: '๊นํ๋งํฌ',
target: '_blank',
rel: 'noreferrer',
},
.
.
.
{
id: 6,
name: 'ํ์์ด๋ฆ',
type: 'Back-End',
url: '๊นํ๋งํฌ',
target: '_blank',
rel: 'noreferrer',
},
//footer.tsx
import { FOOTER_DATA } from '../../utils/constant/constant';
.
.
.
return (
<FooterContainer ispath={ispath}>
<InfoText>
{FOOTER_DATA.map((team) => {
return (
<li key={team.id}>
<a href={team.url} target={team.target} rel={team.rel}>
{team.name}
<span>{team.type}</span>
</a>
</li>
);
})}
</InfoText>
<FooterText>
Copyright 2023. 6 can do it all rights reserved.
</FooterText>
</FooterContainer>
);
๊ธฐ์กด ์ฝ๋ ๋ณด๋ค ์ฝ๋๋ฅผ ์ค์ผ ์ ์์๋ค.
๋ํ map ๋ฉ์๋์ ์์๋ฅผ ๋ค๋ฅธ ํ์๋ค์ด ๋ดค์ ๋ ์ดํดํ๊ธฐ ์ฝ๋๋ก
team
์ผ๋ก ์์
ํด ์ฃผ์๋ค.
์ด๋ฏธ ํด๋น footer๋ path์ ์ํ์ ๋ฐ๋ผ display:none
์ผ๋ก ์ ๋ณด์ด๊ฒ ์ฒ๋ฆฌํ ์ํ์ด๋ค.
ํ๋ ์ด๋ด ๊ฒฝ์ฐ ์ด๊ธฐ ๋ก๋ฉ ์๋๋ ๋นจ๋ผ์ง์ง๋ง
ํ๋ฉด์ ์จ๊ฒจ์ง ์ํ๋ก ๋จ์์๊ธฐ ๋๋ฌธ์ ๋ฉ๋ชจ๋ฆฌ ์ฌ์ฉ์ ์ํฅ์ ์ค ์ ์๋ค๊ณ ํ๋ค.
โ๏ธ but
์กฐ๊ฑด๋ฌธ์ผ๋ก ์ฒ๋ฆฌํ ๊ฒฝ์ฐ ๋ฉ๋ชจ๋ฆฌ์ ์ํฅ์ ์ฃผ์ง ์๊ฒ ์ง๋ง
ํด๋น ๊ฒฝ๋ก๋ก ์ด๋ ํ ๋ ๋ง๋ค footer๊ฐ ๋ง์ดํธ๋์ด ์กฐ๊ธ ๋๋ ค ์ง ์ ์๋ค๊ณ ํ๋ค.
ํ์ฌ ์ํฉ์์๋ footer์ ๋น์ค์ด ๋์ง ์๊ณ
์ถํ ์ ์ง๋ณด์ํ๊ธฐ ํธํ๊ฒ ํ๊ธฐ์ํด ์กฐ๊ฑด๋ฌธ์ ์ ํํ๋ค.
์ผํญ ์ฐ์ฌ์๋ก ์ฒ๋ฆฌํ ์๋ ์์์ง๋ง
ํ์ฌ ์ํ์์ ์ฌ๋ฌ ์กฐ๊ฑด์ด ๋ค์ด๊ฐ ๊ฐ๋
์ฑ์ ์๊ฐ ํ์ ๋ if๋ฌธ
์ด ์ ํฉํ๋ค๊ณ ์๊ฐํ๋ค.
const Footer = () => {
const ispath = useLocationEndpoint();
if (ispath === 'community' || ispath === 'mypage' || ispath === '') {
return (
<FooterContainer>
<InfoText>
{FOOTER_DATA.map((team) => {
return (
<li key={team.id}>
<a href={team.url} target={team.target} rel={team.rel}>
{team.name}
<span>{team.type}</span>
</a>
</li>
);
})}
</InfoText>
<FooterText>
Copyright 2023. 6 can do it all rights reserved.
</FooterText>
</FooterContainer>
);
}
return null;
};
์ด๋ก ์ธํด footer ํ์ผ์ ์ฝ๋๊ฐ ๊ฐ์ํ ๋์๊ณ
์คํ์ผ ๋์ ์กฐ๊ฑด๋ฌธ(if ๋ฌธ)์ผ๋ก ์์
ํด ์ ์ง๋ณด์ ๋ฐ ๊ฐ๋
์ฑ์ ๋ํ ์ ์์๋ค.