[React] Hook์ ๋์ ์๋ฆฌ ์ดํดํ๊ธฐ
December 19, 2021โฃ 9 minReact Hook์ ์ด๋ค ๋ฐฉ์์ผ๋ก ๋์ํ ๊น? Hook์ ๊ตฌํํด๋ณด๋ฉฐ ๋์ ๋ฐฉ์์ ์ดํดํด๋ณด์.
React Hook์ ์ด๋ค ๋ฐฉ์์ผ๋ก ๋์ํ ๊น? Hook์ ๊ตฌํํด๋ณด๋ฉฐ ๋์ ๋ฐฉ์์ ์ดํดํด๋ณด์.
๊ต์ฐจ ์ถ์ฒ ๋ฆฌ์์ค ๊ณต์ (Cross-Origin Resource Sharing)์ ๋ํด ์์๋ณด์.
์ด๋ฒคํธ ์์(event delegation)์ ๋น์ทํ ๋ฐฉ์์ผ๋ก ์ฌ๋ฌ ์์๋ฅผ ๋ค๋ค์ผ ํ ๋ ์ฌ์ฉ๋๋ค. ์ด๋ฒคํธ ์์์ ์ฌ์ฉํ๋ฉด ์์๋ง๋ค ํธ๋ค๋ฌ๋ฅผ ํ ๋นํ์ง ์๊ณ , ์์์ ๊ณตํต ์กฐ์์ ์ด๋ฒคํธ ํธ๋ค๋ฌ๋ฅผ ๋จ ํ๋๋ง ํ ๋นํด๋ ์ฌ๋ฌ ์์๋ฅผ ํ๊บผ๋ฒ์ ๋ค๋ฃฐ ์ ์๋ค.
๋ชจ๋ ๊ฐ์ฒด๋ ์์ ์ ๋ถ๋ชจ ์ญํ ์ ํ๋ ๊ฐ์ฒด์ ์ฐ๊ฒฐ๋์ด ์๊ณ , ๊ฐ์ฒด์งํฅ์ ์์ ๊ฐ๋ ๊ณผ ๊ฐ์ด ๋ถ๋ชจ ๊ฐ์ฒด ํ๋กํผํฐ๋ฅผ ์์ ์ ๊ฒ์ฒ๋ผ ์ธ ์ ์๋ค๋ ํน์ง์ด ์๋ค.
React Native CLI(0.60+)๋ก ๊ฐ๋ฐํ ์ฑ์ ๋น๋ํ๊ณ ๋ฐฐํฌํด๋ณด์.
React Native CLI(0.60+)์์ Splash Screen์ ์ ์ฉํด๋ณด์.
์๋ฐ์คํฌ๋ฆฝํธ๋ ์ฑ๊ธ์ค๋ ๋์ด๋ค. ์ด๋ป๊ฒ ์๋ฐ์คํฌ๋ฆฝํธ๋ ์ฑ๊ธ์ค๋ ๋์ด๋ฉด์ ๋น๋๊ธฐ์ธ ๊ฒ์ผ๊น? ์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ์ด๋ป๊ฒ ๋์ํ๋์ง ๋ด๋ถ ์๋ฆฌ์ ๋ํด ์์๋ณด์. ๐ Contentsโฆ
Lint๋ ๋ณดํธ๋ผ๊ธฐ๋ผ๋ ๋ป์ธ๋ฐ ํ๋ก๊ทธ๋๋ฐ ์ชฝ์์๋ ์๋ฌ๊ฐ ์๋ ์ฝ๋์ ํ์๋ฅผ ๋ฌ์๋๋ ๊ฒ์ ์๋ฏธํ๋ค. ์ฆ ESLintโฆ
Babel์ ์ต์ ์ js์ฝ๋๋ฅผ normalํ ์์ ์ js์ฝ๋๋ก ๋ณํํด์ค๋ค. ๋ง์ ๋ชจ๋ ์น ๋ธ๋ผ์ฐ์ ๋ค์ด ES6 ๋ฌธ๋ฒ์ ์ด๋์ ๋ ์ง์ ํ์ง๋ง ๋ถ์กฑํ ์ํฉ์ด๋ค. ๋ฐ๋ผ์ ๋ฐ๋ฒจ์ ํตํด ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง(Cross Browsingโฆ
Webpack์ ์ฌ๋ฌ๊ฐ ํ์ผ์ ํ๋์ ํ์ผ๋ก ํฉ์ณ์ฃผ๋ ๋ชจ๋ ๋ฒ๋ค๋ฌ(Module bundler)์ด๋ค. Webpack์ ์ฐ๋ ์ด์ ๋ ๋ฌด์์ผ๊น? ํ์คํ๋ ๋ชจ๋ํ ๊ธฐ๋ฒ์ด ๋ฑ์ฅํ ๊ฒ์ ES2015๋ถํฐ์ธ๋ฐ, Webpackโฆ
๋๋ถ๋ถ์ ํ๋ก์ ํธ์์ ๊ธฐ๋ฅ ๊ฐ๋ฐ๊ณผ ์๋ฌ ์์ ์ด ์์ฐจ์ ์ธ ํ๋ฆ์ผ๋ก ์งํ๋์ง ์๊ธฐ ๋๋ฌธ์ ์์ ์ ๋ณ๋ ฌ๋ก ์งํํ๊ธฐ ์ํด์๋ ๋ณ๋์ ๊ธฐ๋ฅ์ด ํ์ํ๋ค. ๊ทธ๋์ ํ์ํ ๊ฒ์ด `๋ธ๋์น(Branch)`์ด๋ค. ๋ชจ๋ ๋ฒ์ ๊ด๋ฆฌ ์์คํ ์๋ ๋ธ๋์น๋ผ๋ ๊ฐ๋ ์ด ์๋ค.