What is React?
#๏ธโฃReact๋?
React๋ ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ๊ตฌ์ถํ๊ธฐ ์ํ ์ ์ธ์ ์ด๊ณ ํจ์จ์ ์ด๋ฉฐ ์ ์ฐํ JavaScript ๋ผ์ด๋ธ๋ฌ๋ฆฌ
๐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ vs ํ๋ ์์ํฌ
๋ผ์ด๋ธ๋ฌ๋ฆฌ: ์ด๋ค ์ฑ์ ๋ง๋ค๊ธฐ ์ํด ํ์ํ ๋๋ถ๋ถ์ ๊ฒ์ ๊ฐ์ง๊ณ ์๋ ๊ฒ
ํ๋ ์์ํฌ: ์ด๋ค ํน์ ๊ธฐ๋ฅ์ ๋ชจ๋ํ ํด ๋์ ๊ฒ
๋ผ์ด๋ธ๋ฌ๋ฆฌ โ ํ๋ ์์ํฌ
ํ๋ ์์ํฌ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ํฌํจํ๊ณ ์์ฑํ ์ฝ๋๋ฅผ ํธ์ถํ๋ค. ๊ทธ๋ฆฌ๊ณ ๊ทธ ์ฝ๋๋ ๊ธฐ๋ฅ์ ๊ตฌํํ๊ธฐ ์ํด ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ํธ์ถํ๋ค.
Rreact๊ฐ ํ๋ ์์ํฌ๊ฐ ์๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ธ ์ด์
react๋ ์ ์ ์ผ๋ก UI๋ฅผ ๋ ๋๋ง ํ๋๋ฐ ๊ด์ฌํ๊ธฐ ๋๋ฌธ์ด๋ค. (view)
๊ทธ๋์ ํ์ด์ง ์ด๋(๋ผ์ฐํ ), ์ํ ๊ด๋ฆฌ ๋ฑ์ ํ๊ธฐ ์ํด react-router-dom, redux, recoil ๋ฑ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ๋ค.
๐คReact๋ฅผ ์ฌ์ฉํ๋ ์ด์
์๋์ ์ผ๋ก ๋ฐฐ์ฐ๊ธฐ ์ฌ์
์ฌ๋ฌ ๊ธฐ๋ฅ์ ์ํด ์ด๋ฏธ ๋ง๋ค์ด์ ธ ์๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ํ๊ฒฝ
๋ง์ ๊ธฐ์ ๋ค์ ์ฌ์ฉ์ผ๋ก ๊ฒ์ฆ ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ(ex. ํ์ด์ค๋ถ)
JSX(Javascript syntax extension) ์ฌ์ฉ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋์์ ๋ช ์์ HTML ๊ตฌ๋ฌธ์ ์ง์ ํ์ฉํ ์ ์๋ค. ์ฆ, ํ๋์ ํ์ผ์ ์๋ฐ์คํฌ๋ฆฝํธ์ HTML์ ๋์์ ์์ฑํ์ฌ ํธ๋ฆฌํ๋ค. (๊ธฐ๋ณธ UI์ ๋ฐ์ดํฐ๊ฐ ๋ณํ๋ ๊ฒ์ด๋ ์ด๋ฒคํธ๋ค์ด ์ฒ๋ฆฌ๋๋ ๋ถ๋ถ ์ฝ๊ฒ ๊ตฌํ ๊ฐ๋ฅ)
(In detail) createElement๋ฅผ ์ฝ๊ฒ ์ฌ์ฉํ๊ธฐ ์ํด ๋ชจ๋ UI๋ง๋ค createElement๋ฅผ ์ฌ์ฉx (๋ฒ๊ฑฐ๋ก์, ์ด๋ ค์) โด jsx ์ฌ์ฉ ํ ๋ฐ๋ฒจ์ด ์ด๊ฒ์ ์๋์ผ๋ก createElement(์์ ์ด๋ฆ, ๋ด์ฉ)๋ฅผ ๋ง๋ค์ด์ค
SPA(Single Page Application) ๊ตฌํ ๊ฐ๋ฅ html ํ์ผ์ 1๊ฐ๋ง ์ฐ๊ณ ๋ค๋ฅธ ํ์ด์ง๋ก ์ด๋ํ ๋ html ๋ถ๋ถ๋ง ๋ฐ๊พธ์ด ๋ณด์ฌ์ค๋ค โ ๋ถ๋๋ฝ๊ฒ ๋์ JS๋ก๋ง ์์ฑ ์ ์ฝ๋๊ฐ ๋๋ฌด ๊ธธ์ด์ง๋ค. ๊ทธ๋์ ์๋ฐ์คํฌ๋ฆฝํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ธ ๋ฆฌ์กํธ๋ฅผ ์ฌ์ฉํ๋ค.
CSR(Client-Side Routing)
React์์๋ React Router์ ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํด CSR ๊ตฌํ
์ด๋ ๋ธ๋ผ์ฐ์ ์ URL ๋ณํ๋ฅผ ๊ฐ์งํ๊ณ , JS๋ฅผ ํตํด ํ์ํ ๋ถ๋ถ๋ง ๋ก๋ํ๊ณ ๋ ๋๋งํ๋ค. โ ํ์ด์ง ์ ํ์ด ๋น ๋ฅด๊ณ ๋ถ๋๋ฝ๋ค.
Virtual DOM ๋ ๋๋ง ์ ๋ณ๊ฒฝ๋ ๋ถ๋ถ๋ง ์ค์ DOM์ ์ ์ฉ์์ผ ๋ถํ์ํ ์์ ์ ์ต์ํํ๊ณ ์ฑ๋ฅ์ ํฅ์์ํค๋ ๋ฐ ๋์์ ์ค๋ค.
์ฝ๋ ์ฌ์ฌ์ฉ Html์ ํจ์, array, object์ ๋ณด๊ดํ์ฌ ์ฌ์ฌ์ฉ ํ ์ ์๋ค. โ ๋๊ท๋ชจ ํ๋ก์ ํธ์ผ์๋ก html ๊ด๋ฆฌ๊ฐ ํธ๋ฆฌํด์ง๋ค.
React ๊ธฐ๋ฐ์ ๋ค๋ฅธ ํ๋ก์ ํธ์ ํธํ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ๊ณ ์ ํ ๊ฐ์ฒด, ์ฆ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค์ด React ๊ธฐ๋ฐ์ ๋ค๋ฅธ ํ๋ก์ ํธ์ ํ์ฉํ ์ ์๋ค. โ ์ฌ๋ฌ ํ๋ก์ ํธ ๊ฐ์ ์ผ๊ด์ฑ ์๋ ์ฝ๋์ ๊ตฌ์กฐ๋ฅผ ์ ์งํ๋ฉด์ ๊ฐ๋ฐ์ ์งํํ ์ ์๋ค. โ ํ์์ ๋ฐ๋ผ ์์ ํ๊ฑฐ๋ ํ์ฅํ์ฌ ๋ค์ํ ๊ธฐ๋ฅ์ ๊ตฌํํ ์ ์๋ค. ์ด๋ ๊ฒ ํ๋ฉด ์ฝ๋์ ์ฌ์ฌ์ฉ์ฑ๊ณผ ์ ์ง๋ณด์์ฑ์ ํฅ์์ํฌ ์ ์๋ค.
React Native ๊ฐ์ ๋ฆฌ์กํธ ๋ฌธ๋ฒ์ผ๋ก ๋ชจ๋ฐ์ผ ์ฑ๊ฐ๋ฐ๋ ๊ฐ๋ฅํ๋ค. (Html, CSS๋ฌธ๋ฒ๋ง ์ฝ๊ฐ ๋ค๋ฆ)
๐ค๐ฉถ์ฉ์ด ์ ๋ฆฌ๐ฉถ๐ค
๐ฉถJSX: Javascript๋ฅผ ํ์ฅํ ๋ฌธ๋ฒ ๐คcreateElement: HTML ๋ฌธ์์ ์๋ก์ด ์์๋ฅผ ๋์ ์ผ๋ก ์์ฑํ๋ JavaScript์ ๋ฉ์๋
#๏ธโฃ์ปดํฌ๋ํธ๋?
๋ฆฌ์กํธ๋ก ๋ง๋ค์ด์ง ์ฑ์ ์ด๋ฃจ๋ ์ต์ํ์ ๋จ์
์ฅ์ - ์ฌ์ฌ์ฉ์ด ์ฉ์ดํจ(์ฌ๋ฌ ๊ณณ์์ ์ฌ์ฉ ๊ฐ๋ฅ) - ์ฌ๋ฌ ๋ช ์ด ๋งก์ ์ปดํฌ๋ํธ๋ฅผ ๋์์ ์์ ํ ์ ์์
์ข ๋ฅ ํด๋์คํ / ํจ์ํ ํด๋์ค ์ฒ์์๋ํด๋์คํ ์ฌ์ฉํ๋ค hooks๊ฐ ๋ฐํ๋๋ฉด์ ํจ์ํ ์ปดํฌ๋ํธ ์ฌ์ฉ
#๏ธโฃSPA(single page application)
์น์ฌ์ดํธ์ ์ ์ฒด ํ์ด์ง๋ฅผ ํ๋์ ํ์ด์ง์ ๋ด์ ๋์ ์ผ๋ก ํ๋ฉด์ ๋ฐ๊ฟ๊ฐ๋ฉฐ ํํํ๋ ๊ฒ
(์ด์ ์๋ ํ ํ์ด์ง๋น ํ๋์ html ํ์ผ) index.html
jsํ์ผ์์ root๋ฅผ ์ก์ ์ฌ์ฉ
์ฅ์ ๋น ๋ฅธ ์๋, ํฅ์๋ ์ ์ ๊ฒฝํ, ํจ์จ์ ์ธ ์บ์ฑ, ๋ ์ ์ ์๋ฒ ๋ฆฌ์์ค(์์)์ฌ์ฉ, ๊ฐ์ํ๋ ๊ฐ๋ฐ ํ๋ก์ธ์ค
๋จ์ ๋ฎ์ SEO, ์ต์ด ๋ก๋ฉ ์๊ฐ, ๋ธ๋ผ์ฐ์ ๊ธฐ๋ก ์ ์ฅ, ๋๋ฌด ์ปค์ง๋ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ ์ฌ์ด์ฆ
๐คSPA์์ ํ๋ฉด ๋ณ๊ฒฝ ๋ฐฉ๋ฒ
HTML5์ History API ์ฌ์ฉ โ React-Router-Dom์ด History API๋ฅผ ์ฌ์ฉํ๋ ๊ฒ
์ฐธ๊ณ ์ฌ์ดํธ
Last updated