๊ฐ•์˜

๋ฉ˜ํ† ๋ง

์ปค๋ฎค๋‹ˆํ‹ฐ

Inflearn ใ‚ณใƒŸใƒฅใƒ‹ใƒ†ใ‚ฃ Q&A

sunghojangdev8677 ใฎใƒ—ใƒญใƒ•ใ‚ฃใƒผใƒซ็”ปๅƒ
sunghojangdev8677

ๆŠ•็จฟใ—ใŸ่ณชๅ•ๆ•ฐ

็œŸไผผใ—ใฆๅญฆใถNodeใ€Reactใ‚ทใƒชใƒผใ‚บ - ใ‚ทใƒงใƒƒใƒ”ใƒณใ‚ฐใƒขใƒผใƒซใ‚ตใ‚คใƒˆไฝœใ‚Š[ๅ…จ้ขใƒชใƒ‹ใƒฅใƒผใ‚ขใƒซ]

๐Ÿ˜ onChange์— ์—ฐ๊ฒฐ๋˜๋Š” ํ•จ์ˆ˜ + ๊ทธ์™ธ(2)

ไฝœๆˆ

ยท

464

2

์•ˆ๋…•ํ•˜์„ธ์š”. ๊ฐ•์‚ฌ๋‹˜!

์ˆ˜์—… ๋„ˆ๋ฌด ๋„ˆ๋ฌด ๋„ˆ๋ฌด ๐Ÿ‘  ์ž˜ ๋“ฃ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

๋™์˜์ƒ ๋ณด๋‹ค๊ฐ€ ๊ถ๊ธˆํ•œ ์  ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋‚จ๊ฒจ๋ด…๋‹ˆ๋‹ค.

1. onChange์— ์—ฐ๊ฒฐ๋˜๋Š” ํ•จ์ˆ˜

onChange={()=>handleToggle(value._id)} ์ด๋ถ€๋ถ„์—์„œ

onChange={handleToggle(value.id)}๋กœ ๋ฐ”๋กœ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜์ง€ ์•Š๊ณ  ํ™”์‚ดํ‘œ ํ•จ์ˆ˜๋ฅผ ๊ฑฐ์ณ์„œ ํ˜ธ์ถœํ•˜๋‚˜์š”?

2. map ํ•จ์ˆ˜์—์„œ ์†Œ๊ด„ํ˜ธ , ์ค‘๊ด„ํ˜ธ ์‚ฌ์šฉ

list.map((v,i) => (---์ด๋ถ€๋ถ„----) )

์œ„์— ----์ด๋ถ€๋ถ„----์— ๋“ค์–ด๊ฐ€๋Š” ๋ถ€๋ถ„์„ ์†Œ๊ด„ํ˜ธ ๋˜๋Š” ์ค‘๊ด„ํ˜ธ๋กœ๊ฐ์‹ธ์•ผ ๋˜๋Š” ๊ทœ์น™์ด ์žˆ๋‚˜์š”?  

3.  props์™€ state vs ๋ฆฌ๋•์Šค store

๊ฐ•์‚ฌ๋‹˜๊ป˜์„œ ๋กœ๊ทธ์ธ, ํšŒ์›๊ฐ€์ž… ๋ถ€๋ถ„์—์„œ๋Š” ๋ฆฌ๋•์Šค ์Šคํ† ์–ด๋ฅผ ์‚ฌ์šฉํ•˜์‹œ๊ณ  ๊ทธ ์ดํ›„ ์ž‘์—…์—์„œ๋Š” props์™€ state๋กœ ์ž‘์—…์„ ํ•˜์‹œ๋Š”๋ฐ,  ๊ฐ ์ €์žฅ๊ธฐ๋Šฅ์„ ์–ด๋–ค ์ƒํ™ฉ์œผ๋กœ  ๊ตฌ๋ณ„ํ•ด์„œ ์ ์šฉํ•ด์•ผ ํ•˜๋‚˜์š”?

๋ฆฌ๋•์Šค ์Šคํ† ์–ด๋กœ ๋‹ค ๊ฐ€๋Šฅํ•œ๋ฐ, ๊ฐ•์‚ฌ๋‹˜๊ป˜์„œ ์„ ๋ณ„ํ•ด์„œ props๋ฅผ ์‚ฌ์šฉํ•˜์‹œ๋Š”๊ฑด์ง€, ๋ช…ํ™•ํ•˜๊ฒŒ ๊ตฌ๋ณ„์ด ์ž˜ ์„œ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๐Ÿฅฒ

onchangemongodbredux์›น์•ฑreactnodejs

ๅ›ž็ญ” 2

1

sunghojangdev8677๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
sunghojangdev8677
่ณชๅ•่€…

์•ˆ๋…•ํ•˜์„ธ์š”. ๊ฐ•์‚ฌ๋‹˜~

๋‹ต๋ณ€์ฃผ์…”์„œ ๋„ˆ๋ฌด๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

ํ•œ๊ฐ€์ง€ ๋” ๋ถ€ํƒ๋“œ๋ฆฌ๊ณ  ์‹ถ์€๊ฒƒ์ด ์žˆ๋Š”๋ฐ์š”.

์ œ๊ฐ€ ์›น์‚ฌ์ดํŠธ๋ฅผ ์™ธ์ฃผ๋ฅผ ๋ฐ›์•„์„œ ์ง„ํ–‰์„ ํ•ด๋ณด๋ ค๊ณ  ํ•˜๋Š”๋ฐ,

ํ˜น์‹œ ์ „์ฒด ๊ตฌ์กฐ๋‚˜ ๋ฐฉํ–ฅ์— ๋Œ€ํ•ด์„œ ์ปจ์„คํŒ…์„ ํ•ด์ฃผ์‹ค ์ˆ˜์žˆ๋‚˜์š”? 

๋”ฐ๋กœ ์ž๋ฌธ๋ฃŒ๋ฅผ ๋“œ๋ฆฌ๊ณ  ๋ฌธ์˜๋“œ๋ฆฌ๊ณ  ์‹ถ์€๋ฐ์š”.  ๊ฐ€๋Šฅํ•œ์ง€ ๋ฉ”์ผ๋กœ ์—ฐ๋ฝ์ฃผ์‹œ๋ฉด ๊ฐ์‚ฌํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. sunghojang.dev@gmail.com  ์œผ๋กœ ์—ฐ๋ฝ๋ถ€ํƒ๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค.  

๋งค๋ฒˆ ์ˆ˜์—…์„ ๋“ค์„๋•Œ๋งˆ๋‹ค ํฐ ๊ฐ€๋ฅด์นจ์„ ์–ป๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๐Ÿ˜€

1

John Ahn๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
John Ahn
ใ‚คใƒณใ‚นใƒˆใƒฉใ‚ฏใ‚ฟใƒผ

์•ˆ๋…•ํ•˜์„ธ์š” ์žฅ์„ฑํ˜ธ๋‹˜ !!! ๋Šฆ์€ ๋‹ต๋ณ€ ์ฃ„์†กํ•ฉ๋‹ˆ๋‹ค ใ…  !! 

1๋ฒˆ ๊ฐ™์€ ๊ฒฝ์šฐ๋Š”์š” 

https://stackoverflow.com/questions/62930655/whats-the-difference-between-onclick-function-and-onclick-functi

์—ฌ๊ธฐ์— ๋ณด๋‹ˆ๊น ์ž˜ ์„ค๋ช…๋˜์–ด์žˆ๋„ค์š” !  ํ•ด์„ํ•ด๋ณด๋ฉด 

<button onClick={()=>props.submitHandler(searchInputValue)}>Submit</button>

์ฒซ ๋ฒˆ์งธ๋Š” ์ธ์ˆ˜์™€ ํ•จ๊ป˜ submitHandler๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ํ•จ์ˆ˜๋ฅผ ๋งŒ๋“ค๊ณ  ํ•ด๋‹น ํ•จ์ˆ˜๋ฅผ onClick์— ํ• ๋‹นํ•ฉ๋‹ˆ๋‹ค.

<button onClick={props.submitHandler(searchInputValue)}>Submit</button>

๋‘ ๋ฒˆ์งธ๋Š” ์ฆ‰์‹œ (์ฆ‰, ๋ Œ๋”๋ง ๋‹จ๊ณ„ ๋™์•ˆ) ์ธ์ˆ˜์™€ ํ•จ๊ป˜ submitHandler๋ฅผ ํ˜ธ์ถœํ•˜๊ณ  ๋ฐ˜ํ™˜ ๊ฐ’์„ onClick์— ํ• ๋‹นํ•ฉ๋‹ˆ๋‹ค.

2๋ฒˆ์€  ์†Œ๊ด„ํ˜ธ๋กœ ํ•ด์ฃผ์‹œ๋ฉด ๋ Œ๋”๋งํ•˜๋Š” ๋ถ€๋ถ„๋งŒ์„ ๋„ฃ์–ด์ฃผ์…”์•ผํ•ฉ๋‹ˆ๋‹ค ๊ทธ๋ฆฌ๊ณ  ์ค‘๊ด„ํ˜ธ๋ฅผ ํ•ด์ฃผ์‹œ๋ฉด ๋ Œ๋”๋งํ•˜๋Š” ๋ถ€๋ถ„ ๋ง๊ณ ๋„ ๋ณ€์ˆ˜๋ฅผ ์ •์˜ํ•˜๋“ ์ง€ ๋‹ค๋ฅธ ๋ถ€๋ถ„๋„ ๋„ฃ์–ด์ค„์ˆ˜ ์žˆ์ง€๋งŒ ๋ Œ๋”๋งํ•˜๋Š” ๋ถ€๋ถ„์€ return ๊ฐ’์œผ๋กœ ๋„ฃ์–ด์ฃผ์…”์•ผ ํ•ฉ๋‹ˆ๋‹ค ! 

3๋ฒˆ์€ ๊ฐœ์ธ์ ์œผ๋กœ๋Š” ๋ฆฌ๋•์Šค๋ฅผ ์ตœ๋Œ€ํ•œ ์‚ฌ์šฉํ•˜์ง€ ์•Š์œผ๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค ใ…Žใ…Žใ…Ž  ์•„๋ฌด๋ž˜๋„ ์†๋„์ธก๋ฉด์—์„œ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š”๊ฒŒ ๋” ๋น ๋ฅด๊ธฐ ๋–„๋ฌธ์ž…๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ ๋Š” ํ•˜๋‚˜์˜ ๋ฐ์ดํ„ฐ๋ฅผ ์—ฌ๋Ÿฌ ์ปดํฌ๋„ŒํŠธ์—์„œ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ์— ์ฃผ๋กœ ๋ฆฌ๋•์Šค์— ๋„ฃ์–ด๋†“์Šต๋‹ˆ๋‹ค.    ์œ ์ € ์ •๋ณด๊ฐ™์€ ๊ฒฝ์šฐ๋„ ๋งŽ์€ ์ปดํฌ๋„ŒํŠธ์—์„œ ์‚ฌ์šฉํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋ฆฌ๋•์Šค์— ๋„ฃ์–ด์ฃผ์—ˆ์Šต๋‹ˆ๋‹ค !!!        ์ œ ๊ฐœ์ธ์ ์œผ๋กœ๋Š” ํ•œ 3๊ฐœ์ด์ƒ์˜ ์ปดํฌ๋„ŒํŠธ์—์„œ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด ๋ฆฌ๋•์Šค์— ๋„ฃ์–ด์„œ ์‚ฌ์šฉํ•˜๋ คํ•˜๊ณ ์žˆ์Šต๋‹ˆ๋‹ค !!! 
์ˆ˜๊ณ ํ•˜์„ธ์š” ^^ 

sunghojangdev8677 ใฎใƒ—ใƒญใƒ•ใ‚ฃใƒผใƒซ็”ปๅƒ
sunghojangdev8677

ๆŠ•็จฟใ—ใŸ่ณชๅ•ๆ•ฐ

่ณชๅ•ใ™ใ‚‹