Skip to content

returntoOZ/fe-react-styledcomonents-props

ย 
ย 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

7 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

๊ณผ์ œ ์„ค๋ช…

ํ˜„์žฌ ์•„๋ž˜ 4๋ฌธ์ œ๊ฐ€ ์ฃผ์–ด์ ธ์žˆ๊ณ , ์–ด๋ฅธ์‚ฌ์ž์˜ ๊ธธ ๋ฌธ์ œ ํ•˜๋‚˜๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค!! 4๋ฌธ์ œ๋Š” ํ•„์ˆ˜๋กœ ํ•ด๊ฒฐํ•ด์ฃผ์‹œ๊ณ , ์–ด๋ฅธ์‚ฌ์ž์˜ ๊ธธ ๋ฌธ์ œ๋Š” ์„ ํƒ ๋ฌธ์ œ์ž…๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ด๋Š” ๋ฐฑ์—”๋“œ ์—ฐ๋™ํ•˜์‹ค ๋•Œ๋ฅผ ๋Œ€๋น„ํ•˜์—ฌ ๋„์›€์ด ๋งค์šฐ ๋˜๊ธฐ ๋•Œ๋ฌธ์— ํ•ด๋ณด์‹œ๋Š”๊ฑธ ๊ฐ•๋ ฅ ์ถ”์ฒœํ•ฉ๋‹ˆ๋‹ค.

1๋ฒˆ ๋ฌธ์ œ:

main.jsx์—์„œ ์ œ์‹œ๋œ ๋ฐ•์Šค์˜ ์ƒ‰๊น”์„ ๋ฐ”๊ฟ”๋ด…์‹œ๋‹ค. -> props ์˜ ์—ฐ๊ฒฐ์ด ์ œ๊ณต๋˜์–ด์ ธ ์žˆ์Šต๋‹ˆ๋‹ค. ์—ฐ๊ฒฐ ํ˜•ํƒœ๋ฅผ ํŒŒ์•…ํ•œ ํ›„ ์–ด๋–ป๊ฒŒ ๊ฐ’์„ ์ „๋‹ฌํ•ด์•ผ ๋ ์ง€ ๊ณ ๋ฏผํ•ด๋ณด์„ธ์š”!! ๋ฐ•์Šค ๋ฐฐ๊ฒฝ์ƒ‰ ์กฐ๊ฑด: 1๋ฒˆ์งธ ๋ฐ•์Šค: red, 2๋ฒˆ์งธ ๋ฐ•์Šค: blue, 3๋ฒˆ์งธ ๋ฐ•์Šค: green, 4๋ฒˆ์งธ ๋ฐ•์Šค: pink

ํžŒํŠธ: ๋‹ค๋ฅธ ํŒŒ์ผ์€ ๊ฑด๋“ค์ง€ ๋งˆ์‹œ๊ณ , main.jsx ์•ˆ์—์„œ๋งŒ ํ•ด๊ฒฐํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

2๋ฒˆ ๋ฌธ์ œ:

๋ฐ•์Šค ์•ˆ์— ํ…์ŠคํŠธ๋ฅผ ๋ฐ”๊ฟ”๋ณธ๋‹ค. -> 1๋ฒˆ ๋ฌธ์ œ์™€ ๋‹ฌ๋ฆฌ props์ œ๊ณต์ด ๋˜์–ด์žˆ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ง์ ‘ props๋ฅผ ์ค˜์•ผํ•ฉ๋‹ˆ๋‹ค!!

ํ…์ŠคํŠธ ์กฐ๊ฑด: ํ…์ŠคํŠธ๋Š” ํ•˜๊ณ  ์‹ถ์€๊ฑธ๋กœ 4๊ฐœ์˜ ๋ฐ•์Šค์— ๋„ฃ์œผ์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค. ๋‹จ, ๋ชจ๋‘ ๋‹ค๋ฅด๊ฒŒ ํ•ด์ฃผ์„ธ์š”!!

3๋ฒˆ ๋ฌธ์ œ

components ํŒŒ์ผ์— circle.jsx ๋ฅผ ๋งŒ๋“œ์‹  ํ›„ ํ˜„์žฌ ์ด๋ฏธ์ง€์™€ ๊ฐ™์€ ๋ชจ์–‘์ด ์ถœ๋ ฅ๋˜๊ฒŒ ๋งŒ๋“œ์„ธ์š”. ์ถœ๋ ฅ์€ main.jsx์—์„œ ๋ถˆ๋Ÿฌ์˜ค์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค!! image

์ƒ‰๊น” ์กฐ๊ฑด: ์ด 7๊ฐœ์˜ ์›์— ์ž์‹ ์ด ์›ํ•˜๋Š” ์ƒ‰๊น”์„ ๋„ฃ์œผ์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค! ์ƒ‰๊น”์€ ๋˜‘๊ฐ™์ด ์•ˆํ•˜์…”๋„ ๋ฉ๋‹ˆ๋‹ค. ๋‹จ, ๋ชจ๋“  ์›์˜ ์ƒ‰๊น”์„ ๋‹ค๋ฅด๊ฒŒ ํ•˜๊ณ , ์›๋“ค์˜ ์ •๋ ฌ์„ ๋งž์ถ”์–ด์ฃผ์„ธ์š”.

์–ด๋ฅธ์‚ฌ์ž์˜ ๊ธธ ๋ฌธ์ œ -> ์ด๋ฅผ map์„ ํ†ตํ•ด์„œ ์ƒ‰๊น”์˜ ๊ฐ’๋“ค์„ props๋กœ ์ „๋‹ฌํ•ด๋ณด์„ธ์š”!!

๋ฐฑ์—”๋“œ์™€ ์—ฐ๋™ํ• ๋•Œ, ๋ฐฑ์—”๋“œ์—์„  ์ผ์ • ๋ฐ์ดํ„ฐ๋ฅผ ์ฃผ๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋Œ€๋ถ€๋ถ„์ž…๋‹ˆ๋‹ค. ์ด์— ๋งž์ถฐ์„œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค์–ด๋‚ผ ๋•Œ๊ฐ€ ๋งŽ์Šต๋‹ˆ๋‹ค. ํ˜„์žฌ ๋ฐฑ์—”๋“œ์—์„œ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์› ์ƒ‰๊น” ๋ฐฐ์—ด์„ ์ฃผ๊ณ  ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•ด๋ด…์‹œ๋‹ค.

const circleColorArr = ["pink","red","black","gray","green","blue","orange"]; 

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

๊ฒฐ๊ณผ๋ฌผ

์ด ๊ฒฐ๊ณผ๋ฌผ์ฒ˜๋Ÿผ ๋‚˜์™”๋‹ค๋ฉด 1,2,3๋ฒˆ์€ ์™„๋ฃŒ์ž…๋‹ˆ๋‹ค. image

4๋ฒˆ ๋งˆ์ง€๋ง‰ ๋ฌธ์ œ!!

์ด์ œ ๋งˆ์ง€๋ง‰ ๋ฌธ์ œ์ž…๋‹ˆ๋‹ค! ์•„๋ž˜ ๊ทธ๋ฆผ๊ณผ ๊ฐ™์€ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค์–ด๋ณด์„ธ์š”. ๋ฌด์Šจ ๋ฐฉ๋ฒ•์„ ์“ฐ๋˜ ์ž์œ ์ž…๋‹ˆ๋‹ค. ๊ธ€์”จ ํฌ๊ธฐ์™€ ๋Œ€๋ถ€๋ถ„์˜ CSS ์š”์†Œ์˜ ์ •ํ™•ํ•œ ๊ฐ’์€ ์ œ๊ณตํ•˜์ง€ ์•Š์ง€๋งŒ, ๋˜‘๊ฐ™์ด ๋งŒ๋“ค์–ด์ฃผ์„ธ์š”. ํ”„๋ก ํŠธ๋Š” ๋””์ž์ธ๊ณผ ๋˜‘๊ฐ™์ด ๋งŒ๋“œ๋Š” ๋Šฅ๋ ฅ์ด ๋งค์šฐ ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. ์•„๋ž˜๊ณผ ๊ฐ™์€ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“œ์‹œ๊ณ , ์ตœ์†Œ 5๊ฐœ ์ด์ƒ ์ปดํฌ๋„ŒํŠธ๋ฅผ main.jsx์— ๋„์›Œ๋ณด์„ธ์š”!!

  • ์ œํ•œ ์กฐ๊ฑด
  1. styled-component ๋ฅผ ์ด์šฉํ•ฉ๋‹ˆ๋‹ค.
  2. ์‚ฌ์ง„์˜ 1๋ฒˆ์€ url์„ props ๋กœ ์ž…๋ ฅ๋ฐ›์Šต๋‹ˆ๋‹ค.
  3. ์‚ฌ์ง„์˜ 2๋ฒˆ์€ ๋ฏธ๋””์–ด์นด๋“œ์˜ ์ œ๋ชฉ์ž…๋‹ˆ๋‹ค. props๋ฅผ ํ†ตํ•ด ์ž…๋ ฅ๋ฐ›์Šต๋‹ˆ๋‹ค.
  4. ์‚ฌ์ง„์˜ 3๋ฒˆ์€ ๋ฏธ๋””์–ด ์นด๋“œ์˜ ๋‚ด์šฉ์ž…๋‹ˆ๋‹ค. props๋ฅผ ํ†ตํ•ด ์ž…๋ ฅ๋ฐ›์Šต๋‹ˆ๋‹ค.
  5. ์‚ฌ์ง„์˜ 4๋ฒˆ์€ ๋ฏธ๋””์–ด ์นด๋“œ์˜ ๋ฒ„ํŠผ์˜ ์ƒ‰ ์ž…๋‹ˆ๋‹ค. props๋ฅผ ํ†ตํ•ด ์ž…๋ ฅ๋ฐ›์Šต๋‹ˆ๋‹ค.
  6. ์„œ๋กœ ๋‹ค๋ฅธ props๋ฅผ ์ž…๋ ฅ๋ฐ›์€ ๋ฏธ๋””์–ด ์นด๋“œ๋ฅผ ์ตœ์†Œ 5๊ฐœ ์ด์ƒ ๋งŒ๋“ญ๋‹ˆ๋‹ค.

image

About

React_stlyedcomonent_props

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 50.3%
  • JavaScript 49.7%