[React Project] Namba1 Review Page Layout

Lemonยท2022๋…„ 5์›” 29์ผ
1

Project

๋ชฉ๋ก ๋ณด๊ธฐ
2/7
post-thumbnail

๐Ÿ“Œ 1์ฐจ ํ”„๋กœ์ ํŠธ : ์ฟกํ‚ท ์‚ฌ์ดํŠธ ํด๋ก  ์ฝ”๋”ฉ

๐Ÿ“Œ ๋ ˆ์ด์•„์›ƒ ์ฝ”๋“œ๋ฆฌ๋ทฐ ์ง€์  ๋ฐ›์€ ์‚ฌํ•ญ

  • ์ด๋ฏธ์ง€ ์ ˆ๋Œ€๊ฒฝ๋กœ๋กœ ์ˆ˜์ •
  • ๋ถˆํ•„์š”ํ•œ ์ฃผ์„ ์‚ญ์ œ
  • ํƒœ๊ทธ๋กœ ์Šคํƒ€์ผ ์ค€ ๊ฒƒ ํด๋ž˜์Šค ์…€๋ ‰ํ„ฐ๋กœ ๋ณ€๊ฒฝํ•˜๊ธฐ
  • ๋งค๊ฐœ๋ณ€์ˆ˜ ๊ตฌ์กฐ๋ถ„ํ•ด ํ™œ์šฉํ•˜๊ธฐ
  • ํ•˜๋‚˜์˜ ํŒŒ์ผ์—” ํ•˜๋‚˜์˜ ์ปดํฌ๋„ŒํŠธ๋งŒ ์žˆ๋„๋ก ํ•˜๊ธฐ
  • ์ธ๋ผ์ธ ์Šคํƒ€์ผ ์‚ฌ์šฉํ•˜์ง€ ๋ง๊ธฐ
  • ์ปดํฌ๋„ŒํŠธ ๋ณ„๋กœ SCSS ํŒŒ์ผ ๋‚˜๋ˆ„๊ธฐ
  • API๋ฅผ ๋ฐ›์•„์˜ฌ ๋ฐ์ดํ„ฐ๋ผ๋ฉด ๋ชฉ๋ฐ์ดํ„ฐ, ๊ณ ์ •์ ์ธ ๋ฐ์ดํ„ฐ๋ผ๋ฉด ์ƒ์ˆ˜๋ฐ์ดํ„ฐ ํ™œ์šฉํ•˜๊ธฐ
  • ์ƒ์ˆ˜ ๋ฐ์ดํ„ฐ๋Š” ์ปดํฌ๋„ŒํŠธ ํ•˜๋‹จ์— ์ž‘์„ฑํ•˜๊ธฐ
  • ํ•จ์ˆ˜ ์ด๋ฆ„์€ ์–ด๋–ค ๋™์ž‘์„ ํ•˜๋Š” ํ•จ์ˆ˜์ธ์ง€ ์•Œ ์ˆ˜ ์žˆ๋„๋ก ์ž‘์„ฑํ•˜๊ธฐ

๋ฆฌ์•กํŠธ์— ์ต์ˆ™ํ•˜์ง€ ์•Š์•„์„œ HTML/CSS๋กœ ๋ ˆ์ด์•„์›ƒ ์งœ๋“ฏ์ด JSX๋„ ํ•˜๋“œ์ฝ”๋”ฉ์œผ๋กœ ๋งŒ๋“ค๊ณ  push ํ›„ ๋ฉ˜ํ† ๋‹˜๊ป˜ ์ฝ”๋“œ ๋ฆฌ๋ทฐ๋ฅผ ๋ฐ›์•˜๋‹ค.

์ฒ˜์Œ์—๋Š” HTML ์ž‘์„ฑํ•˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ Review.js ํ•œ ๊ณณ์— ๋ชจ์•„์„œ ์ž‘์„ฑํ–ˆ์—ˆ๋‹ค.

ํ”ผํŠธ๋ฐฑ ํ›„์— ์ปดํฌ๋„ŒํŠธํ™” ์‹œํ‚ค๊ณ  ๋ฐ˜๋ณต๋˜๋Š” UI๋“ค์€ UseState, map ๋ฉ”์†Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๋ฆฌํŒฉํ† ๋ง ํ•˜๋Š” ๊ณผ์ •์—์„œ ํ•˜๋“œ์ฝ”๋”ฉ์ด ์–ผ๋งˆ๋‚˜ ๋น„ํšจ์œจ์ ์ธ์ง€ ์ƒˆ์‚ผ ๊นจ๋‹ฌ์•˜๊ณ , map์„ ์‚ฌ์šฉํ•˜๋Š” ๊ณผ์ •์„ ์ •ํ™•ํžˆ ์ดํ•ดํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค.

์ปดํฌ๋„ŒํŠธ ๋ถ„๋ฆฌ ํ›„ Review.js์˜ ์ฝ”๋“œ๊ฐ€ ๊น”๋”ํ•ด์กŒ๋‹ค.๐Ÿคฉ

map ๋ฉ”์†Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ต์ˆ™ํ•˜์ง€ ์•Š์•„์„œ ๋น„์Šทํ•œ ๊ตฌ์กฐ์˜ UI๋ฅผ ์ „๋ถ€ ํ•˜๋“œ์ฝ”๋”ฉํ–ˆ๋Š”๋ฐ ๋ง‰์ƒ map์ด ์ต์ˆ™ํ•ด์ง€๋‹ˆ๊นŒ ๊ฐ„ํŽธํ•˜๊ณ  ํŽธํ•ด์กŒ๋‹ค.

map์„ ์‚ฌ์šฉํ–ˆ๋˜ ๋ฐฉ๋ฒ•์„ ๊ฐ„๋‹จํ•˜๊ฒŒ ์ •๋ฆฌํ•˜์ž๋ฉด

์•„๋ž˜์™€ ๊ฐ™์€ ์…€๋ ‰ํŠธ ๋ฐ•์Šค๊ฐ€ ์žˆ์—ˆ๋‹ค.

<option> ํƒœ๊ทธ์•ˆ์— ์žˆ๋Š” ๋ฐ์ดํ„ฐ๋“ค์„ ๋ชฉ ๋ฐ์ดํ„ฐ๋กœ ๋งŒ๋“ค์—ˆ๋‹ค.

menu.json (๋ชฉ ๋ฐ์ดํ„ฐ๋Š” .json ํ˜•์‹์ด๋‹ค.)

[
  {
    "id": 1,
    "menuName": "๋‹จํ˜ธ๋ฐ•ํฌ๋ฆผํŒŒ์Šคํƒ€"
  },
  {
    "id": 2,
    "menuName": "ํ† ๋งˆํ† ๋น„ํ”„์ŠคํŠœ"
  },
  {
    "id": 3,
    "menuName": "์†Œ๊ณ ๊ธฐ๋ฒ„์„ฏ์žก์ฑ„"
  },
  {
    "id": 4,
    "menuName": "๋งค์šด ์น˜์ฆˆ์ฐœ๋‹ญ"
  },
  {
    "id": 5,
    "menuName": "๋กœ์ œ๋–ก๋ณถ์ด"
  },
  {
    "id": 6,
    "menuName": "๋น„๋น”๊ตญ์ˆ˜"
  },
  {
    "id": 7,
    "menuName": "๋‹ญํ•œ๋งˆ๋ฆฌ์™€ ์นผ๊ตญ์ˆ˜"
  },
  {
    "id": 8,
    "menuName": "์ˆ˜์ œ๋น„์™€ ๋ฐฐ์ถ”์ฒœ"
  },
  {
    "id": 9,
    "menuName": "๊ฐ„์žฅ๋ถˆ๊ณ ๊ธฐ"
  },
  {
    "id": 10,
    "menuName": "๊น€์น˜์ฐŒ๊ฐœ"
  },
  {
    "id": 11,
    "menuName": "๋งค์šด ์น˜ํ‚จํฌ๋ฆผ์ŠคํŠœ"
  },
  {
    "id": 12,
    "menuName": "์น˜์ฆˆ๋‹ญ๊ฐˆ๋น„"
  }
]

fetch๋กœ ๋ชฉ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์™€์„œ setMenu์— ์ €์žฅํ•œ๋‹ค.
menu ์— ์ €์žฅ๋œ ๋ฐฐ์—ด์˜ ๊ธธ์ด๋งŒํผ map์„ ๋Œ๋ฆฐ๋‹ค.

const ReviewAdd = () => {
	const [menu, setMenu] = useState([]);

	useEffect(() => {
	  fetch('/data/menu.json')
	    .then(res => res.json())
	    .then(data => {
	      setMenu(data);
	    });
		}, [setMenu]);

	return (
		<select name="์ƒํ’ˆ์„ ํƒ" onChange={saveReviewMenu} required>
		  <option disabled defaultValue>
		    ๋ฉ”๋‰ด๋ฅผ ์„ ํƒํ•ด์ฃผ์„ธ์š”.
		  </option>
		  {menu.map(({ id, menuName }) => (
		    <option key={id}>{menuName}</option>
		  ))}
		</select>
)}

menu ๋ฐ์ดํ„ฐ์˜ key๊ฐ’ ๋“ค ์ค‘ menuName๋ฅผ props๋กœ ๊ฐ€์ ธ์™€์„œ <option> ํƒœ๊ทธ์— ๋„ฃ๋Š”๋‹ค.

๊ทธ๋Ÿฌ๋ฉด ์ž๋™์œผ๋กœ menuName์„ ๋ฐฐ์—ด์—์„œ ๋ฝ‘์•„์„œ ๋„ฃ์–ด์ค€๋‹ค.

์ด๋Ÿฐ์‹์œผ๋กœ ๋น„์Šทํ•œ UI๊ฐ€ ๋งŒ๋“ค์–ด์งˆ ๊ฒฝ์šฐ์—๋Š” ์ „๋ถ€ map๋ฉ”์†Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•ด์„œ ์ž‘์„ฑํ–ˆ๋‹ค.

4์ฐจ๊นŒ์ง€ ์ฝ”๋“œ๋ฆฌ๋ทฐ๋ฅผ ๋ฐ›์€ ํ›„์—์•ผ ํ†ต๊ณผ ํ–ˆ๋‹ค.

Layout์˜ ์ฝ”๋“œ๋ฆฌ๋ทฐ์˜ ํฌ์ธํŠธ๋Š” ์ž์ž˜ํ•œ ์‹ค์ˆ˜ ์ˆ˜์ •์„ ์ œ์™ธํ•˜๊ณ  ๊ฑฐ์˜ ์ปดํฌ๋„ŒํŠธํ™” ํ•˜๋Š”๊ฒƒ๊ณผ, ๋ฐ˜๋ณต ๋˜๋Š” UI map ๋ฉ”์†Œ๋“œ ํ™œ์šฉํ•˜๊ธฐ ์˜€๋‹ค.

profile
ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž ๊ฐ€๋ณด์ž๊ณ ~!!

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

comment-user-thumbnail
2022๋…„ 6์›” 5์ผ

์ด๋ฒˆ ํ”„๋กœ์ ํŠธ์—์„œ map ์‚ฌ์šฉํ•˜๋Š”๊ฒŒ ์ •๋ง map๋”๋ผ๊ตฌ์š”

1๊ฐœ์˜ ๋‹ต๊ธ€