์ฑ์ ์คํํ์ง 9๊ฐ์.. ๋๋ ๋งฅ๋ถ + ์์ดํฐ ์กฐํฉ์ ์ฐ๊ธฐ ๋๋ฌธ์ ์๋๋ก์ด๋ ํธ๋ํฐ์ ํ ์คํธ์ฉ์ผ๋ก ์๊ณ , ์๋์ฐ๋ ์ ํด๋ณธ์ง๊ฐ ์ธ์ ์ง ๊ธฐ์ต๋ ์๋๋ค...๐ซ ์๋ฌดํผ! MIT๋์ด ์ ๋ณดํด์ฃผ์ ์ค๋ฅ ๋ด์ฉ ๋ผ๋ ๋ด์ฉ์ด์๋ค ์ฅ..? ์...? (๋งจ๋ ํ๋ ๋ง) ๋ฐ๋ก ๊ตฌ๊ธ๋ง
ํ์ฅ๊ฐ๋ฅํ ๋ฒกํฐ ๊ทธ๋ํฝ (๋ฒกํฐ ์ด๋ฏธ์ง๋ Pixcel์ด ์๋ ์ ๊ณผ ์ ์ฌ์ด๋ฅผ ๊ณ์ฐํ์ฌ ๊ทธ๋ฆฌ๋ ์ด๋ฏธ์ง)ํฝ์ ์ ์ด์ฉํ์ฌ ๊ทธ๋ฆผ์ ๊ทธ๋ฆฌ๋ย png jpg ํ์ผ๋ค๊ณผ ๋ค๋ฅด๊ฒ ๋ฒกํฐ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์ด๋ฏธ์ง๋ฅผ ํํXML ํฌ๋งท์ผ๋ก ํ์ผ์ด ์์ฑ๋๋ฏ๋ก HTML, JS, CSS๋ก ์กฐ์์ด ๊ฐ๋ฅํฉ๋๋ค.
ํ์ฌ์์ RN์์ ์ ํ๋ค๊ฐ ์นด์นด์ค ์ฐํธ ์ฃผ์ ๊ฒ์ API์ ์ฌ์ฉ ํ ์ผ์ด ์๊ฒผ์๋ค.๋๊ธฐ์ api๋ต๊ฒ docs๊ฐ ๊น๋ํ๊ฒ ์ ๋ฆฌ๋์ด์์์ง๋ง... ๋จ๋ค ๋ค ์ฝ๋ค๋ ๊ฒ๋ ๋๋ ์ด๋ ต๊ธฐ๋๋ฌธ์...๐ซ docs์์ ๋ ๋ฐ๋๋ผ js ๋ก ๋์ด์์๊ณ ๋ ๊ฑฐ์ ์ฝ๋๊ฐ ๋ง์ ์ ๋ถ ๋ฆฌ์กํธ๋ก ๋ฐ๊พธ๊ธฐ
๋ฆฌ์กํธ์์ ์๋ก ๋ค๋ฅธ ๋ ์ปดํฌ๋ํธ์ ๊ฐ์ ๋ฐ์ดํฐ๊ฐ ํ์ํ๋ค๊ณ ํ ๋, ์ปดํฌ๋ํธ๊ฐ ๋ถ๋ชจ์์ ๊ด๊ณ๋ก ๋์ด์์ง ์๋ค๋ฉด ์ปดํฌ๋ํธ ๊ฐ์ ์ง์ ์ ์ธ ๋ฐ์ดํฐ ์ ๋ฌ์ ์ด๋ ต๋ค. ๋ฐ์ดํฐ๋ฅผ ์์ ์ปดํฌ๋ํธ๋ก ๋ณด๋ด๊ณ , ๋ค์ ๊ทธ ๋ฐ์ดํฐ๋ฅผ ํ์ํ ์ปดํฌ๋ํธ๋ก ์ ๋ฌํด์ผํ๋ค. ํ์ง๋ง ์ด๋ ๊ฒ Prop์ด
ํจ์คํธ์บ ํผ์ค์์ ์งํํ๋ ๋๋ง์ iOS ์ฑ ๊ฐ๋ฐ ์ ๋ฌธ : iOS๊ฐ๋ฐ ๊ฐ์๋ฅผ ๋ฃ๊ณ ์์ฑํ๋ ๊ธ ์ ๋๋ค.์ด์ ์ด๋์ ๋ swift๋ผ๋ ์ธ์ด์ ๊ฐ์ด ์กํ๋ค! ์ญ์ ๋ชจ๋ ์ธ์ด๋ for๋ฌธ๋ถํฐ ๋๋ ค๋ด์ผ ํ๋ค ใ ใ ์์ง ๋ฌธ๋ฒ์ด ์ต์ํ์ง ์์ง๋ง ๊ทธ๋๋ ์ด๊ฒ ์๋ก์ด ์ธ์ด๋ฅผ ๋ฐฐ์ฐ๋ ์ฆ๊ฑฐ์
ํจ์คํธ์บ ํผ์ค์์ ์งํํ๋ ๋๋ง์ iOS ์ฑ ๊ฐ๋ฐ ์ ๋ฌธ : iOS๊ฐ๋ฐ ๊ฐ์๋ฅผ ๋ฃ๊ณ ์์ฑํ๋ ๊ธ ์ ๋๋ค.
RN์ ๊ณต๋ถํ๋ฉฐ, React์ ๋น์ทํ๋ ์ , ๋ฌ๋๋ ์ , ์๋ก ์๊ฒ ๋ ์ ๋ฑ์ ์ด์ผ๊ธฐ ํด๋ณด๋ ค ํ๋ค! ๋ด๊ฐ ๋๋ RN์ ์ฒซ ์ธ์์ ์? ์? ๋น์ทํ๋ฐ ๋ฌํ๊ฒ ๋ค๋ฅด๋ค... UI๋ ์ญ์ ์์ดํฐ ๐ซ๊ธฐ์กด์ ์น ui๊ตฌํ๊ณผ ํฌ๊ฒ ๋ค๋ฅธ์ ์ flex์์ฑ์ด๋ค.RN์ ๊ธฐ๋ณธ์ ์ธ fle
๊ธฐ์ ํ์ 1์ผ์ฐจ.. ReactNative๋ฅผ ์ฐ๊ธฐ ์ํด ๊ฐ๋ฐํ๊ฒฝ ์ ํ ์ ์์ํ๋ค.๊ทผ๋ฐ.. ํ์ค ์ ๋ ฅํ ๋๋ง๋ค ์ค๋ฅ ๋ฐ์...^^ ๊ฐ๋ฉ์ด๋ ๋ถ์์ ํ RN์ธ๋ฐ ์ฌ์ง์ด m1์ค๋ฅ๊น์ง ๋ํด์ง๋..๐คฆ๐ปโโ๏ธ์ด ๋ธ๋ก๊ทธ๋ฅผ ๋ณด๊ณ ๊ฐ๋ฐํ๊ฒฝ์ ์ ํ ํ๋ค.์ฌ๋ฌ ๋ธ๋ก๊ทธ๋ค์ ํ๊ฒฝ์ธํ ๋ฒ์ ๋ง์ํ ๋
์ด๋ ๊ฒ ์์ฑํ๋ฉด ts์์๋ user.name์์ ์ค๋ฅ๊ฐ ๋๋ค!์ด๋ด๋๋ interface๋ฅผ ์ฌ์ฉํ์!๊ฐ๊ฐ์ ์ค๋ช ์ ์ฝ๋์ ์ ์ด๋์๋ค!? ์ต์ ๋, readonly, \[], score์ด๋ ๊ฒ ํจ์๋ก๋ ๋ํ๋ผ ์ ์๋ค!()์ ๋งค๊ฐ๋ณ์๋ฅผ, :๋ ๋ฆฌํด๊ฐ์ ๋ํ๋ธ๋คํจ์๋ฅผ ์ข ๋ ์
์ฐ๋ฆฌ๊ฐ ์ฌ์ฉํ๋ ๋ธ๋ผ์ฐ์ ธ๋ค์ ํ์ ์คํฌ๋ฆฝํธ๋ฅผ ์ดํดํ์ง ๋ชปํ๋ค.๊ทธ๋์ js๋ก ๋ณํํด์ ๋ธ๋ผ์ฐ์ ธ์์ ์ฌ์ฉํ ์ ์๋ค.์ด๋ฐ ๋ฒ๊ฑฐ๋ก์ด ์ผ์ด ์์์๋ ๋ถ๊ตฌํ๊ณ ์ฐ๋ฆฌ๋ ์ typescript๋ฅผ ์ฐ๋๊ฒ์ผ๊น?javascript (๋์ ์ธ์ด) : ๋ฐํ์ ์ ํ์ ์ด ๊ฒฐ์ / ์ค๋ฅ ๋ฐ๊ฒฌtype
ํจ์ ์์์ ์ฌ์ฉํ ๊ฐ์ด ๋ฐ๋๋ฉด ํจ์๋ฅผ ํธ์ถํด์ ์ฐ์ฐํ๊ณ , ๊ฐ์ด ๋ฐ๋์ง ์์ผ๋ฉด ์ด์ ์ ์ฐ์ฐํ ๊ฐ์ ์ฌ์์ฉํ๋ค. ํจ์ ์์์ state๋ props๊ฐ ๋ฐ๋๋ฉด ํจ์๋ฅผ ํธ์ถํด์ ์คํํ๋ค.useCallback์ ์ฌ์ฉํ์ง ์์ ํจ์๋ค์ ์ปดํฌ๋ํธ๊ฐ ๋ฆฌ๋ ๋๋ง ๋ ๋ ๋ง๋ค ์๋ก ๋ง๋ค
์๋ class์์๋ง state๋ฅผ ์ฌ์ฉ ํ ์ ์์๋คhooks๊ฐ ๋์ค๊ฒ ๋๋ฉด์ functiond์์๋ state๋ฅผ ์ฌ์ฉํ ์ ์๊ฒ ๋๋ฉด์ function์ด class์ ๊ฐ์ ๊ธ์ผ๋ก ๋ถ์ํ๊ฒ ๋์๋ค.๋ํ ๋ผ์ดํ ์ฌ์ดํด๋ ์ฌ์ฉํ ์ ์๊ฒ ๋์๋คํจ์ํ์์ props๋ฅผ ๋ฐ๋
์์ฝ๋์ ๋ค์ด์จ์ง ํ๋ฌ์ด ๋๋ ๋ , ์ฐ๋ฆฌ๋ 1์ฐจ ํ๋ก์ ํธ๋ฅผ ์์ํ๋ค. ๋ถ๊ณผ ํ๋ฌ ์ ๊น์ง๋งํด๋ for๋ฌธ if๋ฌธ์ ๊ฒจ์ฐ ๋๋ฆฌ๋ ์ฐ๋ฆฌ์๋๋ฐ,, ํ์ ์ ์์ํ๋ผ๋ ... ๐ฑ ์ญ์๋ ์์๋๋ก ์ฒ์์ ์ฐ์ฌ๊ณก์ ๋ ๋ง์๊ณ ๋๋ฌด ํ๋ค์๋ค ํ์ง๋ง ๋๋ฌด๋๋ฌด๋๋ฌด ์ป์๊ฒ ๋ง์ ๋์ ์ฒซ ํ์
const obj = {name:'choi', score:1,2}const newObj = Object.assign({},obj);// ๊ฐ์ฒด์ ํ๋กํผํฐ๋ง์ ๋ณต์ฌํ๊ณ , value๊ฐ ์์ํ์ ์ด ์๋, ๊ฐ์ฒดํ์ (๋ฐฐ์ด, ๊ฐ์ฒด ...)์ผ ๊ฒฝ์ฐ ๊ฐ์ ์ ์ฅํ๋ ๊ฒ์ด ์๋ ๊ฐ์ฒด์ ์ฃผ
๋ฆฌ์กํธ ๊ณต์๋ฌธ์ ๋ฅผ ์ฐธ๊ณ ํ์ฌ ์์ฑํ ๊ฒ์๊ธ์ ๋๋ค.๋๋ ๊ทธ๋ฅ ์ปดํฌ๋ํธ๋ฅผ ๋๋ map์ ๋๋ ค์คฌ์ ๋ฟ์ธ๋ฐ.. ์ ์ค๋ฅ๊ฐ ๋์ง?๋ฆฌ์กํธ ๊ณต๋ถ ์ค ๋ํ๋ ์ค๋ฅ์ ๋ฉ๋ถ ๐ฅบ... ๋ฐ๋ณต๋๋ JSX๋ฅผ map์ ๋๋ ค์คฌ์ ๋ฟ์ธ๋ฐ ์ค๋ฅ๊ฐ ๋๋ค๊ณ ??ํด๋ต์ ๊ณต์๋ฌธ์๋ฅผ ํตํด ์ฝ๊ฒ ์ป์ ์ ์์๋ค
์ธ์คํ๊ทธ๋จ ํด๋ก ์ฝ๋ฉ ์ปดํฌ๋ํธ๋ฅผ ๋๋๋ ์ค, ์์์์ setSate๋ฅผ ํด์ผ ํ ์ผ์ด ์๊ฒผ๋ค! setState๋ state๊ฐ ๊ด๋ฆฌ ๋๊ณ ์๋ ๊ณณ์์ ์จ์ผํ๋๋ฐ,,, ์ด์ฉ์ง? ๋ฐ๋ก ๊ตฌ๊ธ๋ง! ๐ฅ๊ธฐ์กด ์์์ปดํฌ๋ํธ ํจ์์ฌ๊ธฐ์...!! setState ์ ์ธ ๋ถ๋ถ๋ง ์! ๋นผ์ ๋ถ
๋ฆฌ์กํธ ๊ณต์๋ฌธ์๋ฅผ ์ฐธ๊ณ ํ์ฌ ์์ฑ ํ ๊ธ์ ๋๋ค.UI์ ์ฌ์ฌ์ฉ ํ ์ ์๋ ๋ถ๋ถ์ ๋ถ๋ฆฌํ ๊ฒ์ ๋งํ๋ค ์์ ๊ฐ์ ํจ์๊ฐ ์๋ค๊ณ ๊ฐ์ ํด๋ณด์ ์ฌ๊ธฐ์ h1์ด ๋ฐ๋ณต๋๊ณ ์๋ค๋ ๊ฒ์ ์ ์ ์๋ค. ๋ํ, Hello, (์ด๋ฆ)! ํ ์คํธ๋ ์์ ์๋ ์ด๋ฆ๋ง ๋ฐ๋๊ณ ๋ชจ๋ ๊ฐ์ ํ์์ ๊ฐ
์์ฝ๋ ์ํ 2์ฃผ์ฐจ ํ๋ฆฌ์ฝ์ค๊ฐ ๋๋ฌ๋ค ๐ฅบ...์์นจ์ ๋ฐ์ผ๋ฆฌ ํฅ์คํ ์์ -> ์ค์ ๊ณต๋ถ or ์ธ์ -> ์ ์ฌ -> ์ธ์ -> ๊ณผ์ or ๊ฐ์ธ๊ณต๋ถ -> ์ ๋ -> ๊ฐ์ธ๊ณต๋ถ 10 -10์ด ์ ๋ง ์งง๊ฒ ๋๊ปด์ก๋ 2์ฃผ์๋ค..!! ์์ผ๋ก๋ ๋ ๋นจ๋ฆฌ ๊ฐ๊ฒ ์ง...?ํ๋ฆฌ์ฝ์ค๊ฐ ๋๋๋ฉฐ
์ธ์คํ๊ทธ๋จ ํด๋ก ์ฝ๋ฉ! js๋ก ์งํํ์๋ค. ํ์๊ตฌํ , ์ถ๊ฐ๊ตฌํ , ๋ฆฌํฉํ ๋ง๊น์ง ์๋ฃํ๋ฉฐ ๋๊ผ๋ ์ , ์ด๋ ค์ ๋ ๋ถ๋ถ์ ์ ๋ฆฌํ๋ ค ํ๋ค๐ฅ