4์์ ๋ฐ๋นด์ง๋ง, ๋ด์์ "์ด๋ค๊ฒ ๋ง๋๊ฑธ๊น, ๋ด๊ฐ ์ํ๊ณ ์๋๊ฑธ๊น" ํ๋ ๊ณ ๋ฏผ์ด ๋ง์๋ ํ ๋ฌ์ด์๋ค. 3์ ๋ฌ์ ํ๊ธฐ๋ก ํ๋ ๊ฒ๋ค ์ค ์ผ๋ง๋ ํ๋์ง์ ๋ํด ์ ๋ฆฌํด๋ณด๊ณ 4์์๋ ์ด๋ค ๊ฒ๋ค์ ํ๋์ง ๋ ์ด๋ป๊ฒ ํ๋ฉด ๋ ๋์ ๊ฐ๋ฐ์๊ฐ ๋ ์ ์์์ง ์ ๋ฆฌํด๋ณด๋ ค ํ๋ค.
๐ช 3์ ํ๊ณ ๋์๋ณด๊ธฐ
3์ ํ๊ณ ๋ ๋ง์๋จน์๋ ๊ฒ๋ค์ ์๋์ ๊ฐ์ด ์ ๋ฆฌํ ์ ์๋ค.
- App Startup Time ์ค์ด๊ธฐ ๋ ํ์ง ๋ชปํ ์ผ๊ฐ ํ์ ์์ ์งํํ๊ธฐ
- ์๋ฌ๋ฐ์ด๋๋ฆฌ ์ ์ฉํ๊ณ ๊ณผ์ ์ ๋ํ ๊ธ์ฐ๊ธฐ
- ์ค์ฟผ๋ ๋ด ์ํตํ ๋ ์ ๊ทน์ ์ผ๋ก ์ํตํ๊ธฐ, ๊ธฐ์ ์ฉ์ด ๋์ ์ดํดํ๊ธฐ ์ฌ์ด ์ฉ์ด๋ก ํํํ๊ธฐ
- ์ปดํฌ๋ํธ ์ค๊ณ์ ๋ํ ๊ณต๋ถํ๊ธฐ
- UI ํจํด๋ณ ์ต์ ํํ๋ ๋ฐฉ๋ฒ์ ๋ํด ์ ๋ฆฌํ๊ธฐ
์ ๋ค์ฏ๊ฐ์ง์ ๋ํด 4์ ํ๋ฌ๋์ ์ด๋๋์ง ๊ฐ์ธ์ ์ผ๋ก ์๊ฐํด๋ณด๋ ค ํ๋ค.
1. App Startup Time ์ค์ด๊ธฐ ํ์ ์์
App Startup Time ๊ฐ์ ์์ ์ ์ ๋ง๋ฌด๋ฆฌํ๊ณ ๋น์ ๋ฏธ๋ค๋๋ ํ์์์ ๋ค์ ์งํํ๊ฒ ๋ค๊ณ 3์์ ๋ค์งํ์๋ค.
๋คํํ ๋ค์ ์ฑํฐ ์
๋ฌด๋ก ํ๋ฉด ์ ํ๊ฐ ์ฑ๋ฅ์ ๊ฐ์ ์ ๋ด๋นํ๊ฒ ๋์๋ค. ๊ทธ ๋ฐฉ๋ฒ์ผ๋ก Native Stack
์ ์ ์ฉํ๋ ์์
์ ๋ฉ์ธ์ผ๋ก ์งํํ๊ณ ์๋ค.
์ฐ๋ฆฌ ์ ํ์ React Navigation์ ์ด์ฉํด ๋ผ์ฐํ
, ํ๋ฉด์ ํ์ ๊ตฌํํ๊ณ ์๋๋ฐ, ์ฑ๋ฅ ์ธก์ ์ ์ํ ์์ฒด Custom Stack Navigation์ ๋ง๋ค์ด์ ์ ์ฉํ๊ณ ์๋ค.
์ด๋ฅผ ์ ๊ฑฐํ๊ณ React Navigation์ Native Stack
์ ์ ์ฉํ๋ฉด์ JS ์ค๋ ๋๋ฅผ ์ด์ฉํ ํ๋ฉด์ ํ์ด ์๋๋ผ Native ์ค๋ ๋๋ฅผ ์ด์ฉํด ํ๋ฉด ์ ํ๊ฐ ์ฑ๋ฅ์ ๊ฐ์ ํ ์ ์์ ๊ฒ์ด๋ผ๊ณ ์๊ฐํ๋ค.
์ด๋ฟ ์๋๋ผ ๊ธฐ์กด ํ๋ฉด ์ ํ๊ฐ ๋ฌธ์ ๊ฐ ๋ ์ ์์ ๋งํ ๋ถ๋ถ๋ค์ ์ฐพ์๋ณด๊ณ ์์ด๋์ด๋ฅผ ๋ ์ฌ๋ฆฌ๊ณ ์๋ค.
์กฐ๊ธ ์์ฌ์ด๊ฑด ํ๋ฉด์ ํ ์์ ์ ์๊ฐ์ ์ผ๋ก ์ผ์ด๋๋ ๋ถ๋ถ์ด๊ธฐ ๋๋ฌธ์ ์ธก์ ์ ์ด๋ ค์์ด ์๊ณ , ๋์ผ ๊ธฐ๊ธฐ์์ ์ง์ ์์์ผ๋ก ๋น๊ตํด๋ณด๋ ค ํ๋๋ฐ, ๊ทธ๊ฒ ๋ํ ํฐ ์๋ฏธ๊ฐ ์๋ ๊ฒ์ธ์ง ์๋ฏธ๋ฅผ ์ฐพ๊ธฐ ์ด๋ ค์ ๋ณด์ธ๋ค.
๋ง์ฝ ์กฐ๊ธ ๋ ์ธก์ ์ ํด๋ณด๋ คํ๋ค๋ฉด ๋คํธ์ํฌ ์์กด์ด ์ ์ ํ๋ฉด์ ๋ํ E2E ํ ์คํธ ์ฝ๋๋ฅผ ์์ฑํ๊ฑฐ๋, ์ฑ์ ์ฌ์ฉํ๋ ํ๋ฆ์์ ํ๋ฉด์ ํ๋๋ ์๊ฐ์ CPU, ๋ฉ๋ชจ๋ฆฌ, FPS๊ฐ ๋จ์ด์ง๋ ์ ๋๋ฅผ ๋น๊ตํด๋ณด๋ ๋ฐฉ๋ฒ์ด ์ข์ ๋ณด์ฌ ์ฐ์ ์ธก์ ๋ฐฉ๋ฒ์ ๊ณ์ํด์ ๊ณ ๋ฏผํด๋ณด๊ณ ์๋ค.
2. ์๋ฌ๋ฐ์ด๋๋ฆฌ ์ ์ ๋ฐ ์ ์ฉํ๋ ๊ณผ์ ์ ๋ํ ๊ธ์ฐ๊ธฐ
3์์ ์ด์ด 4์๋ ์๋ฌ๋ฐ์ด๋๋ฆฌ๋ฅผ ์ ์ฉํ๋ ์์ ์ ์งํํ๊ฒ ๋์๋ค. 3์๊น์ง๋ ์๋ 4๋ถ๊ธฐ ์์ ์ ์ ์กฐ์ฌํ๋ ํ๋ฉด๋ค์ ๋ํ ๊ธฐ์ค์ผ๋ก ์์ ์ ์งํํ๊ณ , ๊ทธ์ฌ์ด์ ์๋กญ๊ฒ ์ถ๊ฐ๋๊ณ ์์ ๋ ํ๋ฉด๋ค์ ๋ํ ๋ฐ์์ด ๋์ด ์์ง ์์๊ธฐ ๋๋ฌธ์ 4์์ ์์ ์ ์์ํ๋ฉด์๋ ํ์ฌ์ ๊ธฐ์ค์ผ๋ก ์กฐ์ฌ๊ฐ ๋จผ์ ํ์ํ๋ค.
ChatGPT ๋๋ถ์ ๊ธฐ์กด ์ ๋ฆฌํด๋ ๋ฐ์ดํฐ์ ์๋กญ๊ฒ ์ถ๊ฐ๋ ๋ฐ์ดํฐ๋ฅผ ํฉ์น ์๋ก์ด ํ ์ด๋ธ์ ๋ง๋ค ์ ์๋ Script๋ฅผ ์์ฑํด, ํ์ฌ ๊ธฐ์ค ์ ํ ๋ด์๋ ์ด 256๊ฐ ํ๋ฉด์ด ์กด์ฌํ๊ณ ๊ทธ์ค 108๊ฐ ํ๋ฉด(42%)์ ๋ํ ์์ ์ด ํ์ํ๋ค๋ ๊ฒ์ ์ ์ ์์๋ค.
๋ถ๋ช 3์์ ์ ๋ฆฌํ์ ๋๋ ์๋ 4๋ถ๊ธฐ ์กฐ์ฌํ ํ๋ฉด๋ค ๊ธฐ์ค์ผ๋ก 262๊ฐ์ค 84๊ฐ(33%)์ ํ๋ฉด์ด ๋จ์์์๋๋ฐ ๋ค์ ์ ๋ฆฌํ๋ ๋ฌ๋ผ์ง ๊ฒ์ด๋ค. ์ด๋ ๊ฒ ์ ๋ฆฌํ๊ณ ๋๋ ๋จ์ํ ์ด์ฌํ๋ง ํด์๋ ์์ํ ๋๋์ง ์์ ์์ ์ด๋ผ๋ ์๊ฐ์ด ๋ค์๋ค. ๊ตฌ๋ฉ๋ ๋ ์ ๋ฌผ๋ถ๊ธฐ์ฒ๋ผ ๊ตฌ๋ฉ์ ์์ผ๋ก ๋ง์ผ๋ฉด์ ๋ฌผ์ ๋ถ์์ ๋ ์ด๋์ ๋ ์ฐจ๊ธด ํ๊ฒ ์ง๋ง, ์๋ก์ด ํ๋ฉด๋ค์ ์๊ธฐ๊ณ , ํ์์๋ ํ๋ฉด๋ค์ ์ ๊ฑฐ๋๊ฒ ๋๋ฉด์ ๋์ด ์๋ ์์ ์ด๋ผ๋ ๊ฒ์ ๋๊ผ๋ค.
์ด๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด์๋ ๋จ์ํ ์๋กญ๊ฒ ์ถ๊ฐํ๋ ๊ฒ ๋ค๊ฐ ์๋๋ผ ์ฑํฐ๋ด ๊ณต์ ๋ฅผ ํตํด ๋ค์ ํ ๋ฒ ์ ํ์ํ์ง, ์ด๋ค ํจ๊ณผ๊ฐ ์๋์ง ๊ณต์ ํด, ๋ค๊ฐ์ด ๋ ธ๋ ฅํด์ผ ํด๊ฒฐํ ์ ์๋ ๋ฐฉ๋ฒ์ด๋ ์๊ฐ์ด ๋ค์๋ค.
๊ทธ๋ฆฌ๊ณ ์ด๋ ๊ฒ ์ฑํฐ ๊ตฌ์ฑ์๋ค์ด ํจ๊ป ๋ ธ๋ ฅํด์ฃผ์๊ธฐ๋ฅผ ์์ฒญํ๋ ๋์์ ์กฐ๊ธ ๋ ์ฝ๊ฒ ์ ์ฉํ ์ ์๋ ๋ฐฉ๋ฒ์ ์์์ง ๊ณ ๋ฏผ์ด ํ์ํด ๋ณด์๋ค. ์ต์์ ์ปดํฌ๋ํธ์ธ Screen ์ปดํฌ๋ํธ ๋ด๋ถ๋ก ์ฎ๊ฒจ์ ์ ์ฉํ ์ง ๋ฑ ๊ธฐ์กด ์์ ์ ๋์๋ณด๋ฉด์ ์ต๋ํ ์ฌ์ด ๋ฐฉ๋ฒ์ ๊ณ ๋ฏผํด๋ณด๋ ค ํ๋ค.
์ด๋ฌํ ์ํ์ฐฉ์ค๋ค์ ์ ์ ๋ฆฌํด์ 6์์ ๋์๋ ๊ธ์ ์จ๋ณด๋ คํ๋ค.
3. ์ค์ฟผ๋ ๋ด ์ํต ๋ฐฉ์์ ๋ํ ๋ ธ๋ ฅ
3์๋ถํฐ ํฉ๋ฅํ ์ค์ฟผ๋ ๋ด์์ ๋ค์ํ ์์ ์ ์งํํ๊ฒ ๋์๋ค. ์ ์ฌ์ ๋ด๋น ์ค์ฟผ๋์ด๋ค ๋ณด๋ ๋ค๋ฅธ ํ์ฌ์์ ํ์ ์ ํ๊ฑฐ๋ ๋น ๋ฅด๊ฒ ํ ์คํธํ๊ฑฐ๋ ์ค๊ฐ์ ๋ค๋ฅธ ์ผ๋ค์ด ๋ง์ด ๋ค์ด์ค๋ ์ํฉ์์ ์์ฌ์ํต์ด ์ข ๋ ์ค์ํ๊ฒ ๋๊ปด์ก๋ค.
์ด๋ฒ๋ฌ ์ฃผ์ ์์ ์ค ํ๋์๋ ์ฟ ํก ๊ด๊ณ ์ฐ๊ฒฐ์์ ์ ์งํํ๋ฉด์ ์ฟ ํก ๊ด๊ณ ์ํ ํด๋ฆญ์ ์ฑ์ด ์ค์น๋๋ฉด ์ฟ ํก ์ฑ์ผ๋ก ์ง์ ํ ๊ด๊ณ ์ํ์ ๋๋ฉํ๊ฒ ๋๊ณ , ์ฑ์ด ์ค์น๋์ด ์์ง ์์ผ๋ฉด ๋ชจ๋ฐ์ผ ์น์ ํตํด ๊ด๊ณ ์ํ์ ๋๋ฉ์ํค๋ ์์ ์ ์งํํ๋ค.
์ด๋ iOS, Android์ ๋ฐ๋ผ ์ฟ ํก ๊ด๊ณ ์ ๋๋ฉํ ๋ ๊ธฐ์กด ๊ธฐํ๊ณผ ๋ค๋ฅธ ๋ถ๋ถ๋ค์ด ์์๊ณ , ์ด๋ฐ ๊ธฐํ๊ณผ ๋ค๋ฅธ ๋ถ๋ถ๋ค์ ์ ๋ฆฌํด์ ์ค์ฟผ๋์ ๊ณต์ ํ๋ ๋ฑ, ์ค์ ๊ตฌํ๊ณผ์ ์์ ์์๊ณผ ๋ค๋ฅผ ์ ์๋ ๋ถ๋ถ๋ค์ ์ ๊ทน์ ์ผ๋ก ๊ณต์ ํ๋ ค ๋ ธ๋ ฅํ๋ค.
๋ํ ์ ์ ๋ฐ์ดํฐ๋ฅผ ์ธก์ ํ๊ธฐ ์ํ ํธ๋์ปค์ ๊ฒฝ์ฐ์๋ PO, Data ์์ง๋์ด๋ถ๊ป์ ์ค๊ณํด์ฃผ์ จ์ ๋ ์ค์ ์ ์ฉํ ๋ ์ด๋ค ์์๊ฐ ์์ผ๋ฉด ์ข์์ง, ๋ ์ข์ ๋ฐฉ๋ฒ์ ์์์ง ์ ๊ทน์ ์ผ๋ก ์ํตํ๊ธฐ๋ ํ๋ค.
์ฌ์ ํ ๊ธฐ์ ์ ์ธ ์์์ ๋ํด ์ค๋ช ํ ๋ ์ด๋ ค์์ด ์๋ ๊ฒ ๊ฐ๋ค. ๋จ์ํ ๋๋ค/์๋๋ค ๋๊ฐ์ง๋ก ๋๋ ์ ์ด์ผ๊ธฐํ๋ ๊ฒ ์๋๋ผ ์ดํดํ ์ ์๊ฒ ์ ์ค๋ช ํ๋ ๋ฐฉ๋ฒ๋ค์ ๊ณ์ ์ฐ์ตํด๊ฐ์ผ ๊ฒ ๋ค๋ ๊ฒ์ ๋๊ผ๋ ํ๋ฌ์ด์๋ค.
4. ์ปดํฌ๋ํธ ์ค๊ณ์ ๋ํ ๊ณต๋ถํ๊ธฐ
์ค์ฟผ๋ ๊ธฐ๋ฅ ๊ฐ๋ฐ์ ํ๋ฉด์ ์ปดํฌ๋ํธ ์ค๊ณ์ ๋ํด์ ๋ง์ด ๊ณ ๋ฏผํ๊ณ ์์ ํ๋ค. ๊ธฐ์กด๊ณผ ๋ค๋ฅธ ์๊ตฌ์ฌํญ์ด ์๊ฒผ์ ๋ ์ด๋ป๊ฒ ํ๋ฉด ๋ณํ์ ์ ์ฐํ๊ฒ ๊ฐ๋ฐํ ์ ์์์ง, ๊ณ ๋ฏผํ๋ ๊ณผ์ ์ ์๊ฐ์ด ๋ ๋ง์ด ๋ค์์ง๋ง, ๋ฐ์ดํฐ์ UI์ ๋ถ๋ฆฌํ ๋ค์ ์ฌ์ฌ์ฉํ๊ธฐ ํธํ ์ธํฐํ์ด์ค๋ก ๊ฐ์ ํ๋ ์์ ์ ์งํํ๋ฉด์ ํ๋์ฉ ๋ ์ฌ์ฉํ๊ธฐ ์ข์ ์ปดํฌ๋ํธ์ ๋ํ ๊ฐ๋ ์ ์ก์๊ฐ๊ณ ์๋ค.
3์ ํ๊ณ ๋ ๋งํ๋ UI ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค์ ์ฐธ๊ณ ํด์ ์กฐ๊ธ ๋ ํ์ฅ์ฑ์๊ฒ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋๋ ๊ฑด ์์ง ์ ์ฉํ์ง ๋ชปํ๋ค. ๋์ ๊ธฐ๋ฅ ๊ฐ๋ฐ ๊ณผ์ ์์ ๋ณ๋ชฉ์ด ๋์๋ ์ปดํฌ๋ํธ ํ๋๋ฅผ ์ ํด์ ๋ฆฌํฉํ ๋ง ์์ ์ ๊ณํํ๊ณ ์ปดํฌ๋ํธ ์ค๊ณ์ ๊ด๋ จ๋ ๊ฐ์๋ค์ ์ฐธ๊ณ ํด ์ ์ฉํด๋ณด๋ คํ๋ค. ์ด๊ณผ์ ์ ์ ๋ฆฌํด์ ์ฃผ๊ฐ ๋ฏธํ ์๊ฐ์ ํ์๋ค๊ณผ ํจ๊ป ๊ณต์ ํด๋ ์ข์ ๊ฒ ๊ฐ๋ค.
5. UI ํจํด๋ณ ์ต์ ํํ๋ ๋ฐฉ๋ฒ์ ๋ํด ์ ๋ฆฌํ๊ธฐ
UI ํจํด๋ณ ์ต์ ํํ๋ ๋ฐฉ๋ฒ์ ๋ํด ์ ๋ฆฌํ๊ธฐ๋ ์์ง ์์ํ์ง๋ ๋ชปํ๋ค. ๋์ 4์ ํ๋ฌ๊ฐ ๊ฐ์ฅ ๋ง์ด ๋ณธ ํจํด์ ์ ๋ฆฌํด๋ณด๋ฉด ๋ชฉ๋ก -> ์์ธ๋ก ์ฐ๊ฒฐ๋๋ ํ๋ฉด๋ค๋ก ์ด๋ฃจ์ด์ง ์์ ํจํด์ด์๋ค.
React Native์๋ ScrollView, FlatList, SectionList ๋ฑ ๋ค์ํ ๋ฆฌ์คํธ ์ปดํฌ๋ํธ๋ค์ด ์๊ณ , ์ปดํฌ๋ํธ ์์ฒด Prop์ด ์ง์ํ๋ ์์๋ค์ ๊ณต์๋ฌธ์๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๊ตฌํํ๋ ค ๋ ธ๋ ฅํ๋ค.
์๋ฅผ ๋ค์ด ๋ชฉ๋ก์ ํน์ ์์๊ฐ ๋
ธ์ถ๋์๋์ง๋ฅผ ๊ฐ์งํ๋ ๋ฐฉ๋ฒ์ธ FlatList์ onViewableItemsChanged
๋ฅผ ์ด์ฉํ๋ ๋ฐฉ๋ฒ์ ์ ๋ฆฌํด ๊ฐ๋จํ ๊ธ์ ์์ฑํ๊ณ ,
์ฐ๋ฆฌ ์ ํ๋ด์์๋ ์ฒ์ ์ฌ์ฉํ๊ฒ ๋ prop์ด๋ผ ๊ณต์ ํ๋ฉด ์ข์ ๊ฒ ๊ฐ์ ์ฃผ๊ฐ ๋ฏธํ
์์ ๋ฐํ๋ฅผ ํ๊ธฐ๋ ํ๋ค.
์์ง ๋ถ์กฑํด ํ๋ฒ์ UI ํจํด ๋ณ ์ต์ ํ ๋ฐฉ๋ฒ์ ์ ๋ฆฌํ์ง ๋ชปํ์ง๋ง ํ๋ํ๋ ๊ณ์ํด์ ์ ๋ฆฌํด๋๊ฐ๋ ค ํ๋ค.
๐ 4์์ ๊ณ ๋ฏผ์ ์์ํ ์ผ๊ฐ ๋ฐ ๊ณต๋ถ
4์๊ณผ ๋ค๋ฅด๊ฒ ์๋กญ๊ฒ ๊ณ ๋ฏผ์ ์์ํ ์ผ๊ฐ๋ค์ ๋ํด ์ ๋ฆฌํ๋ฉด์ 5์์๋ ์ด๋ค ์ผ์ ์งํํ ์ง ๊ณํํด๋ณด๋ ค ํ๋ค.
์ ์ธ์ ์ผ๋ก ๋ก๊ทธ์ธ ํ์ํ๋ฉด ๋ค๋ฃจ๊ธฐ
๊ธฐ๋ฅ ๊ฐ๋ฐ์ ํ๋ฉด์ ๋ก๊ทธ์ธ์ด ๋์ด์๋ ์ ์ ๋ง ์ง์ ๊ฐ๋ฅํ ํ๋ฉด๋ค์ ๋ํ ์์ ํ๊ฒ ๋๋ค. ๊ทธ๊ฒฝ์ฐ ๋ก๊ทธ์ธ์ ํ๋์ง ์ํ๋์ง๋ฅผ ์คํฌ๋ฆฐ ๋ด๋ถ์์ ๊ณ์ํด์ ๊ณ ๋ฏผํ๋ฉด์ ๊ฐ๋ฐํด์ผํ๋ค ๋ณด๋ ๋ถ๊ธฐ๋ฌธ์ด ๋์ด๋๋ ๊ฒ์ ๋๋ผ๊ฒ ๋์๋ค. ๋ง์ฝ ์คํฌ๋ฆฐ ์์์์ HOC๋ก ๋ก๊ทธ์ธ์ด ๋์๋์ง ํ์ธํ ํ์ ํ์์์๋ ๋ฌด์กฐ๊ฑด ๋ก๊ทธ์ธ ๋์ด์๋ ๊ฒฝ์ฐ๋ก ์๊ฐํด์ ์์ ํ ์ ์๋ค๋ฉด ์กฐ๊ธ ๋ ๊ด์ฌ์ฌ๋ฅผ ์ ๋ถ๋ฆฌํ ์ ์์ง ์์๊น ์๊ฐ์ด ๋ค์๋ค.
React์ Protected Route์ฒ๋ผ RN์์ ๊ตฌํํ ์ ์๋ ๋ฐฉ๋ฒ์ ๊ณ ๋ฏผํด๋ณด๋ ค ํ๋ค.
์ง์ ์ ์ ๋ํ ๋ถ๊ธฐ๋ฌธ ๋์ด๋ด๊ธฐ
์๋ฌ๋ฐ์ด๋๋ฆฌ ์์ ์ ์งํํ๋ฉด์ ํด๋น ํ๋ฉด์ ์ง์ ํ ์ง์ ์ ์ ๋ฐ๋ผ ๋ค๋ฅธ ๊ฒฐ๊ณผ๋ฅผ ์คํ์ํค๋ ์ฝ๋๋ฅผ ๊ฐํน๋ณด๊ฒ ๋์๋ค. ์๋ฅผ ๋ค์ด ๊ณตํต ํด๋ํฐ ์ธ์ฆํ๋ฉด์ด ์๋ค๊ณ ํ๋ฉด ๊ณ ๊ฐ ํ์์ ๋ค์ด์์ ๊ฒฝ์ฐ์๋ ์ธ์ฆ ์คํจ์ ๊ณ ๊ฐํ์ผ๋ก ๋์๊ฐ๋ค๋ฉด, ์ปค๋ฎค๋ํฐ์์ ์ง์ ํ ๊ฒฝ์ฐ์๋ ํ ์คํธ๋ฅผ ๋์์ค ์ ์๋ค.
์ด๋ ๊ฒ ์ง์ ์ ๋ง๋ค ๋ฌ๋ผ์ง๋ ์ฝ๋๊ฐ ํด๋น ํ๋ฉด์ ์กด์ฌํ๊ฒ ๋์์ ๋ ๋๊ฐ์ง ๋ฌธ์ ์ ์ด ์๋ค๊ณ ์๊ฐ์ด ๋ค์๋ค.
๋จผ์ ํด๋น ์ง์ ์ ์ ๋ณํ๊ฐ ์๊ฒผ์ ๋ ๋์ฒ๊ฐ ์ด๋ ต๋ค. ๋ง์ฝ ์ง์ ์ ์ ์ด๋ฆ์ด ๋ฐ๋๊ฑฐ๋ ํด๋น ํ๋ฉด์ด ์ ๊ฑฐ๋์์ ๋์๋ ๋ถ๊ธฐ๋ฌธ์ด ์ง์ ์ ์ด๋ฆ์ ๋ฐ๋ผ๋ง ์ ์๋๊ณ ์์ด์ ํด๋น ์ผ์ด์ค๊ฐ ์ ๊ฑฐ/๋ณ๊ฒฝ์ ๋๋ฝ๋๋ ์ผ์ด์ค๊ฐ ๋ฐ์ํ ์ ์๋ค.
๋๋ฒ์จฐ๋ก๋ ์ง์ ์ ์ ๋ฐ๋ผ ํด๋น ํ๋ฉด ๋ด๋ถ ์ฝ๋๊ฐ ๋ถ๊ธฐ๋ฌธ์ผ๋ก ์ธํด ๋ณต์กํด์ง๋ค. ๋ง์ฝ ์์ ์์ ์ฒ๋ผ ์ธ์ฆ ์คํจ์์ ๋ํ ๋ถ๋ถ์ ๋ํ ์ ์๊ฐ ํ์ํ๋ค๋ฉด ํด๋น ์คํจ๋ฅผ ์ํ callback์ ์ ๋ฌํ๋ ๊ฒ ๋ ์ข์ ์ฝ๋์ด์ง ์์๊น ์๊ฐ์ด ๋ค์๋ค.
์ด๋ถ๋ถ๋ ์ ๋ฆฌํด์ ์ฃผ๊ฐ ๋ฏธํ ์ ๊ณต์ ํด๋ณด๋ ค ํ๋ค.
React ๋ถ์ํด๋ณด๊ธฐ
๊ฐ์ธ์ ์ผ๋ก ๊ณต๋ถํ๊ณ ์๋ ๋ถ๋ถ์ 2์๋ถํฐ ๊ณ์ํด์ ๋งค์ผ ๋ฆฌ์กํธ ๊ณต์๋ฌธ์์ ํ์ฑํฐ์ฉ ์ ๋ฆฌํด๋ณด๊ณ ์๋ค. ์ด์ ๊ฑฐ์ ๋ง๋ฌด๋ฆฌ๋์ด์ ๋ค์ ๋จ๊ณ๋ก ๋ฆฌ์กํธ ๋ด๋ถ ์ฝ๋๋ค์ ๊น๋ณด๋ฉด์ ๊ฐ ์์๊ฐ ์ง์ ์ด๋ป๊ฒ ๋์ํ๋์ง, ๋ฆฌ์กํธ์ ํน์ง์ด ์ด๋ป๊ฒ ๊ตฌํ๋์ด ์๋์ง์ ๋ํด ๊ณต๋ถํด๋ณด๋ ค ํ๋ค.
๋ฆฌ์กํธ์ ๋ํด ๋ ์ ์ดํดํ๊ฒ ๋๋ ๊ฒ๋ ์ข์ง๋ง, ์ ๋ง ๋ง์ ์ฌ๋๋ค์ด ์ฌ์ฉํ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ฝ๋๋ฅผ ๋ณด๋ฉด์, ์ด๋ค ์ฝ๋๊ฐ ์ข์ ์ฝ๋์ธ์ง ์ดํดํ๋ ์ข์ ๊ธฐํ๊ฐ ๋ ๊ฒ ๊ฐ๋ค.
๐ ๋ง์น๋ฉฐ
์ด๋ฒ ํ๊ณ ๋ 3์ ํ๊ณ ๋ ํ๋ ๋ค์ง๋ค์ ์ ์ง์ผฐ๋์ง, ์๋ก์ด ๊ณ ๋ฏผ์ ์์ํ ์ผ๊ฐ๋ค์ ๋ํด์๋ ํจ๊ป ์ ๋ฆฌํด๋ณด์๋ค. ๋ง๋ง ํ๊ณ ์คํํ์ง ์๋ ๊ฒ์ ๋ง๊ธฐ ์ํด ๋งค๋ฌ ํ๊ณ ๋ฅผ ์ด์ ๋ฌ์ ๋ค์ง๊ณผ ๋น๊ตํด๋ณด๋ ๊ฒ๋ ์ข์ ๋ฐฉ๋ฒ์ด๋ผ๊ณ ์๊ฐ์ด ๋ค์๋ค.
๋งค๋ฌ ์ฐ๊ณ ์์ง๋ง ์ด๋ ๊ฒ ์ ๋ฆฌํ๋ฉด์ ๋ค์ ํ๋ฒ ๋ด๊ฐ ์ด๋ค ๊ฐ๋ฐ์๊ฐ ๋๊ณ ์ถ์์ง, ์ด๋ค ๋ถ๋ถ์ ๋ ๊ณต๋ถํด์ผ ํ๋์ง, ์ด๋ค ๋ถ๋ถ์ ๋ ์ ๊ฒฝ์จ์ผ ํ๋์ง์ ๋ํด ๋ค์ ํ๋ฒ ์๊ฐํด๋ณด๋ ์๊ฐ์ด ๋๋ ๊ฒ ๊ฐ๋ค.
5์์ ์ฌ๋ ๋ ์ด ๋ง๋ค. ์ด๊ฒ์ ๊ธฐํ๋ก ๋ ๋ง์ด ๊ฐ์ธ๊ณต๋ถ๋ฅผ ๋ง์ด ๋๋ ค์ ํ์ฌ์์ ๋ ๋ง์ ๊ฒ์ ๊ณต์ ํ ์ ์๋ ๊ฐ๋ฐ์๋ก ๋์๊ฐ๋ ํ๋ฌ์ด ๋๊ธธ ๋ฐ๋ผ๋ณธ๋ค.