์๋ฒ์์ ํต์ ์ ์ฑ๊ณตํ๊ณ ๊ธฐ๋ฅ ๊ฐ๋ฐ์ ๋ค์ด๊ฐ๋ค.
๋๋ ์ง๋ฌธ ์์ฑํ์ด์ง์์ ํ๊ทธ ์ ํ ์์ญ์ ๋งก์๋ค.
์๊ตฌ ์ฌํญ์
- 3๊ฐ ๊น์ง ์ ํ์ด ๊ฐ๋ฅํ๋ค.
- ๋ฐฐ์ด ํ์์ผ๋ก ๋ค์ด๊ฐ๋ค.
์ด์ ๋ ์๋ ๊ฑฐ ๊ฐ๋ค.
์ฐ์ API ๋ช ์ธ์์์ ํ๊ทธ ๋ฆฌ์คํธ ๊ด๋ จํด ์์ ์ด ๋์ด์์ง ์์ ๋๋ฏธ ๋ฐ์ดํฐ๋ฅผ ๋ง๋ค์ด ์งํํ๋ค.
export const tagList =
[
{
tagName: 'java',
tagDescription: 'Java programming language'
}, {
tagName: 'spring-boot',
tagDescription: 'Spring Boot framework'
}, {
tagName: 'python',
tagDescription: 'Python programming language'
},
.
.
.
]
๋๋ฏธ ๋ฐ์ดํฐ๋ฅผ ๋ง๋ค๊ณ
{
tagList.map((el) => (
<TagCheckBoxed key={el.tagName}>
<TagCheck
type="checkbox"
id={el.tagName}
value={el.tagName}
/>
<TagLabel htmlFor={el.tagName}>
<span>{el.tagName}</span>
</TagLabel>
</TagCheckBoxed>
))
}
map๋ฉ์๋๋ฅผ ์ด์ฉํด ํ๋ฉด์ ๋ณด์ฌ์ฃผ์๋ค.
map๋ฉ์๋๋ฅผ ์ฌ์ฉํ ๋ ๊ณ ์ ํ key
๊ฐ์ด ๋ค์ด๊ฐ์ผ ํ๋๋ฐ id
๊ฐ์ ์๊ณ ,
index
๋ ์ถํ ์ค๋ฅ๊ฐ ๋ ์ ์๊ธฐ์ tagName
์ผ๋ก ์ง์ ํด ์คฌ๋ค.
const [tags, setTags] = useState([]);
const handlerTag = (name, description) => {
const tagSelected = tags.some((el) => el.tagName === name);
if (tagSelected) {
const updatedTags = tags.filter((el) => el.tagName !== name);
setTags(updatedTags);
} else {
const newTag = { tagName: name, tagDescription: description };
setTags((prevTags) => [...prevTags, newTag]);
}
};
.
.
.
{
tagList.map((el) => (
<TagCheckBoxed key={el.tagName}>
<TagCheck
type="checkbox"
id={el.tagName}
value={el.tagName}
onChange={() => handlerTag(el.tagName, el.tagDescription)}
></TagCheck>
<TagLabel htmlFor={el.tagName}>
<span>{el.tagName}</span>
</TagLabel>
</TagCheckBoxed>
))
}
useState๋ฅผ ์ด์ฉํด tags ์ํ๋ฅผ ๋ง๋ค์๋ค.
๋ง๋ค์ด tag name, description๋ฅผ ์ธ์๋ก ๋ฐ์ ์ ๋ฌํ ์ ์๋๋ก ํ๋ค.
const tagSelected = tags.some((el) => el.tagName === name);
some๋ฉ์๋๋ ํด๋น ๊ฐ์ ๋ฐ๋ผ boolean ๊ฐ์ ๋ฐํํ๋ค.
tags ์์์ tagName๊ณผ ์ธ์๋ก ๋ค์ด์จ name์ด ๋์ผํ๋ฉด true, ์๋๋ฉด false๋ก ๋ฐํํ ๊ฐ์
tagSelected
์ ํ ๋นํด ์ฃผ์๋ค.
์ดํ ์กฐ๊ฑด๋ฌธ์ผ๋ก tagSelected๊ฐ true์ธ ๊ฒฝ์ฐ
const updatedTags = tags.filter((el) => el.tagName !== name);
tagName์ด ๋์ผํ ๊ฐ๋ง ๋บ ๋๋จธ์ง๋ฅผ setTags(updatedTags)
tags์ ์ถ๊ฐํ๋ค.
์๋ ๊ฒฝ์ฐ const newTag = { tagName: name, tagDescription: description };
setTags((prevTags) => [...prevTags, newTag]);
๊ธฐ์กด์ ์๋ ๊ฐ์ ๊ทธ๋๋ก ๋๊ณ ์๋ก์ด ๊ฐ newTag
๋ฅผ ์ถ๊ฐํด ์คฌ๋ค.
3๊ฐ๋ง ์ฒดํฌ ๋๋๋ก checkCount
๋ผ๋ ์ํ๋ฅผ ํ๋ ๋ ๋ง๋ค์ด ์คฌ๋ค.
const [tags, setTags] = useState([]);
const [checkCount, setCheckCount] = useState(0);
const handlerTag = (name, description) => {
const tagSelected = tags.some((el) => el.tagName === name);
if (tagSelected) {
const updatedTags = tags.filter((el) => el.tagName !== name);
setTags(updatedTags);
setCheckCount((prevCount) => prevCount - 1);
} else {
const newTag = { tagName: name, tagDescription: description };
setTags((prevTags) => [...prevTags, newTag]);
setCheckCount((prevCount) => prevCount + 1);
}
};
๊ธฐ์กด์ ์์ฑํ ์ฝ๋์ ๋ฃ์ด์คฌ๋ค.
tagSelected๊ฐ true์ผ ๋๋ -1๋ฅผ ์๋ ๊ฒฝ์ฐ +1์ ํด์คฌ๋ค.
checkCount๊ฐ 3์ด ๋๋ฉด ํด๋ฆญ์ด ๋์ง ์๋๋ก input checkbox๋ฅผ ์์ ํด ์คฌ๋ค.
{
tagList.map((el) => (
<TagCheckBoxed key={el.tagName}>
<TagCheck
type="checkbox"
id={el.tagName}
value={el.tagName}
checked={tags.some(item => item.tagName === el.tagName)}
disabled={!tags.some(item => item.tagName === el.tagName) && checkCount >= 3}
onChange={() => handlerTag(el.tagName, el.tagDescription)}
></TagCheck>
<TagLabel htmlFor={el.tagName}>
<span>{el.tagName}</span>
</TagLabel>
</TagCheckBoxed>
))
}
disabled
์ ์กฐ๊ฑด์
!tags.some(item => item.tagName === el.tagName) && checkCount >= 3
์คฌ๋ค.
ํด๋น ์กฐ๊ฑด์ด ๋ง์กฑํ๋ฉด false๋ก ์ฒดํฌ๋์ง ์๋๋ก ํ๋ค.
input์ checked์ ์ํ์ ๋ฐ๋ผ ํ์ํด ์ฃผ๊ณ ์ถ์๋ค.
์ฒ์์๋ ์ํ๋ฅผ ํ๋ ๋ง๋ค์ด ๋ฃ์์ง๋ง ์๋ฌ๊ฐ ๋ฌ๋ค.
๊ทธ๋ฌ๋ค some๋ฉ์๋๋ boolean์ผ๋ก ๋ฐํํ๋ ๊ตณ์ด ์ํ๋ฅผ ๋ง๋ค ํ์๊ฐ ์๋ค ์๊ฐํ๋ค.
๋คํํ ์ ์งํ ๋๋๊ฑฐ ๊ฐ์๋ค.
disabled
๋ event.target.checked๋ฅผ ์ด์ฉํด ์งํํ๋ ค๊ณ ํ์ผ๋
์๊ฐ๋๋ก ์ ๋์ง ์์๋ค ๊ทธ๋ฌ๋ค input์ disabled
๋ฅผ ์๊ฒ ๋์ด ํด๊ฒฐํ ์ ์์๋ค.
๋๋์ด ๊ธฐ๋ฅ ๊ฐ๋ฐ์ ๋ค์๊ฐ๋ค.
๋งํฌ์
๋จ๊ณ์์๋ tailwind CSS๊ฐ ์ต์ํ์ง ์์ ์ค๋ ๊ฑธ๋ ธ์ง๋ง
๊ธฐ๋ฅ์ ์ธ ๋ถ๋ถ์ ์๊ฐ ๋ณด๋ค ๋นจ๋ฆฌ ๋๋ ์ ์์๋ค.
ํ๋ก์ ํธ ์์
๊ธฐ๊ฐ์ด ์งง์ ์ฝ๋ ๋ฆฌ๋ทฐ ์์ด ๋ฐ๋ก ๋จธ์ง๋ฅผ ํ ์ ์ ์์ฝ๋ค๊ณ ์๊ฐํ๋ค.
์ฝ๋ ๋ฆฌ๋ทฐ๋ฅผ ํตํด ๋์ ์ฝ๋์ ๋ํ ์๋๋ฐฉ์ ์๊ฐ์ ์ ์ ์๊ณ ์ข ๋ ๊ฐ์ ํ ์ ์๋ค ์๊ฐํ๋๋ฐ
๊ทธ ์ ์ด ์ฌ๋ผ์ง๋ ๊ทธ ๋งํผ ๋์ ์ฑ์ฅ ๊ธฐํ๋ ์์ด์ง๋ค๊ณ ์๊ฐํ๋ค.