๋ฐ๋ผํ๋ฉฐ ๋ฐฐ์ฐ๋ ๋ ธ๋, ๋ฆฌ์กํธ ์๋ฆฌ์ฆ - ์ผํ๋ชฐ ์ฌ์ดํธ ๋ง๋ค๊ธฐ[์ ์ฒด ๋ฆฌ๋ด์ผ]
๐ onChange์ ์ฐ๊ฒฐ๋๋ ํจ์ + ๊ทธ์ธ(2)
471
์์ฑํ ์ง๋ฌธ์ 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๊ฐ์ด์์ ์ปดํฌ๋ํธ์์ ์ฌ์ฉํ๋ค๋ฉด ๋ฆฌ๋์ค์ ๋ฃ์ด์ ์ฌ์ฉํ๋ คํ๊ณ ์์ต๋๋ค !!!
์๊ณ ํ์ธ์ ^^
๊ฐ์ ๋ด์ฉ์ ํ๋ฅญํ๋, ํ๊ฒฝ ์ค์ ์ค๋ฅ ๋๋ฌธ์ ์ง๋๋ฅผ ๋๊ฐ ์ ์์ต๋๋ค. 20๋ ๋ฒ์ ๊ฐ์.
0
60
1
๊ฐ์์๋ฃ๋ ์ด๋์ ๋ณผ ์์๋์??
0
66
1
์ด ์ผํ๋ชฐ ๋ง๋ค๊ธฐ ๊ฐ์๋ ๊ด๋ฆฌ์ํ์ด์ง ๋ง๋๋๊ฑด ์๋์
0
113
2
์น์์ ์ค์๊ฐ ์ฝ๋๋ฐ์์ด ์๋ผ์
0
120
1
app.use์ง๋ฌธ
0
64
1
๊ฐ์ฌ๋๊ป ์ด๋ป๊ฒ ์ง์ ์ง๋ฌธํ ์์์ด์??
0
74
1
constํจ์๊ฐ์๊ฑฐ ๊ธฐ์ด๊ฐ์๋ ์ด๋์๋์
0
80
2
๋ฆฌ๋์ค ์ฐธ์กฐ์ฑํฐ๊ฐ ์ด๋จ์ด์? ๋ฏธ๋ฆฌ๋ฃ๊ณ ์ค๋ผ๋๋ฐ์
0
81
2
๊ฐ์๊ฐ์์ ์ค๋๋์ ๋ค ํ๋ฆฌ๋ค app.jsx๋ tailwind css ๋คํ๋ฆผ ๋ฌด์ฑ ์ํจ
0
68
1
๊ฐ๋ฐ์๋๊ตฌ์ redux๋์ด ์์ด์
0
87
1
npx tailwindcss init -p ์์ ๊ณ์ ์๋ฌ๋์
0
92
1
์ผํ๋ชฐ๊ธฐ๋ฅ์ค ์ฐํ๊ธฐ ๊ธฐ๋ฅ์ ์ด๋ป๊ฒ ๊ตฌํํ๋์
0
138
2
๊ฐ์ํ๋ค ์ค์ผ๋ก ์ค๋ช ๊ฐ๋ฅํ์ง์ข ์ ํํ ์๋ ค์ฃผ์ธ์. ์ด ์ ์๋ ์ ์ฑ ์ด ์ด๋ป๊ฒ ๋๋๋ฐ์. ์ง์ ์ฐ๋ฝํ ๋ฉ์ผ์ด๋ผ๋ ์๋ ค์ฃผ์ธ์
0
42
1
๋ํ ๊ฐ์ ์๋ฃ ์ด๋ ๋ถ๊ฐ๋ฅ
0
109
1
tailwindcss๋ฅผ vite์์ ์ด์ฉํ๋ ๋ฐฉ์์ด ๋ฐ๋๊ฒ ๊ฐ์ต๋๋ค.
0
1128
2
eslint ์ค์ ํ ์ค๋ฅ๊ฐ ๋ฉ๋๋ค.
0
220
1
์ค๋ฒ๋ก๋ ์ค๋ฅ
0
149
1
VSCode์์ save๋ฅผ ํ ๋, landingpage์ useEffect๊ฐ ์คํ๋๋ ๋ฌธ์ ์ ๋ํ์ฌ
0
169
1
dispatch(logoutUser()) ์คํ์ dispatch(authuser())๋ ํจ๊ป ์คํ๋๋ ๋ฌธ์
0
228
2
logoutํ ๋, server๋ก ์์ฒญ์ ๋ณด๋ด์ authUser middleware๋ฅผ ํต๊ณผํ๋๋ก ํ๋ ์ด์ ?
0
195
1
webkit-text-size-adjust ์ค๋ฅ
0
312
1
does not provide an export named 'userReducer'
0
213
2
๋น๋ ๋ฐฐํฌ
0
138
1
์ญ์ ์์ ๊ฐ์๋ ์ธ์ ์ญ์ ๋๋์? ์ ๊ฒ๋๋ฌธ์ ์๊ฐ์๋ฃ๋ฅผ ๋ชปํ๋ฉด ํ์ฌ์์ ๋น์ฉ์ ์ฒญ๊ตฌํ๋ค๊ณ ํฉ๋๋ค~
0
217
2





