์์ฑ
ยท
434
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๋ฅผ ์ฌ์ฉํ์๋๊ฑด์ง, ๋ช ํํ๊ฒ ๊ตฌ๋ณ์ด ์ ์์ง ์์ต๋๋ค. ๐ฅฒ
๋ต๋ณ 2
1
์๋ ํ์ธ์. ๊ฐ์ฌ๋~
๋ต๋ณ์ฃผ์ ์ ๋๋ฌด๊ฐ์ฌํฉ๋๋ค.
ํ๊ฐ์ง ๋ ๋ถํ๋๋ฆฌ๊ณ ์ถ์๊ฒ์ด ์๋๋ฐ์.
์ ๊ฐ ์น์ฌ์ดํธ๋ฅผ ์ธ์ฃผ๋ฅผ ๋ฐ์์ ์งํ์ ํด๋ณด๋ ค๊ณ ํ๋๋ฐ,
ํน์ ์ ์ฒด ๊ตฌ์กฐ๋ ๋ฐฉํฅ์ ๋ํด์ ์ปจ์คํ ์ ํด์ฃผ์ค ์์๋์?
๋ฐ๋ก ์๋ฌธ๋ฃ๋ฅผ ๋๋ฆฌ๊ณ ๋ฌธ์๋๋ฆฌ๊ณ ์ถ์๋ฐ์. ๊ฐ๋ฅํ์ง ๋ฉ์ผ๋ก ์ฐ๋ฝ์ฃผ์๋ฉด ๊ฐ์ฌํ๊ฒ ์ต๋๋ค. sunghojang.dev@gmail.com ์ผ๋ก ์ฐ๋ฝ๋ถํ๋๋ฆฌ๊ฒ ์ต๋๋ค.
๋งค๋ฒ ์์ ์ ๋ค์๋๋ง๋ค ํฐ ๊ฐ๋ฅด์นจ์ ์ป๊ณ ์์ต๋๋ค. ๐
1
์๋
ํ์ธ์ ์ฅ์ฑํธ๋ !!! ๋ฆ์ ๋ต๋ณ ์ฃ์กํฉ๋๋ค ใ
!!
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๊ฐ์ด์์ ์ปดํฌ๋ํธ์์ ์ฌ์ฉํ๋ค๋ฉด ๋ฆฌ๋์ค์ ๋ฃ์ด์ ์ฌ์ฉํ๋ คํ๊ณ ์์ต๋๋ค !!!
์๊ณ ํ์ธ์ ^^