๐์ปดํฌ๋ํธ์์ store์ ์๋ state ์ฐ๋ ๋ฐฉ๋ฒ1\. function ํจ์๋ช ๋ง๋ค๊ธฐ2\. export default connect(ํจ์๋ช )()์ถ๊ฐ3\. store ๋ฐ์ดํฐ๋ฅผ props๋ก ๋ฑ๋กํ๊ธฐ
๐ฑredux ์ฐ๋ ์ด์ ๋ชจ๋ ์ปดํฌ๋ํธ๊ฐ props์์ด state ์ง์ ์ฌ์ฉ ๊ฐ๋ฅstate ์๋ฌ ์ถ์ ์ฉ์ดํจ (state๋ฐ์ดํฐ์ ์์ ๋ฐฉ๋ฒ: reducer) ๋ฐ์ดํฐ ์์ ํ๊ธฐ 1) reducer๋ก ์์ ํ๋ ๋ฐฉ๋ฒ ๋ง๋ค๊ธฐ 2) dispatch()๋ก ์์ ํ๊ธฐ=> s
๐1. ๋ธ๋ก ์์(Block Level)DIV, H1, P์ฌ์ฉ ๊ฐ๋ฅํ ์ต๋ ๊ฐ๋ก ๋๋น ์ฌ์ฉํฌ๊ธฐ ์ง์ ๊ฐ๋ฅํ ์ค์ ํ๋์ฉ๋ง ๋ค์ด๊ฐ ์ ์์width: 100%; height: 0;๋ก ์์์์ง์ผ๋ก ์์margin, padding ์, ์๋, ์ข, ์ฐ ์ฌ์ฉ ๊ฐ๋ฅ๋ ์ด์์ ์ก
0108 TIL ๐React.memo()์ปดํฌ๋ํธ์ ์๋ props๋ state๊ฐ ๋ณ๊ฒฝ๋๋ฉด, ๊ทธ๊ฑธ ์ฐ๋ HTML์ ์ ๋ถ ์ฌ๋ ๋๋ง๋จmemo()๋ฅผ ์ฌ์ฉํ๋ฉด ๋ถํ์ํ ์ฌ๋ ๋๋ง ๋ง๊ธฐ ๊ฐ๋ฅ!1) import {memo} from 'react'2) memo()๋ก ์ปดํฌ๋ํธ ๊ฐ์ธ๊ธฐ
"ํ๋ก๊ทธ๋๋จธ = problem solver"์ต๋ํ ๋ง์ ํ๋ก๊ทธ๋๋ฐ ๊ต์ก ์๋ฃ ์ ํด๋ผ(์น ๊ฐ๋ฐ์ด๋ , ๊ฒ์ ๊ฐ๋ฐ์ด๋ ๋ญ๋ ๊ด์ฐฎ์)์์ ํ๋ก์ ํธ๋ฅผ ์์ํด๋ผ(๊ฐ์๋ง ๋ฃ๋ค๋ณด๋ฉด, ์ง๋ฃจํด์ง ์๋ ์๊ณ ์ค๋ ฅ์ ์๊ธด ์ด๋ ค์ธ ๊ฒ. ์ด๋ ค์๋ ์ผ๋จ ํด๋ณด๊ธฐ)์ด๋ค ๊ฐ์๋ ์ง ํ๋๋ฅผ ๋ฃ๊ธฐ ์์ํ๋ฉด
๐ช์๋ฒ๋ ์ฟ ํค๋ฅผ ์ฌ์ฉํด ๋ธ๋ผ์ฐ์ ์ ๋ฐ์ดํฐ๋ฅผ ๋ฃ์ ์ ์๋ค!์ฌ์ดํธ์ ๋ฐฉ๋ฌธํ๋ฉด ๋ธ๋ผ์ฐ์ ๋ ์๋ฒ์ ์์ฒญ์ ๋ณด๋.์๋ฒ๋ ์์ฒญ์ ์๋ต -> ๊ทธ ์๋ต์๋ ๋ชจ๋ ๋ฐ์ดํฐ + ๋ด๊ฐ ์ฐพ๋ ํ์ด์ง ์ ๋ณด + ๋ธ๋ผ์ฐ์ ์ ์ ์ฅํ๋ ค๋ ๐ช ํฌํจ๋จ์ผ๋จ ๋ธ๋ผ์ฐ์ ์ ์ฟ ํค๊ฐ ์ ์ฅ๋๋ฉด, ์ดํ ํด๋น ์น์ฌ
๊ฐ๋จํ ๋ณ์ ํ์ ์ง์ ๊ฐ๋ฅlet ์ด๋ฆ: string | number = 'kim';array์๋ฃ ํ์ ์ง์ ๊ฐ๋ฅ์ซ์, ๋ฌธ์ ๋์์ ๋ฃ๊ณ ์ถ์ ๋? union type ์ฐ๊ธฐ๋ณ์ ํ๋์ ์ฌ๋ฌ ์๋ฃ ์ง์ด๋ฃ๊ณ ์ถ์ ๋?object ์๋ฃํ ์ฐ๊ธฐํจ์๋ ํ๋ผ๋ฏธํฐ, return๊ฐ
immutability: ๋ฐ์ดํฐ์ ์๋ณธ์ด ํผ์๋๋ ๊ฒ์ ๋ง๋ ๊ฒ CRUD (์ค์๋์ ์ฐ์ ์์ ์กด์ฌํจ) ๐ create, read ๊ฐ์ฅ ์ค์ push์ concat์ ์ฐจ์ด => push๋ ์๋ณธ์ ๋ฐ๊ฟ=> concat์ ์๋ณธ์ ๋ณต์ ํ๊ณ , ๊ฑฐ๊ธฐ์ ์ธ์๋ก ๋ค์ด์จ ๊ฐ์
redux โ ํ๋์ ์ํ๋ฅผ ๋ง๋๋ ์ญํ โ state๋ฅผ ๊ฐ๊ณตํ๋ ์ญํ ๐ฑstore.subscribe(render);=> state๊ฐ์ด ๋ฐ๋ ๋๋ง๋ค render ํจ์๊ฐ ํธ์ถ๋๋ฉด์ UI๊ฐ ์๋กญ๊ฒ ๊ฐฑ์ ๋จ๐ฑdispatch์ ์ญํ reducer๋ฅผ ํธ์ถํด์ state๊ฐ ๋ณ๊ฒฝํจ\*
TypeScriptconst๋ณ์: ๋ฑํธ๋ก ์ฌํ ๋น๋ง ๋ง๋ ์ญํ const๋ก ๋ด์ object ์์ ์ ์์ ๋กญ๊ฒ ๊ฐ๋ฅreadonlyobject ์๋ฃ ์์ ๋ง์ ์ ์์ (ํ๋ฒ ๋ถ์ฌ๋ ํ ์์ผ๋ก ๋ฐ๋๋ฉด ์ ๋ ์์ฑ์ ์ ์ฉ!)object extend: &์ฐ์ฐ์๋ก objectํ์
โ typeof ์ฐ์ฐ์: ๋ํ์ ์ธ Narrowing ๋ฐฉ๋ฒโ ํ๋ฒ ์ ์๋ type ๋ณ์๋ ์ฌ์ ์ ๋ถ๊ฐ๋ฅNarrowing์ผ๋ก ํ์ ๋๋ ๋ฌธ๋ฒtypeof ๋ณ์์์ฑ๋ช in ์ค๋ธ์ ํธ ์๋ฃ์ธ์คํด์ค instanceof ๋ถ๋ชจ assertion๋ฌธ๋ฒ์ ์ฉ๋Narrowingํ ๋ ๋ฌด์จ ํ์
โ ๋ณ์์ Hoisting ํ์๋ณ์์ ์ ์ธ์ ๋ณ์ ๋ฒ์ ๋งจ ์๋ก ๋๊ณ ์ค๋ ํ์(ํจ์ ์ ์ธ๋ Hoisting ๋ฐ์ํจ)๋ณ์๋ฅผ ๋ง๋๋ฉด ์ ์ธ ๋ถ๋ถ์ ๊ฐ์ ๋ก ๋งจ ์๋ก ๋์ด์ฌ๋ฆผโ ๋ณ์ ๋์์ ์ฌ๋ฌ ๊ฐ ๋ง๋๋ ๋ฐฉ๋ฒlet ๋์ด = 20, ์ด๋ฆ = 'kim', ์ฑ๋ณ = f;โ spre
โ ํจ์์ argument๋ชจ๋ ํ๋ผ๋ฏธํฐ๋ฅผ ํ๊บผ๋ฒ์ ๋ชจ์์ ๋ค๋ฃจ๊ณ ์ถ์ ๋ ์ฌ์ฉarguments: ๋ชจ๋ ํ๋ผ๋ฏธํฐ๋ฅผ ์ ๋ด์rest parameter: ํด๋น ์๋ฆฌ์ ์ค๋ ๋ชจ๋ ํ๋ผ๋ฏธํฐ๋ฅผ ์ ๋ด์โ ...spread operatorrest parameterโ rest