[โReact] React ๊ธฐ๋ณธ ๊ฐ๋
๐ค ๋ฆฌ์กํธ๋?
๋ฆฌ์กํธ(React, React.js ๋๋ ReactJS)๋ ์ ์ธ์ , ํจ์จ์ ์ผ๋ก ์ ์ฐํ๊ฒ ์ ์ ์ธํฐํ์ด์ค๋ฅผ ๋ง๋ค๊ธฐ ์ํ ์๋ฐ์คํฌ๋ฆฝํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ํ๋๋ก, ํ์ด์ค๋ถ๊ณผ ๊ฐ๋ณ ๊ฐ๋ฐ์ ๋ฐ ๊ธฐ์ ๋ค ๊ณต๋์ฒด์ ์ํด ์ ์ง๋ณด์๋๋ฉฐ ์ง๊ธ๋ ๊ณ์ ์ ๋ฐ์ดํธ ์ค์ธ ํ๋ก์ ํธ์ด๋ค.
๋ฆฌ์กํธ์ ๊ฐ๋ ์ ๋ค์๊ณผ ๊ฐ์ ํจ์๋ก ํํ ๊ฐ๋ฅํ๋ค.
f(data) = View
ํ์ด์ง์ ๋์ ์ธ ์ํธ์์ฉ์ ๋ฃ๊ณ ์ถ์ ๋ ์ฐ๋ฆฌ๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ด์ฉํ๊ฒ ๋๋ค. ํ์ง๋ง ์น ๊ฐ๋ฐ ์ DOM ๊ด๋ฆฌ ๋ฐ ์ํ๊ฐ ๊ด๋ฆฌ ์์ ์ ํ๋ก์ ํธ๊ฐ ์ปค์ง ์๋ก ๋ ผ๋ฆฌ๊ฐ ๋ณต์กํด์ง ์๋ก ๊ท์ฐฎ๊ณ ๋จธ๋ฆฌ ์ํ์ง๋ค. ์ด๋ฌํ ๊ฒ๋ค์ ์ต์ํํ๊ณ ์ค์ง ๊ธฐ๋ฅ ๊ฐ๋ฐ๊ณผ ์ฌ์ฉ์ ์ธํฐํ์ด์ค(UI) ๋ฅผ ๊ตฌํํ๋ ๊ฒ์ ์ง์คํ๊ธฐ ์ํด React ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ํ์๋์๋ค.
๋ฆฌ์กํธ์ ํน์ง
๋ฆฌ์กํธ๋ ๋ค์๊ณผ ๊ฐ์ ํน์ง์ ๊ฐ์ง๊ณ ์๋ค.
- ๋ทฐ ๋ด๋น - MVC๋ชจ๋ธ ์ค View๋ง ๋ด๋นํ๋ค.
- ๋๋์ ์ํ๊ณ - ๊ณผ๊ฑฐ jQuery๊ฐ ์ ํํ์ ๋์ ๋ฒ๊ธ๊ฐ๋งํผ ๋ค์ํ ์ข ๋ฅ์ ๋ฆฌ์กํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ์๋ค.
- ๋์ ์์ ๋ - ํ๋ ์์ํฌ์ธ Vue.js๋ Angular์ ๋ฌ๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก ๊ด๋ฆฌ๋๊ธฐ ๋๋ฌธ์ ๋ค์ํ ํจํค์ง๋ค๊ณผ ํจ๊ป ์ฌ์ฉํ ์ ์๋ค. e.g. React Router, Axios, ...
- ์ ์ธ์ - ๋ฆฌ์กํธ๋ ๋ฐ์ดํฐ๊ฐ ๋ณ๊ฒฝ๋ ๋ ๋ ๋๋ง์ ์ํํจ์ผ๋ก์จ ์ฌ์ฉ์์์ ์ํธ์์ฉ์ด ํ์ํ UI ์ ์์ ์ฝ๊ฒ ๋ง๋ค์ด์ค๋๋ค.
- ์ปดํฌ๋ํธ ๊ธฐ๋ฐ - ๋ฆฌ์กํธ๋ ๋ค์ํ ์บก์ํ๋ ์ปดํฌ๋ํธ๋ค์ ์ด์ฉํ์ฌ ์ด๋ฅผ ์ ์กฐํฉํ์ฌ ๋ณต์กํ UI๋ฅผ ๋ง๋ค๊ฒ ํด์ค๋๋ค.
- ํ ๋ฒ ๋ฐฐ์ฐ๋ฉด, ์ด๋์๋ ์ฌ์ฉ ๊ฐ๋ฅ - ๋ฆฌ์กํธ๋ Node.js๋ฅผ ์ด์ฉํ์ฌ ์๋ฒ์์๋ ๋๋๊ฐ ๊ฐ๋ฅํ๊ณ , React-Native๋ฅผ ์ด์ฉํด์ ๋ชจ๋ฐ์ผ ์ฑ์ ๋ง๋ค ์๋ ์์ต๋๋ค.
- ์คํ์์ค - ํ์ด์ค๋ถ์ ์ํด ๊ด๋ฆฌ๋๋ ์คํ์์ค์ด๋ค.
- ํ๋ก ํธ์๋์ ์ง๋ฐฐ์ - ๋ค๋ฅธ ํ๋ ์์ํฌ์ ๋นํด ํ์ ํ ๋์ ๊ตฌ๊ธ ํธ๋๋ ์ง์์ ์คํ์ค๋ฒํ๋ก์ฐ ์ง๋ฌธ์, ๊นํ ํ๋ก์ ํธ ์๋ฅผ ๊ฐ์ง๊ณ ์๋ค.
๋ฆฌ์กํธ ๊ด๋ จ ํ์ด์ง
- ๋ฆฌ์กํธ Github ํ์ด์ง
- ๋ฆฌ์กํธ ๊ณต์ ํํ์ด์ง
- ๋ฆฌ์กํธ ๊ณต์ ๋ฌธ์
- ๋ฆฌ์กํธ ๊ณต์ ํํ ๋ฆฌ์ผ
- ๋ฆฌ์กํธ ์์ํ๊ธฐ
'Web > React' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
์ง์ ์ ์ํ ๋ฆฌ์กํธ-ํ์ ์คํฌ๋ฆฝํธ-๋ณด์ผ๋ฌํ๋ ์ดํธ ์๊ฐ (0) | 2020.03.15 |
---|---|
๋ฆฌ์กํธ์์ ์๋ก๊ณ ์นจ์ ํด์ผ ํจ์๊ฐ ์๋ํ๋ ๊ฒฝ์ฐ (1) | 2020.03.02 |
[โReact] React Element, React Component ๊ทธ๋ฆฌ๊ณ JSX (0) | 2020.01.19 |
[โReact] ๐ถ ์ด๋ชจ์ง๋ฅผ ์ด์ฉํ ๋น๊ณ ๊ฒ์ ๋ง๋ค๊ธฐ (1) | 2019.01.31 |
[โReact] React ๊ธฐ๋ณธ ๊ฐ๋ (0) | 2018.12.26 |
React๋ก WYSIWYG ์๋ํฐ ๋ญ๋ก ์์ํ์ง? (4) | 2018.12.20 |
๋๊ธ
์ด ๊ธ ๊ณต์ ํ๊ธฐ
-
๊ตฌ๋
ํ๊ธฐ
๊ตฌ๋ ํ๊ธฐ
-
์นด์นด์คํก
์นด์นด์คํก
-
๋ผ์ธ
๋ผ์ธ
-
ํธ์ํฐ
ํธ์ํฐ
-
Facebook
Facebook
-
์นด์นด์ค์คํ ๋ฆฌ
์นด์นด์ค์คํ ๋ฆฌ
-
๋ฐด๋
๋ฐด๋
-
๋ค์ด๋ฒ ๋ธ๋ก๊ทธ
๋ค์ด๋ฒ ๋ธ๋ก๊ทธ
-
Pocket
Pocket
-
Evernote
Evernote
๋ค๋ฅธ ๊ธ
-
๋ฆฌ์กํธ์์ ์๋ก๊ณ ์นจ์ ํด์ผ ํจ์๊ฐ ์๋ํ๋ ๊ฒฝ์ฐ
๋ฆฌ์กํธ์์ ์๋ก๊ณ ์นจ์ ํด์ผ ํจ์๊ฐ ์๋ํ๋ ๊ฒฝ์ฐ
2020.03.02 -
[โReact] React Element, React Component ๊ทธ๋ฆฌ๊ณ JSX
[โReact] React Element, React Component ๊ทธ๋ฆฌ๊ณ JSX
2020.01.19 -
[โReact] ๐ถ ์ด๋ชจ์ง๋ฅผ ์ด์ฉํ ๋น๊ณ ๊ฒ์ ๋ง๋ค๊ธฐ
[โReact] ๐ถ ์ด๋ชจ์ง๋ฅผ ์ด์ฉํ ๋น๊ณ ๊ฒ์ ๋ง๋ค๊ธฐ
2019.01.31 -
React๋ก WYSIWYG ์๋ํฐ ๋ญ๋ก ์์ํ์ง?
React๋ก WYSIWYG ์๋ํฐ ๋ญ๋ก ์์ํ์ง?
2018.12.20