[React ็ฌฌ2้จ] ้ซๅบฆใชใใใใฏใจใใใฏ
ใคใใซใชใขใฏใ๏ผReact๏ผใๆฌๅฝใซใ่ฆใใๅงใใพใใ้ซๅบฆใชๆฆๅฟตใจใใใฏ๏ผHooks๏ผใใใฉใใใใๅใใใใใๆญฃ็ขบใซๅญฆใใงใฟใพใใใใ
ๅ่ฌ็ 783ๅ
้ฃๆๅบฆ ไธญ็ดไปฅไธ
ๅ่ฌๆ้ ็กๅถ้

- ๆช่งฃๆฑบ
์๋ชป๋ useEffect ์ฌ์ฉ?
useEffect๋ฅผ ํตํด setErros๋ฅผ ํธ์ถํด์ errors ์ํ๋ฅผ ๋ณ๊ฒฝํ๊ณ ์์ต๋๋ค. ์ํ๋ฅผ ๋ณ๊ฒฝํ๋ ๊ฑด ๋ถ์ํจ๊ณผ๊ฐ ์๋๋๊น useEffect์์
javascriptreact์น์ฑReact-Contextreact-hooksdevmingyo9794
ใป
20ๆฅๅ
1
49
2
- ๆช่งฃๆฑบ
useEffect ์์กด์ฑ ์ง๋ฌธ
๋ถ์ ํจ๊ณผ๋ก popstate event listener๋ฅผ ๋ฑ๋กํ๋ ๋ถ๋ถ์์useEffect์ ์์กด์ฑ ๋ฐฐ์ด์ path๊ฐ์ ๋ฃ์ด์ฃผ์ จ๋๋ฐ, ์ ๋ฃ๋๊ฒ ๋ง๋ ๊ฑฐ ์๋๊ฐ์
javascriptreact์น์ฑReact-Contextreact-hooksdevmingyo9794
ใป
21ๆฅๅ
1
45
2
- ๆช่งฃๆฑบ
orderableProductItem ์ ๊ดํ์ฌ...
๊ฐ์ฌ๋ ์๋ ํ์ธ์ ๊ฐ์ ์ ๋ฃ๊ณ ์์ต๋๋ค.์ข์ ๊ฐ์ ๊ฐ์ฌํฉ๋๋ค.์ง๋ฌธ์ด ํ๋ ์์ต๋๋ค.<p styl
javascriptreact์น์ฑReact-Contextreact-hooksdevmingyo9794
ใป
1ใถๆๅ
0
42
2
- ๆช่งฃๆฑบ
๊ฐ์ ์๋ฃ, ๋ธ๋ก๊ทธ, ๊น ์ฃผ์
1๋ถ ์์ ์์๋ ๋ฐ๋ก ๋จ๊ฒจ์ฃผ์ จ๋ ๊ฒ ๊ฐ์๋ฐ, 2๋ถ ์์ ์๋ ๋ฐ๋ก ์๋์?
javascriptreact์น์ฑReact-Contextreact-hooksdevmingyo9794
ใป
1ใถๆๅ
0
51
1
- ๆช่งฃๆฑบ
React ํ ๊ตฌํ ์๋ฆฌ์ ์ค๋ฌด ํจํด ๊ด๋ จ ์ง๋ฌธ (useState, useEffect ์์ ๋ฐ ํธ๋ค๋ฌ ๊ตฌ์กฐ)
์๋ ํ์ธ์, ๊ฐ์์์ ํ (useState, useEffect) ์ฌ์ฉ ๊ท์น๊ณผ ๋ด๋ถ ๋์ ์๋ฆฌ๋ฅผ ๊ณต๋ถํ๋ค๊ฐ ๊ถ๊ธํ ์ ์ด ์์ด ์ง๋ฌธ๋๋ฆฝ๋๋ค.<p style="text-al
javascriptreact์น์ฑReact-Contextreact-hooks2projlee1369
ใป
4ใถๆๅ
1
93
2
- ๆช่งฃๆฑบ
pushState๋ก ์ฃผ์๋ฅผ ๋ฐ๊พธ๋ฉด ๋ ๋๋ง์ด ์ ๋๋ ์ด์ ๊ฐ ๊ถ๊ธํฉ๋๋ค.
pushState๋ก ๊ฒฝ๋ก๋ฅผ ๋ฐ๊ฟ ๋๋ ๋ ๋๋ง์ด ๋ค์ ์ผ์ด๋์ง ์๋๋ฐ,popstate ์ด๋ฒคํธ์์๋ ์ ๋ ๋๋ง์ด ํ์ํ ๊ฑด๊ฐ์
javascriptreact์น์ฑReact-Contextreact-hookstheblessedcity0963
ใป
5ใถๆๅ
1
75
2
- ๆช่งฃๆฑบ
FormControl ์ปดํฌ๋ํธ ์ฌ์ฉ์ htmlFor prop ๊ฐ ๋๊ธธ ๋ ์ค๊ดํธ ์ด์
์๋ ํ์ธ์, ๊ฐ์ ์ ๋ณด๊ณ ์์ต๋๋ค ๐FormControl ์ปดํฌ๋ํธ
reactReact-Contextreact-hooksreact-routerreact-componentmspark
ใป
1ๅนดๅ
1
119
1
- ๆช่งฃๆฑบ
dispatch ํจ์๋ ๋ฆฌ๋ ๋๋ง ์ ๋ฐํ์ง ์๋์?
์๋ ํ์ธ์ ์ ์๋ const nextState = formReducer(state, {type : "VALIDATE", validate })๋ก nextState๋ฅผ ์ ์ํ์ จ๋๋ฐ ์ ์ด์
reactReact-Contextreact-hooksreact-routerreact-componentrjgo84689920
ใป
1
197
2
- ่งฃๆฑบ
ProductItem์์ onClick = {onClick}์ ๋ฌ์ง ์์๋ ๋๋ ์ด์
์๋ ํ์ธ์ ๊ฐ์ฌ๋ ์์ ์ ๋ฃ๊ณ ์์ต๋๋ค. OrderableProductItem.jsx์์ ์ปจํ ์คํธ์ ์ปจ์๋จธ ์์ ๋ ๋ ํ๋กญ์ children์ผ๋ก ๋ง๋ค๊ณ changePath๋ฅผ ์ด์ฉํด์ ์ฃผ๋ฌธํ๊ธฐ ๋ฒํผ์ ๋๋ฅด
reactReact-Contextreact-hooksreact-routerreact-componentrjgo84689920
ใป
1
153
2
- ่งฃๆฑบ
replaceState๋ฅผ ์ฐ์ง ์๋ ๋์
์๋ ํ์ธ์ ๊ฐ์ฌ๋ pushState๋ฅผ ์์ฑํ๊ณ popState๋ฅผ ์ฐ๋ ๋ถ๋ถ์ ์์ด์ ์๋ฌ๊ฐ ๋ฐ์ํ๋๋ฐ ์ด๋ replaceState๋ฅผ ์์จ์ ์ด๊ธฐ ์ํ์ ๋ํ ์ ๋ณด๊ฐ ์์ด์ ๊ทธ๋ ๋ค๊ณ ์ดํดํ์ต๋๋ค.
reactReact-Contextreact-hooksreact-routerreact-componentrjgo84689920
ใป
1
188
2
- ่งฃๆฑบ
setValue ๋ฉ์๋๋ฅผ ๋ฐ์ธ๋ฉ ํด์ผ ํ๋ ์ด์
์๋ ํ์ธ์:) ์์ ์ ๋ฃ๊ณ ์์ต๋๋ค.2.1.4 ๊ณต๊ธ์์ ์๋น์ ๊ฐ์ ไธญ 7:04์์ this.setValue = this.setValue.bind(this)๋ฅผ ์์ฑํ์ จ๋๋ฐ ๋ฆฌ์กํธ์์์ ๋ฐ์ธ๋ฉ์ด๋ ์์ ์ปด
reactReact-Contextreact-hooksreact-routerreact-componentrjgo84689920
ใป
1
160
2
- ่งฃๆฑบ
3.1.3 14:00 ์ ๋๋ถํฐ ์์์ด ์กฐ๊ธ ์ด์ํฉ๋๋ค...!!
์ ๋ชฉ๊ทธ๋๋ก์ ๋๋ค...!!๊ต์๋ด์ฉ์ ํ ๋๋ก ์ดํด๋ฅผํด๋ ๋ ๊ฒ๊ฐ์ง๋ง, ์ ํ์ฐจ์์์ ๊ธ ๋จ๊น๋๋ค
jaysss
ใป
1
144
2
- ่งฃๆฑบ
MyReact๋ฅผ IIFE(์ฆ์์คํํจ์)๋ก ์ค๊ณํ์ ์ด์
์ ๋ชฉ๊ทธ๋๋ก, MyReact๋ฅผ IIFE(์ฆ์์คํํจ์)๋ก ์ค๊ณํ์ ์ด์ ๊ฐ ๋ฌด์์ผ๊น์???์ด๊ฑธ ๋์ด๋ค ์ฐ๋ ๊ณณ์์MyReact.creacteContext()</pre
reactReact-Contextreact-hooksreact-routerreact-componentjaysss
ใป
0
199
2
- ่งฃๆฑบ
[4.4์ฅ ๋ฉ๋ชจ์ด์ ์ด์ ํ ] 4.4.3 memo ์ฐธ์กฐ ๋น๊ต
์๋ ํ์ธ์. ๊ฐ์ฌ๋! ํ์ต ์ค์ ๊ถ๊ธํ ์ ์ด ์๊ฒผ๋๋ฐ, ์ ๊ฐ ์ดํดํ๊ณ ์๋ ๋ด์ฉ์ด ๋ง๋์ง ๊ถ๊ธํด ์ง๋ฌธ ๋๋ฆฝ๋๋ค!const obj1 = { a: 1 }; const obj2 = { a: 1 }; const obj3 = o
reactReact-Contextreact-hooksreact-routerreact-componentgojimin30955383
ใป
0
124
1
- ๆช่งฃๆฑบ
useRef ๊ด๋ จํ์ฌ ์ง๋ฌธ๋๋ฆฝ๋๋ค
MyReact.useRef๊ด๋ จํ์ฌ ์ง๋ฌธ๋๋ฆฝ๋๋คconst ref2 = MyReact.useRef(); ์ด๋ ๊ฒ ์ฌ์ฉํ๋ฉดinputํ๊ทธ์ ์ ๊ทผํ ์ ์๋๋ฐ ์ ํํ ์ด๋ค ์๋ฆฌ๋ก ์ ๊ทผ ๊ฐ๋ฅํ๊ฑด๊ฐ์??
reactReact-Contextreact-hooksreact-routerreact-componentccccssung8355
ใป
0
147
2
- ๆช่งฃๆฑบ
๋ ๋ ํ๋กญ ๊ด๋ จํ์ฌ ์ง๋ฌธ๋๋ฆฝ๋๋ค
์ปจํ ์ค๋ฅด๋ฅผ ์ค๊ณํ์ค ๋<img src="https://cdn.inflearn.com/public/files/posts/97f5d11d-2c6d-4703-b770-37d62dbbecfc/a42da862-8728-41e1-8073-7e87b3143861.PNG
reactReact-Contextreact-hooksreact-routerreact-componentccccssung8355
ใป
0
178
2
- ๆช่งฃๆฑบ
[1.2์ฅ ์ํ๋ชฉ๋ก ํ๋ฉด] 1.2.3 Button ...rest ๊ด๋ จ ์ง๋ฌธ ๋๋ฆฝ๋๋ค.
์๋ ํ์ธ์. ์๋ ์ง๋ฌธ์ ๋ํ ๋ต๊ธ์ ๋ณด๊ณ โฆrest์ ๋ํด ์ดํด๋ฅผ ํ๋๋ฐ์.<a target="_blank" rel="noopener noreferrer nofollow" href="https://www.inflea
reactReact-Contextreact-hooksreact-routerreact-componenthjw120886379
ใป
1
392
2
- ๆช่งฃๆฑบ
[4.4์ฅ ๋ฉ๋ชจ์ด์ ์ด์ ํ ] 4.4.4 useCallback curried function์ ๊ดํ ์ง๋ฌธ์ ๋๋ค.
์๋ ํ์ธ์ ์ ์๋ ์ง๋ฌธ์ด 2๊ฐ ์์ต๋๋ค. const handleClick1 = MyReact.useMemo((postId) => { console.log("handleClick", postId);
reactReact-Contextreact-hooksreact-routerreact-componentdohyunlim
ใป
1
309
2
- ่งฃๆฑบ
[4.4์ฅ ๋ฉ๋ชจ์ด์ ์ด์ ํ ] 4.4.2 useMemo ์์ every ํจ์์ ๊ดํ ์ง๋ฌธ์ ๋๋ค.
์๋ ํ์ธ์ ์ ์๋ every ๋ฐฐ์ด์ ๋น๊ตํ๋ ๋ฐฉ๋ฒ์ด ๊ถ๊ธํด์ ๋ก๊ทธ๋ฅผ ์ฐ์ด๋ณด์์ต๋๋ค.// export default App; import MyReact from "./lib/MyReact"; import React from "react";
reactReact-Contextreact-hooksreact-routerreact-componentdohyunlim
ใป
1
347
2
- ๆช่งฃๆฑบ
[4.3์ฅ ๋ฆฌ๋์ ํ ] 4.3.7 ํ์ฉ MyForm(ํ์ด) ์คํ ์ ๋ณด ๋ฐ ์ง๋ฌธ์ด ์์ต๋๋ค.
์๋ ํ์ธ์ ์ ์๋ ์ฝ๋์ ์คํ๊ฐ ์์ต๋๋ค.const formReducer = (state, action) => { if (action.type === "SET_VALUES") { console.log("SET_VALUES
reactReact-Contextreact-hooksreact-routerreact-componentdohyunlim
ใป
1
272
2

