์ง๋ฌธ ํ๊ทธ API๊ฐ ์์ ๋์ด ๋ณ๊ฒฝํ๋ค.
์ง๋ฌธ ๋ฑ๋ก/์์ ์ ํ๊ทธ ๋ถ๋ฌ์ค๋ ๋ฐฉ์์ด ๋ฌ๋ผ ์ด๋ถ๋ถ์์ ์ ๋ฅผ ๋จน์๋ค.
์ง๋ฌธ ๋ฑ๋ก
- ํ๊ทธ ์ด๋ฆ๋ง ๊ฐ์ ธ์จ๋ค.
tagName : string
์ง๋ฌธ ์์
- ์ ํ๋ ํ๊ทธ๊ฐ ์ฒดํฌ๋์ด ์์ด์ผํ๋ค.
- API ๋ช ์ธ์์๋
select : boolean
์ด ์ถ๊ฐ ๋์๋ค.
- ์ง๋ฌธ ๋ฑ๋ก์ ํ๊ทธ ์ด๋ฆ๋ง ๊ฐ์ ธ์ค๋๋ฐ ์ง๋ฌธ ์์ ์ ๋ชจ๋ ํ๊ทธ๋ฆฌ์คํธ์์select
๋ก ์ฒดํฌ ์ฌ๋ถ๋ฅผ ํ๋จํ๋ค.๊ณตํต
- ํ๊ทธ ๋ฆฌ์คํธ๊ฐ ๋ณด์ฌ์ง๋ค.
- 3๊ฐ๊น์ง ์ ํ์ด ๊ฐ๋ฅํ๋ค.
์ง๋ฌธ ๋ฑ๋ก/์์ ํ๊ทธ ๋ฆฌ์คํธ ๋ถ๋ฌ์ค๋ ๋ฐฉ์์ด ๋ฌ๋ผ์ ๋ค๋ฅด๊ฒ ์์ ์ ํด์ค์ผ ํ์๋ค.
์์ ํ์ด์ง๋ฅผ ๋ถ๋ฌ์ฌ ๋ select : boolean
์ฌ๋ถ๋ก ํ๋จํ๊ธฐ์ ์์ํ๊ฒ ๊ฐ์ ธ์ฌ ์ ์์๋ค.
ํ๋์ ์ปดํฌ๋ํธ๋ฅผ ๋ฑ๋ก/์์ ๊ฐ์ด ์ฌ์ฉ์ค์ผ๋ก ์ง๋ฌธ ์์ ํ์ด์ง์์๋ง ํ๊ทธ ์ปดํฌ๋ํธ์
memtags={tags}๋ฅผ ์ค ๋ถ๋ฅํ๋ค.
memtags.map((el) => (
<TagCheckBoxed key={el.tagName}>
<TagCheck
type="checkbox"
id={el.tagName}
value={el.tagName}
checked={el.select}
></TagCheck>
<TagLabel htmlFor={el.tagName}>
<span>{el.tagName}</span>
</TagLabel>
</TagCheckBoxed>
))
memtags
์ ํญ๋ชฉ์ ๋ณด์ฌ์ฃผ๊ณ
checked๋ฅผ select ์ฌ๋ถ๋ก ์์ฑํด์ฃผ๋ ๊ฐ๋จํ ๋ฐฉ์์ด์๋ค.
3๊ฐ ์ด์ ์ฒดํฌ๊ฐ ๋๋ฉด ์๋๊ฒ ํด์ผํ๋๋ฐ ๋ค์ค ์ฒดํฌ ๋๋ ๋ฌธ์ ๊ฐ ์์๋ค.
disabled
์กฐ๊ฑด์ด ์ง๋ฌธ ๋ฑ๋ก ์กฐ๊ฑด์ผ๋ก ๋์ด์์ด ์กฐ๊ฑด ์์ ์ด ํ์ ํ๋ค.
const handlerTag = (name, selectType) => {
const newTag = { tagName: name, select: !selectType };
const updatedTag = tags.map((el) => el.tagName === name ? newTag : el)
dispatch(updateTags(updatedTag));
};
!selectType
์ ์ค์ false๋ฉด true๋ก, true๋ฉด false๋ก ๋ณ๊ฒฝํ๋๋ก ํด์คฌ๋ค.el.tagName === name ? newTag : el
tags ๋ฆฌ์คํธ์ tagName๊ณผ ์ธ์๋ก ์ ๋ฌ๋๋ tagName์ด ๋์ผํ ๊ฒฝ์ฐ newTag๋ก, ์๋๋ฉด ๊ธฐ์กด ๊ฐ์ผ๋ก ๋๊ฐ ์กฐ๊ฑด์ ๊ฑธ์๋ค.๋ค์์ ํ๊ทธ๋ฅผ 3๊ฐ๊น์ง๋ง ์ฒดํฌ ๋๋๋ก ์์ ํด์ผํ๋ค.
disabled={selectMemTags.length >= 3}
์ด๋ ๊ฒ ์ค์ ํ๋ ์ฒดํฌ๋ ์ ๋๋๋ฐ ์ฒดํฌ๋ input์์๋ disabled๊ฐ ๊ฑธ๋ฆฌ๋ ๋ฌธ์ ๊ฐ ์์๋ค.
const selectMemTags = memtags.filter((el) => el.select)
.
.
.
disabled={selectMemTags.length >= 3 && !el.select}
true
์ธ ํ๊ทธ๋ง ์ถ์ถํด ๊ธธ์ด๋ฅผ ๊ตฌํ๋ค.!el.select
์กฐ๊ฑด์ ์ถ๊ฐํด ์ด๋ฏธ ์ ํ๋ ์ฒดํฌ ๋ฐ์ค๊ฐ ์๊ณ 3๊ฐ์ธ ๊ฒฝ์ฐfalse
๋ก ๋ณ๊ฒฝ ๋๋๋ก ์์ ํ๋ค.โ๏ธ
const selectMemTags = memtags.filter((el) => el.select)
ํด๋น ๋ณ์๋ ์ง๋ฌธ ์์ ํ์ด์ง์์๋ง ์ฌ์ฉ๋์ง๋ง ์ปดํฌ๋ํธ๋ฅผ ๊ณตํต์ผ๋ก ์ฌ์ฉํ๊ณ ์์ด
์ง๋ฌธ ๋ฑ๋ก ํ์ด์ง์์ memtags๊ฐ ์๋ค๊ณ ์ค๋ฅ๊ฐ ๋ฌ์๋ค.์ด๋ถ๋ถ์ ์ต์ ๋
?
๋ฅผ ์ด์ฉํด ํด๊ฒฐํ ์ ์์๋ค.const selectMemTags = memtags?.filter((el) => el.select)
const selectMemTags = memtags?.filter((el) => el.select)
.
.
.
memtags.map((el) => (
<TagCheckBoxed key={el.tagName}>
<TagCheck
type="checkbox"
id={el.tagName}
value={el.tagName}
checked={el.select}
disabled={selectMemTags.length >= 3 && !el.select}
onChange={() => handlerTag(el.tagName, el.select)}
></TagCheck>
<TagLabel htmlFor={el.tagName}>
<span>{el.tagName}</span>
</TagLabel>
</TagCheckBoxed>
)
ํ๋์ ์ปดํฌ๋ํธ๋ฅผ ์ง๋ฌธ ๋ฑ๋ก/์์ ํ์ด์ง ๊ฐ์ด ์ฌ์ฉํ๊ณ ์์ด
์ผํญ์ฐ์ฐ์๋ฅผ ์ฌ์ฉํด ํด๊ฒฐํ๋ค.
memtags
?
memtags.map((el) => (
//์ง๋ฌธ ์์ ํ์ด์ง
))
:
tagList.map((el) => (
//์ง๋ฌธ ์์ฑ ํ์ด์ง
))
์ง๋ฌธ ๋ฑ๋ก์ ์ ๋์๊ณ ์ง๋ฌธ ์์ ํ์ด์ง๋ API ๋ฌธ์ ๋ก ๊ณ์ ํด๊ฒฐํ์ง ๋ชปํ๋ค.
์ด๋ฒ์ API๊ฐ ์์ ๋๋ฉด์ ๋๋์ด ์ง๊ฒจ์ด ํ๊ทธ ์์ญ์ ํด๊ฒฐ ํ ์ ์์๋ค.