๐Ÿฅฆ๋ธŒ๋กœ์ปฌ๋ฆฌ๐Ÿฅฆ 3์ผ์ฐจ ๐Ÿง˜โ€โ™€๏ธ(Please slow down) ๐Ÿง˜

Maria Kimยท2021๋…„ 12์›” 1์ผ
0
post-custom-banner

์˜ค๋Š˜์€ ์„ฑ๊ธ‰ํ•จ์— ๋‚˜ ํ˜ผ์ž ๋‹ฌ๋ฆฌ๊ณ  ์žˆ์ง€ ์•Š๋Š”์ง€ ๋‹ค์‹œ ์ˆจ์„ ์‰ฌ๊ณ  ๋‘˜๋Ÿฌ๋ด์•ผ ํ•จ์„ ์•Œ๊ฒŒ ๋˜์—ˆ๋‹ค.
๊ทธ๋ฆฌ๊ณ  ์†Œํ†ต์ด ์ง„์ •ํ•œ ์†Œํ†ต์ธ์ง€ ๋‹ค์‹œ ํ•œ๋ฒˆ ์ ๊ฒ€ํ•ด์•ผ ํ•จ์„ ์•Œ๊ฒŒ ๋˜์—ˆ๋‹ค.
๋ฌผ๋ก  ์•„์ง 3์ผ์ฐจ์ด๊ณ  ์ค‘๋„๋ฅผ ์ฐพ๋Š” ๋ถ€๋ถ„์€ ๋Š์ž„์—†์ด ์–ด๋ ค์šด ๋ถ€๋ถ„์ด์ง€๋งŒ
์†Œํ†ต์€ ๊ทธ ๋ถ€๋ถ„์€ ๊ณ„์† ์กฐ์œจํ•˜๊ฒŒ๋” ํ•˜๋Š” ์œ ์ผํ•œ ๋ฐฉ๋ฒ•์ด๋‹ˆ
์ง„์ •ํ•œ ์†Œํ†ต์„ ์œ„ํ•ด ๋Š์ž„์—†์ด ๋…ธ๋ ฅํ•˜๊ณ  ๋‚ด ์Šค์Šค๋กœ๋ฅผ ์ ๊ฒ€ํ•˜์ž.
ํฐ ๊ทธ๋ฆผ๊ณผ ์ „์ฒด์ ์ธ ํ๋ฆ„์„ ๋ณด๋„๋ก ๋” ๋…ธ๋ ฅํ•˜์ž.

์˜ค๋Š˜ ๊ณ ๋ฏผํ•œ ๋ถ€๋ถ„

์žฅ๋ฐ”๊ตฌ๋‹ˆ๋Š” ์–ด๋–ป๊ฒŒ fetch ํ•˜์ง€?!

๋‚ด ์‚ฌ์ดํŠธ๋Š” ์ œํ’ˆ์„ ์ถ”๊ฐ€ํ•˜๋Š” ๋ฐฉ๋ฒ•์ด 3๊ฐ€์ง€ ์žˆ์—ˆ๋‹ค.
1. ์ƒํ’ˆ ํŽ˜์ด์ง€์—์„œ ์ƒํ’ˆ ์ถ”๊ฐ€

  • ์›๋ž˜ ์ถ”๊ฐ€๋œ ์ƒํ’ˆ์ด ์•„๋‹ ๋•Œ -> ์ƒˆ๋กœ์šด ์ƒํ’ˆ์ด ์ถ”๊ฐ€๋˜๊ณ  ํ˜„์žฌ ์ถ”๊ฐ€ํ•œ ์ˆ˜๋Ÿ‰์ด ์ด ์ˆ˜๋Ÿ‰์ด ๋œ๋‹ค.
  • ์›๋ž˜ ์ถ”๊ฐ€๋œ ์ƒํ’ˆ์ผ ๋•Œ -> ๊ธฐ์กด ์ˆ˜๋Ÿ‰์—์„œ ๋ฐฉ๊ธˆ ์ถ”๊ฐ€ํ•œ ์ˆ˜๋Ÿ‰์ด ์ถ”๊ฐ€๋˜์–ด ์ด ์ˆ˜๋Ÿ‰์ด ์ฆ๊ฐ€ํ•œ๋‹ค.
  1. ์žฅ๋ฐ”๊ตฌ๋‹ˆ ํŽ˜์ด์ง€
  • ์žฅ๋ฐ”๊ตฌ๋‹ˆ ํŽ˜์ด์ง€์—์„œ๋Š” ์ˆ˜๋Ÿ‰ ๋ณ€๊ฒฝ๋งŒ ์ผ์–ด๋‚œ๋‹ค. -> ๋ณ€๊ฒฝ ์ˆ˜๋Ÿ‰์ด ์ด ์ˆ˜๋Ÿ‰์ด ๋œ๋‹ค.

๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์— 3๊ฐ€์ง€ ๊ฒฝ์šฐ์˜ ์ˆ˜๊ฐ€ ๋‚˜์˜จ๋‹ค

New - product(์ƒˆ๋กœ ๋งŒ๋“ฆ) : ๋ฐฉ๊ธˆ ์ž…๋ ฅํ•œ ์ˆ˜๋Ÿ‰
Add - product(๊ธฐ์กด์— ์กด์žฌ) : ๋ฐฉ๊ธˆ ์ž…๋ ฅํ•œ ์ˆ˜๋Ÿ‰ + ๊ธฐ์กด์— ์žˆ๋˜ ์ˆ˜๋Ÿ‰
Edit - product(๊ธฐ์กด์— ์กด์žฌ) : ๋ฐฉ๊ธˆ ์ž…๋ ฅํ•œ ์ˆ˜๋Ÿ‰ === ๋ณ€๊ฒฝ๋˜์–ด ์“ฐ์—ฌ์•ผ ํ•˜๋Š” ์ˆ˜๋Ÿ‰

๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์— ์ •ํ™•ํ•œ ๋ฐฑ์—”๋“œ์™€์˜ ์†Œํ†ต์„ ์œ„ํ•ด header์— ์ด ๋ถ€๋ถ„์„ ํฌํ•จํ•ด ๋ณด๋‚ด์ฃผ๊ธฐ๋กœ ํ–ˆ๋‹ค.

์˜ค๋Š˜ ํ† ๋ก ํ•˜๋ฉฐ ์น ํŒ์— ์ž‘์„ฑํ•œ ๋ถ€๋ถ„

์ƒํ’ˆ๋“ค ์ •๋ ฌ์€ ํ”„๋ก ํŠธ or ๋ฐฑ?

  • ์นดํ…Œ๊ณ ๋ฆฌ ์ •๋ ฌ์„ ํ•ด์•ผ ํ•  ๋•Œ๊ฐ€ ์žˆ๋‹ค. ์‹ ์ƒํ’ˆ์ˆœ, ๋‚ฎ์€๊ฐ€๊ฒฉ ์ˆœ ๋“ฑ...

๊ทธ๋Ÿด๋•Œ ์•„์ดํ…œ์„ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ํ”„๋ก ํŠธ๊ฐ€ ํ•ด์•ผ ํ•˜๋‚˜?
์•„๋‹ˆ๋ฉด ๋ฐ์ดํ„ฐ๋ฅผ ๊ด€๋ฆฌํ•˜๋Š” ๋ฐฑ์ด ํ•ด์•ผ ํ•˜๋‚˜?

๋ฐฑ์—๊ฒŒ ๋ฌผ์œผ๋‹ˆ ๋ฐฑ์€ ์ •๋ ฌ์„ ๋ถˆ๋Ÿฌ ์˜ฌ๋•Œ๋งˆ๋‹ค
1. ๋ฐ์ดํ„ฐ ์ทจํ•ฉ 2. ๋ฐ์ดํ„ฐ ์ •๋ ฌ
์ด 2๊ฐ€์ง€๋ฅผ ๊ณ„์† ๋ฐ˜๋ณตํ•ด์•ผ ํ•œ๋‹ค๊ณ  ํ•œ๋‹ค.

์ด ๋ถ€๋ถ„๋งŒ ๋ณด๋ฉด ๋ฐ์ดํ„ฐ๋ฅผ ํ•œ๋ฒˆ ๋ฐ›์•„ ๊ณ„์† ์‚ฌ์šฉํ•˜๋ฉด ๋˜๋Š” ํ”„๋ก ํŠธ์—์„œ ํ•˜๋Š” ๊ฒŒ ๋งž์•„ ๋ณด์ผ ์ˆ˜ ์žˆ๋‹ค.

ํ•˜์ง€๋งŒ ์ž˜ ์ƒ๊ฐํ•ด ๋ณด๋ฉด js ๋Š” ํฐ ๋ฐ์ดํ„ฐ๋ฅผ ๊ด€๋ฆฌํ•˜๋ผ๊ณ  ๋‚˜์˜จ ์–ธ์–ด๊ฐ€ ์•„๋‹ˆ๋‹ค.
๋ฐฑ์—”๋“œ๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ๊ด€๋ฆฌํ•˜๋Š” ๋ถ€๋ถ„๋“ค์ด ๋” ์ž˜ ๋˜์–ด ์žˆ๋‹ค. ๊ทธ๋ž˜์„œ ๋ฐ์ดํ„ฐ ๊ด€๋ฆฌ์— ๋Œ€ํ•œ ๊ธฐ๋Šฅ์ด ๋” ๋ฐœ๋‹ฌ๋˜์–ด ์žˆ๋‹ค.
์ž์„ธํ•œ ๋ถ€๋ถ„์€ ๋ชจ๋ฅด์ง€๋งŒ ๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์— ๋ฐฑ์—์„œ ํฐ ๋ฐ์ดํ„ฐ์˜ ์ •๋ ฌ์ด๋‚˜ ๊ด€๋ฆฌ๋ฅผ ํ•˜๋Š” ๊ฒŒ ๋งž๋‹ค๊ณ  ํ•œ๋‹ค.

๊ฒฐ๋ก ! ๋ฐฑ์—์„œ!

useState ๋น„๋™๊ธฐ ๋ฌธ์ œ๋Š” ํ•จ์ˆ˜ ์•ˆ์—์„œ๋งŒ

ํ•จ์ˆ˜์•ˆ์—์„œ useState ๋ฅผ ๋ณ€๊ฒฝํ•˜๊ณ  ๊ทธ ๊ฐ’์„ ๋ฐ”๋กœ ์‚ฌ์šฉํ•˜๋ฉด ๋ฌธ์ œ๊ฐ€ ์ƒ๊ฒผ๋˜ ๋ถ€๋ถ„ ๋•Œ๋ฌธ์— 2๊ฐœ๋ฅผ ๊ด€๋ฆฌํ•˜๊ณ  ์žˆ์—ˆ๋‹ค.

function ProductListHeader({ productMenu, setCurCategoty }) {
  const [categoryCheck, setCategoryCheck] = useState(0);
  
  const clickCategory = id => {
    setCurCategoty(`${id}0`);
    setCategoryCheck(id);
  };
  
  return (
   <button className={`category ${categoryCheck === i ? 'category-checked' : '' }`} 
    key={i} onClick={() => clickCategory(i)}> 
   </button>
  )
}

ํ•˜์ง€๋งŒ ์ƒ๊ฐํ•ด ๋ณด๋‹ˆ
๋‚ด๊ฐ€ ์ƒํƒœ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ถ€๋ถ„์€
ui ๋ถ€๋ถ„์ด๋ผ ๋น„๋™๊ธฐ์˜ ๋ฌธ์ œ๊ฐ€ ์ƒ๊ธฐ๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ
์ •์ƒ์ ์œผ๋กœ ๋ฐ˜์˜์ด ๋˜๋Š” ๋กœ์ง์ด์—ˆ๋‹ค...

๊ธฐ์–ตํ•˜์ž ui ๋ถ€๋ถ„์—์„œ usestate ์˜ ํ˜„์žฌ state ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋ณ€ํ™”๋œ ๋ถ€๋ถ„์ด ์ž˜ ๋ฐ˜์˜๋œ๋‹ค!! ์–ด๋””์„œ๋“ !!!

์•„ํ•˜... ๊ฒฐ๊ตญ ๋‚˜์ค‘์— ์—๋Ÿฌ๊ฐ€ ์ƒ๊ธฐ๋ฉด ๋” ์ฐพ๊ธฐ ์–ด๋ ต๊ฒŒ ๋งŒ๋“  ์ฝ”๋“œ์˜€๋˜ ๊ฒƒ์ด๋‹ค.
๊ทธ๋ž˜์„œ ๊น”๋”ํ•˜๊ฒŒ ํ•œ ๊ฐœ๋กœ ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•˜๋Š” ์ฝ”๋“œ๋กœ ์ˆ˜์ •ํ–ˆ๋‹ค.

function ProductListHeader({ productMenu, setCurrentCategory, currentCategory }) {
  
  return (
   <button className={`category ${currentCategory === i ? 'category-checked' : '' }`} 
    key={i} onClick={() => setCurrentCategory(i)}> 
   </button>
  )
}

๋‚ด์ผ๋ถ€ํ„ฐ๋Š” ๊ทธ๋ฆฌ๊ณ  standup ๋ฏธํŒ…์˜ ์ทจ์ง€์— ๋งž๊ฒŒ ์งง๊ณ  ๊ตต์€ standup Meeting ํ•˜๊ธฐ!!

๊ทธ๋ž˜๋„ ์˜ค๋Š˜ ์ œ์ผ ์ค‘์š”ํ•œ ์ ์€ ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค๊ณผ ์ผํ•  ๋• ๋‹ฌ๋ ค๊ฐ€์ง€ ๋ง๊ณ  ํ…œํฌ๋ฅผ ๋‹ค์‹œ ํ™•์ธํ•˜๊ณ  ์†Œํ†ต์„ ๋‹ค์‹œ ๊ณ ๋ฏผํ•˜์ž!

profile
Frontend Developer, who has business in mind.
post-custom-banner

0๊ฐœ์˜ ๋Œ“๊ธ€