2023. 11. 19. 23:00ใDevelopment๐ฉ๐ป๐ฆณ/Tutorial
๋ฆฌ์กํธ(React)๋ ์ธ๊ธฐ ์๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก, ์น๊ณผ ๋ชจ๋ฐ์ผ ์ฑ ๊ฐ๋ฐ์์ ๋๋ฆฌ ์ฌ์ฉ๋ฉ๋๋ค.
๋ฆฌ์กํธ์ ์ฃผ์ ์ฅ์ ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
์ปดํฌ๋ํธ ๊ธฐ๋ฐ ์ํคํ
์ฒ: ๋ฆฌ์กํธ๋ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ์ฌ UI๋ฅผ ๊ตฌ์ถํฉ๋๋ค.
์ด๋ ์ฝ๋์ ๊ด๋ฆฌ์ ์ ์ง ๋ณด์๋ฅผ ์ฉ์ดํ๊ฒ ํ๋ฉฐ, ํฌ๊ณ ๋ณต์กํ ์ ํ๋ฆฌ์ผ์ด์
์ ๋ ์ฝ๊ฒ ๊ด๋ฆฌํ ์ ์๋๋ก ํด์ค๋๋ค.
์ ์ธ์ UI: ๋ฆฌ์กํธ๋ฅผ ์ฌ์ฉํ๋ฉด, ์ ํ๋ฆฌ์ผ์ด์
์ด ์ด๋ป๊ฒ ๋ณด์ฌ์ผ ํ ์ง ์ ์ธ์ ์ผ๋ก ๊ธฐ์ ํ ์ ์์ต๋๋ค.
์ด๋ ์ฝ๋๋ฅผ ์ฝ๊ณ ์ดํดํ๊ธฐ ์ฝ๊ฒ ๋ง๋ค๋ฉฐ, ๋์์ธ๊ณผ ์ฝ๋ ๊ฐ์ ์ผ๊ด์ฑ์ ์ ์งํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
๊ฐ์ DOM: ๋ฆฌ์กํธ๋ ๊ฐ์ DOM์ ์ฌ์ฉํ์ฌ ์ค์ DOM์ ๋ํ ๋ณ๊ฒฝ ์ฌํญ์ ํจ์จ์ ์ผ๋ก ๊ด๋ฆฌํฉ๋๋ค.
์ด๋ ์ ํ๋ฆฌ์ผ์ด์
์ ์ฑ๋ฅ์ ํฅ์์ํค๊ณ , ๋น ๋ฅธ UI ์
๋ฐ์ดํธ๋ฅผ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค.
๊ฐ๋ ฅํ ์ํ๊ณ์ ์ปค๋ฎค๋ํฐ ์ง์: ๋ฆฌ์กํธ๋ ๋งค์ฐ ํ๋ฐํ ์ปค๋ฎค๋ํฐ์ ๊ด๋ฒ์ํ ์ํ๊ณ๋ฅผ ๊ฐ์ง๊ณ ์์ด,
๋ค์ํ ์ถ๊ฐ ๋๊ตฌ, ๋ผ์ด๋ธ๋ฌ๋ฆฌ, ๊ทธ๋ฆฌ๊ณ ํ๋ถํ ํ์ต ์๋ฃ๋ฅผ ์ด์ฉํ ์ ์์ต๋๋ค.
์ ์ฐ์ฑ๊ณผ ํธํ์ฑ: ๋ฆฌ์กํธ๋ ๋ค๋ฅธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ํ๋ ์์ํฌ์ ํจ๊ป ์ฌ์ฉ๋ ์ ์์ผ๋ฉฐ,
๊ธฐ์กด ์ฝ๋์ ์ฝ๊ฒ ํตํฉ๋ ์ ์์ต๋๋ค.
์๋ฒ ์ฌ์ด๋ ๋ ๋๋ง ์ง์: ๋ฆฌ์กํธ๋ ์๋ฒ ์ฌ์ด๋ ๋ ๋๋ง์ ์ง์ํ์ฌ,
์ด๊ธฐ ๋ก๋ฉ ์๊ฐ์ ๋จ์ถ์ํค๊ณ ๊ฒ์ ์์ง ์ต์ ํ(SEO)๋ฅผ ๊ฐ์ ํ ์ ์์ต๋๋ค.
๊ฐ๋ ฅํ ๋๊ตฌ ๋ฐ ํ์ฅ ํ๋ก๊ทธ๋จ: ๋ฆฌ์กํธ ๊ฐ๋ฐ์๋
ํฌ๋กฌ ๋ฐ ํ์ด์ดํญ์ค์ฉ ๋ฆฌ์กํธ ๊ฐ๋ฐ์ ๋๊ตฌ์ ๊ฐ์ ๊ฐ๋ ฅํ ๋๊ตฌ๋ฅผ ์ด์ฉํ ์ ์์ด
๋๋ฒ๊น
๊ณผ ๊ฐ๋ฐ ๊ณผ์ ์ด ํจ์จ์ ์
๋๋ค.
์ด๋ฌํ ์ฅ์ ๋ค๋ก ์ธํด ๋ฆฌ์กํธ๋ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ์์ด์ ๋งค์ฐ ์ธ๊ธฐ ์๋ ์ ํ์ด ๋๊ณ ์์ต๋๋ค.
๋ฆฌ์กํธ(React) ์์ฒด๋ ์น ์ ํ๋ฆฌ์ผ์ด์
๊ฐ๋ฐ์ ์ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ง๋ง,
๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ(React Native)๋ผ๋ ๊ด๋ จ ํ๋ ์์ํฌ๋ฅผ
์ฌ์ฉํ๋ฉด ์๋๋ก์ด๋(Android)์ iOS์์ ๊ตฌ๋๋๋ ๋ชจ๋ฐ์ผ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฐ๋ฐํ ์ ์์ต๋๋ค.
๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ์ ์ฃผ์ ํน์ง์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
ํฌ๋ก์ค ํ๋ซํผ ๊ฐ๋ฐ: ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ๋ฅผ ์ฌ์ฉํ๋ฉด
ํ๋์ ์ฝ๋๋ฒ ์ด์ค๋ก ์๋๋ก์ด๋์ iOS ์์ชฝ ํ๋ซํผ์์ ๋์ํ๋ ์ฑ์ ๊ฐ๋ฐํ ์ ์์ต๋๋ค.
์ด๋ ๊ฐ๋ฐ ์๊ฐ๊ณผ ๋น์ฉ์ ์ค์ด๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
๋ค์ดํฐ๋ธ ์ปดํฌ๋ํธ: ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ๋ ๊ฐ ํ๋ซํผ์ ๋ค์ดํฐ๋ธ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ์ฌ ์ฑ์ ๋น๋ํฉ๋๋ค.
์ด๋ ์ฑ์ด ๊ฐ ํ๋ซํผ์ ๋ค์ดํฐ๋ธ ์ฑ์ฒ๋ผ ๋ณด์ด๊ณ ๋์ํ๊ฒ ํฉ๋๋ค.
ํซ ๋ฆฌ๋ก๋ฉ: ๊ฐ๋ฐ ์ค์ ์ฝ๋๋ฅผ ์์ ํ๋ฉด, ์ ํ๋ฆฌ์ผ์ด์
์ ์ฌ์์ํ์ง ์๊ณ ๋ ์ฆ์ ๋ณ๊ฒฝ ์ฌํญ์ ๋ณผ ์ ์์ต๋๋ค.
์ด๋ ๊ฐ๋ฐ ์๋๋ฅผ ๋์ฌ์ค๋๋ค.
๋ฆฌ์กํธ์ ์ฅ์ : ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ๋ ๋ฆฌ์กํธ์ ๋ชจ๋ ์ฅ์ ์ ๊ทธ๋๋ก ์ด์ด๋ฐ์ต๋๋ค,
์ฆ ์ปดํฌ๋ํธ ๊ธฐ๋ฐ์ ์ํคํ
์ฒ, ์ ์ธ์ UI, ๊ฐ์ DOM ๋ฑ์ ํ์ฉํ ์ ์์ต๋๋ค.
๊ฐ๋ ฅํ ์ปค๋ฎค๋ํฐ์ ์ํ๊ณ: ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ ์ญ์ ๋ฆฌ์กํธ์ ๋ง์ฐฌ๊ฐ์ง๋ก
๊ฐ๋ ฅํ ์ปค๋ฎค๋ํฐ ์ง์๊ณผ ๊ด๋ฒ์ํ ์ํ๊ณ๋ฅผ ์๋ํฉ๋๋ค.
๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ๋ ๋ชจ๋ฐ์ผ ์ฑ ๊ฐ๋ฐ์์ ํจ์จ์ ์ด๊ณ ๊ฐ๋ ฅํ ์๋ฃจ์
์ ์ ๊ณตํ๋ฉฐ, ์น ๊ฐ๋ฐ ๊ฒฝํ์ด ์๋ ๊ฐ๋ฐ์๋ค์ด ๋น๊ต์ ์ฝ๊ฒ ๋ชจ๋ฐ์ผ ์ฑ ๊ฐ๋ฐ์ ์ ๊ทผํ ์ ์๋๋ก ํด์ค๋๋ค.
'Development๐ฉ๐ปโ๐ฆณ > Tutorial' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
๋ฆฌ์กํธ ์ด๊ธฐ ์ธํ ๋ฐฉ๋ฒ๊ณผ ๊ธฐ๋ณธ ๋ถ๋ชจ ์์ ์ปดํฌ๋ํธ์์ ๋ถ์ (ํด์ ๋ง์ ์ฃผ์) (0) | 2023.12.01 |
---|---|
์์์ ์ฝ๋ ์ด์ผ๊ธฐ (0) | 2023.09.11 |