ํค๋, ํธํฐ ์์
์ด ๋๋๊ณ ๋ฉ์ธ ํ๋ฉด์ ์งํํ๋ค..
ํ์ง๋ง! ๋ฉ์ธ ํ๋ฉด์ ์์
ํ๋ ค๋ฉด ๊ฒฐ๊ตญ์ ๊ฐ 4๊ฐ์ ์ํ์ ์์
ํด์ผํ๋ค.
์ํ๋ง ์๋๊ฒ ์๋ ๊ฐ ํ์
๋ง๋ค ์คํ์ผ์ด ๋ค๋ฅด๊ณ , ์ํ ํด๋ฆญ์ ๋ชจ๋ฌ์ฐฝ๋ ๋์ค๊ณ , ๋ถ๋งํฌ ๋ฒํผ๋ ์กด์ฌํ๋ค.
์... ์์
ํ๊ธด ํ๋๋ฐ...
ํ๊ธด ํ๋๋ฐ ๊ฒฐ๊ณผ๊ฐ ์๋ค..
ํด๋น ์์ ์์ญ ๋์๊ฒ ์์ง์ ๋์ด๋๊ฐ ๋์๊ฑฐ ๊ฐ๋คใ
๋ถ๋งํฌ ๊ธฐ๋ฅ๊ณผ, ํ๋ฉด ํด๋ฆฌ ์ ๋ชจ๋ฌ ์ฐฝ๋ ๋์์ผํ๋ ์ ๊ณผ
๊ฐ ํ์
๋ง๋ค ์คํ์ผ์ด ๋ค๋ฅธ์ ์ด ์์ด ์ง์ง ํ๋ฃจ ์ข
์ผ ์์
ํ์ง๋ง ๋๋ด์ง ๋ชปํ๋ค.
๋ฐ๋ก API๋ก ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๊ธฐ ๋ณด๋ค๋
๋๋ฏธ ๋ฐ์ดํฐ๋ฅผ ๋ง๋ค์ด ๊ฐ๊ฐ์ ์ปดํฌ๋ํธ์ ์กฐ๊ฑด์ ๋ง์ถฐ ์์
์ ํ๋ค.
์ด๋ฐ์์ผ๋ก ๋๋ฏธ ๋ฐ์ดํฐ๋ฅผ ๋ง๋ค์ด์ด์ ์์
ํด ์ฃผ์๋ค.
์ํ์ ๊ฒฝ์ฐ ์ฌ์ฌ์ฉ์ฑ์ด ๋ง์ ํ๋์ ์ปดํฌ๋ํธ๋ก ๋นผ์ฃผ์๋ค.
๋ณด์ฌ์ฃผ๋ ๋ด์ฉ์ด ๊ฐ type๋ง๋ค ๋ฌ๋ผ์ ์ผํญ ์ฐ์ฐ์๋ฅผ ์ฌ์ฉํด type์ ๋ฐ๋ผ ์คํ์ผ๋ง์ ๋ค๋ฅด๊ฒ ํด์ฃผ์๋ค.
<div className="right-area">
{/* Category, Exhibition */}
{!productItem.discountPercentage && null}
{/* Brand */}
{productItem.type !== "Brand" || <strong>๊ด์ฌ๊ณ ๊ฐ์</strong>}
{/* Product*/}
{productItem.type !== "Product" || <strong className="product">{`${productItem.discountPercentage}%`}</strong>}
<span>{!productItem.price ? numComma(productItem.follower) :`${numComma(productItem.price)}์`}</span>
</div>
์ผํญ ์ฐ์ฐ์ ์ง์ง ์ ์ฉํ๊ฒ ์ฌ์ฉํ ๊ฑฐ ๊ฐ๋ค.
๊ทธ๋ ๊ฒ ๊ฐ ์ํ ํ์ ์ ๋ฐ๋ผ ๋ค๋ฅด๊ฒ ํด์ค ๋ชจ์ต์ด๋ค.
๊ทธ๋ฆฌ๊ณ ๊ทธ ๋ค์ ๋ฌธ์ ๋ ๋ชจ๋ฌ๊ณผ ๋ถ๋งํฌ ๊ธฐ๋ฅ์ด๋ค...
์ผ๋จ ๋ ์ค ๋น๊ต ํ์ ๋ ๋ชจ๋ฌ ์ฐฝ์ด ๋ ์ฌ์ธ ๊ฑฐ ๊ฐ์ ์์
ํด ์ฃผ์๋ค.
๋ชจ๋ฌ ์ฐฝ ๋ํ ์ฌ์ฌ์ฉ์ด ๋ง์ ์ปดํฌ๋ํธ๋ก ๋ฐ๋ก ์์
ํด ์ฒ๋ฆฌํด ์ฃผ์๋ค.
[ํด๋น ์ฌ์ง์ ์ด๋ฏธ ๊ตฌํํ ๋ชจ์ต์์ ๊ธฐ๋ฅ๋ง ์บก์ฒํ ๊ฒ์ด๋ค.]
ํด๋น ์ํ ํด๋ฆญ ์ ๋ชจ๋ฌ์ฐฝ์ด ๋จ๊ณ ์ํ ์ด๋ฏธ์ง, ์ด๋ฆ, ๋ถ๋งํฌ ๋ฒํผ, ๋ซ๊ธฐ ๋ฒํผ์ด ์กด์ฌํด์ผํ๋ค.
์ด๋ฏธ ๊ฐ ์ํ์ map()๋ฅผ ์ด์ฉํด ์ ์ฉํด ๋ ์ํ๋ก ๋ด๋ถ์ ๋ชจ๋ฌ ์ฐฝ์ ๋ฃ๊ณ ์์
ํด ์ฃผ๋ฉด ๋์ผํ ์ฌ์ง์ด ๋์จ๋ค.
const [isModal, setIsModal] = useState(false)
const showModal = () => {
setIsModal(!isModal)
}
.
.
.
{isModal ? <Modal/> : null }
.
.
.
<img onClick={showModal} />
useState๋ฅผ ์ด์ฉํด ๋ชจ๋ฌ ์ํ๋ฅผ ๊ด๋ฆฌํ๊ณ
์ด๋ฏธ์ง ํด๋ฆฌ ์ false์์ true๊ฐ ๋๊ฒ ์์
ํ๋ค.
์ผํญ ์ฐ์ฐ์๋ฅผ ์ด์ฉํด true์ด๋ฉด ๋ชจ๋ฌ์ฐฝ์ด ๋์ค๊ณ ์๋๋ฉด ์ ๋์ค๊ฒ ์งํํ๋ค.
์ง์ง ์ฌ๊ธฐ๊น์ง ์์ ํ๋ฉด์ ์ค.. ์๊ฐ๋ณด๋ค ๊ธ๋ฐฉ ๋๋๋ฐ?์ด๋ฌ๋ค.
์ด์ ๋๋ง์ ๋ถ๋งํฌ์ด๋ค...
์ผ๋จ ๋ฒํผ ํด๋ฆญ ์ ๋ฒํผ on,off๋ ๋ชจ๋ฌ์ฒ๋ผ ์ํ๋ฅผ ์ฃผ์ด ๊ด๋ฆฌํ๋ฉด ๋๊ธฐ์ ์ฝ๊ฒ ๊ตฌํํ ์ ์์๋ค.
๋ฌธ์ ๋ ๋ถ๋งํฌ ์ถ๊ฐ์ localStorage์ ์ ์ฅ๋ ๋ถ๋งํฌ ๋ฆฌ์คํธ ์์ญ์ ๋
ธ์ถ๋์ด์ผํ๋ค.
๋ํ ๋ชจ๋ฌ์ฐฝ์ ์๋ ๋ถ๋งํฌ๋ ๊ฐ์ด ์ถ๊ฐ ๋์ด์ผ ํ๋ค.
์ด๋ ์๊ฐํ๋๊ฑฐ ๋ถ๋งํฌ ํด๋ฆญ์ localStorage์ ์ถ๊ฐํ๊ณ
localStorage์ ๋ฐ์ดํฐ๋ฅผ ์ด์ฉํด ๋ถ๋งํฌ ๋ฆฌ์คํธ ์ ๋ณด๋ฅผ ๋ถ๋ฌ์ค๋ฉด ๋๊ฒ ๊ตฌ๋!
๊ทธ๋ ๋ค. ๋ง์ด ์ฝ์ง ๊ตฌํํ๋๋ฐ ๋จธ๋ฆฌ ์์ฒญ ๋๋ ธ๋ค.
const [isBookMark, setIsBookMark] = useState(false)
const [dataState, setDataState] = useState([])
const BOOKMARK = "BOOKMARK"
const storedData = JSON.parse(localStorage.getItem(BOOKMARK));
const handleBookmarkToggle = (item) => {
if (dataState.includes(item) || storedData.includes(item)) {
const filterData = dataState.filter(el => el.id !== item.id)
setDataState(filterData)
localStorage.setItem(BOOKMARK, JSON.stringify(filterData))
} else {
setDataState([...dataState, item])
localStorage.setItem(BOOKMARK, JSON.stringify([...dataState, item]))
}
}
์์ง ๋ฆฌ๋์ค๋ ๊ณต๋ถ๋ฅผ ์ ๋๋ก ๋ชปํด์ State๋ก ์์ ์ ์งํํ๋ค.
dataState
์ ๋ถ๋งํฌ์ ํด๋ฆญ๋ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ๋ ๊ฐ์ผ๋ก ํด๋น ๊ฐ์
localStorage์ ๋ฃ์ ์์ ์ด๋ค.
storedData
๋ localStorage์ ๋ฐ์ดํฐ๋ฅผ ๋ถ๋ฌ์ค๊ฒ ๋ฏธ๋ฆฌ ๋ง๋ค์๋ค.
dataState
์ storedData
์ item
์ด ์กด์ฌํ ๊ฒฝ์ฐ์ ๊ทธ๋ ์ง ์์ ๊ฒฝ์ฐ์ ์กฐ๊ฑด์ ์ฃผ์๊ณ
๊ทธ ๊ฐ์ locaStorage์ ์ ์ฅํด ์ฃผ์๋ค.
์ด ๋ ์ ์ฅ์ ์ ๋์๋ค...!
ํผ์ ๋๋ ์์ ๋ญ๊ฐ ๋ฌธ์ ์ง..?
์ด ๋ถ๋ถ์ ํ์ด๋๊ณผ ๊ฐ์ด ํ์ด ์ฝ๋๋ฆฌ๋ทฐ๋ฅผ ์งํํ๋ฉด์
ํ์ด๋์ด ๋์์ ์ฃผ์
์ ํด๊ฒฐ ๋์๋ค! ์ง์ง ๊ฐ์ฌํฉ๋๋ค.ใ
.ใ
๐โโ๏ธ
์ด๋ถ๋ถ์ ๋ค์ ๋ธ๋ก๊น ์ผ๋ก...
์ฌ์ค ์ํ ์น์
์ ๋ด๋ถ์ ๋ชจ๋ฌ ์ฐฝ, ๋ถ๋งํฌ ๊ธฐ๋ฅ์ด ๊ฐ์ด ํฌํจ๋์ด ์์ด์
๋ง์ ์๊ฐ์ ์ก์ ๋์๋ค.
๋ํ ์ฃผ์ด์ง ์๊ฐ์ ์ฒ๋ฆฌํด ๋ณด์๋ ์๊ฐ์ผ๋ก ํ์ต ์ดํ์ ์์ ์ ๋ณ๋กํ์ง ์..์ผ๋ ค๊ณ ํ์ผ๋...!
์! ์ด๊ฑฐ ์ด๋ฌ๋ค๊ฐ ๋ฉ์ธ ํ๋ฉด๋ง ์ก๋ค๊ฐ ๋๋๊ฒ ๊ตฌ๋...! ์๊ฐ์ ํ๋ค.
๊ทธ๋ฆฌ๊ณ ๋ค๋ฅธ ๋๊ธฐ ๋ถ๋ค๊ณผ ๋ํ๋ฅผ ํ๋ฉด์ ์งํํ๊ฒ ์๋๋ผ ํผ์ ํ๋ค๊ฐ ๋งํ๋ฉด
chat GPT์๊ฒ ๋ฌผ์ด๋ณด์๋ค. (์ด์ฉ๋ฉด CPT๊ฐ ๋์ ๋๊ธฐ๊ฐ ์๋๊น ์ถ๋ค.)
GPT๊ฐ ๊ฐ๋ ์ง๋ฌธ์ ์๋์ ๋ฐ๋๋ก ๊ฐ ๋๋ ์์ง๋ง ์คํ ์ฐพ๊ฑฐ๋ ๋ฉ์๋ ์ด๋ค๊ฑธ ์ฌ์ฉํด์ผํ๋์ง ๋ถ๋ถ์์ ๋ง์ ๋์์ ์ป์๋ค.