ํ๋ ์ ์๋ ํ๋ก ํธ์๋ ๋ถ ์คํฐ๋๋ฅผ ํ๋ค๊ฐ "ํ๋๊ทธ๋จผํธ"๋ผ๋ ๋จ์ด๋ฅผ ๋ณด๊ณ ๊ฝํ์ ํ์์ ์์ฃผ ์ฌ์ฉํ๋ React.Fragment๊ฐ ๋ค๋ฅธ div๋ ๋ฌด์จ ์ฐจ์ด์ธ์ง๊ฐ ๋๋ฌด ๊ถ๊ธํด์ก๋ค.
์ด๋ฒ์ ํฌํธํด๋ฆฌ์ค์ ํ์์ฑ์ ๋๊ปด github page๋ฅผ ํตํด ๋ฐฐํฌํ๋ ๋ฐฉ๋ฒ์ ์ฐพ์ ๋ณด๊ณ ์์นญํ๊ณ ์ฑ๊ณตํ ๋ด์ฉ์ ๋ด์ ๋ธ๋ก๊ทธ๋ค.!.!
์ด๋ฒ์ ์ ๋ฒ ์๋ฆฌ์ฆ์ ์ด์ด์ ํ๋ฆฌํจ์นญ ๋ํด ๊ณต๋ถํ ๋ด์ฉ์ ์ ๋ฆฌํด ๋ณด๊ณ ์ ํ๋ค!.!
์ต๊ทผ ์ฃผ๋์ด ๋ถํธ์บ ํ์์ ๋ง์ ๊ฐ๋ฐ์๋ถ๋ค์ ๋ง๋๋ฉฐ ๊ฐ์ฅ ๋ง์ด ์๊ธฐ ๋๋ด๋ ๋ถ๋ถ์ด > ์ด๋ค ๊ฐ๋ฐ์๊ฐ ๋๊ณ ์ถ๋์? ์ ๋ํ ๋ด์ฉ์ ๋ํ์๋ค.
์ฐ๋ฆฌ๊ฐ ํจํค์งjson ํ์ผ์ ๋ณด๋ฉด ์ด๊ฒ์ ๊ฒ ์ฝํ ์ธ ๊ฐ ๋ง์๋ฐ ์ด๋ฒ์ dependencis์ devDependencies ์ฐจ์ด์ ๋ํด ์ ์ด๋ณด๋ ค๊ณ ํ๋ค.
ํญํด ํ๋ฌ์ค ํ๋ก ํธ์๋ ์ ์ฒญ์ ๊ณ ๋ฏผํ๊ณ ์๋ ๋น์ ์๊ฒ! ๋ฐ๋ก๋น์ !
ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๋ก์ ํ ์ ์๋ ์ฑ๋ฅ ํฅ์..? ์ ์ ํผํฌ๋จผ์ค ๊ฐ์ ? ์ฃผ๋์ด๋ผ๋ฉด ํ๋ฒ์ฏค ๋ด ํ๋ก์ ํธ์ ์ฑ๋ฅ ํฅ์์ ํ๊ณ ์ถ๋ค! ๋ผ๋ ์๊ฐ์ ํด๋ณธ ๊ฒฝํ์ด ์๋ค๊ณ ์๊ฐํ๋ค. ๊ทธ๋ฆฌ๊ณ ์ค๋ฌด์์ ์ฑ๋ฅ ํฅ์์ ์ค์ ๋ก ํฅ์ ์์ผ๋ณธ ๊ตฌ์ฒด์ ์ธ ๊ฒฝํ์ ์ฑ์ฉ ๋ด๋น์ ์ ์ฅ์์๋ ์ถฉ๋ถํ ๋งค๋ ฅ
๋๊ด์ ์ ๋ฐ์ดํธ?? ์์ ๋ญํค ๋นํค์๋?
๐ก Batch ๊ฐ ๋ญ๋? ํ๋ฒ ์์๋ณผ๊น?
์ปดํฌ๋ํธ ๋ถ๋ฆฌ.. ๋๋์ฒด ์ด๋ป๊ฒ ํด์ผํ ๊น?
> ๐ก PureComponent๋? > ๐ก React.memo๋?
๐ก useRef๋ ๋ ๋๋ง์ ํ์ํ์ง ์์ ๊ฐ์ ์ฐธ์กฐํ ์ ์๋ React Hook์ ๋๋ค.(๊ณต์๋ฌธ์)๋ฌด์ง์ฑ ์ฌ์ฉํ๋ Hook์ ํ์ ํด๋ณด์;ใ ;
ํด๋น ๊ธ์ ์คํ๋ฅดํ ์ฝ๋ฉํด๋ฝ์ TypeScript ๋ฌธ๋ฒ ์ข ํฉ๋ฐ ๊ฐ์๋ฅผ ๋ฐํ์ผ๋ก ์์ฑ๋์์ต๋๋ค.
Warning : Each Child in a list should have a unique "key" prop.
์ด ๊ธ์ ๋ฐ๋จ์ ์ด์ ์ ์จ๋จ๋ ๋ ธ์ ์ ์ ๋ฆฌํ๋ ๋์ค ์ ์ ๋ ๊ฒ ์ ๋ชฉ์ ์ง์์ง ๋ชจ๋ฅด๊ฒ ๋ ๊ธ์์ ์์๋์๋ค.
web.dev๋งํฌweb.dev ๋ธ๋ก๊ทธ์ ์ฌ๋ผ์จ Array.prototype.with ์ ๋ํด ์ค๋ช ํ ๋ด์ฉ์ ์ ๋ฆฌํ ๊ฒ์ ๋๋ค.
ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๊ฐ api ์ค๋ฅ ๋ฐ์์ ๊ผญ ํ์ธํด ๋ด์ผํ ํญ๋ชฉ
๊ฐ๋ ๊ฐ๋ฐ์ ํ๋ค ๋ณด๋ฉด ์์น์๋ ๋ฆฌ๋๋๋ง์ด ๊ณ์์ ์ผ๋ก ๋ฐ์ํด ํ๋ฉด ์์์ ๋ฌธ์ ๊ฐ ์์ ๋๊ฐ ์๋ค.
React ๋๋ ํ ๋ฆฌ ๊ตฌ์กฐ์ ๋ํด ๊ณ ๋ฏผํด๋ณด์