[React] ๐ React.js๋?
์ด๋ฒ ํฌ์คํ ์์๋ React๊ฐ ๋ฌด์์ธ์ง, ํ์ ๋ฐฐ๊ฒฝ๊ณผ ํน์ง ๊ทธ๋ฆฌ๊ณ ์ ์๋ฅผ ๊ตฌ๋ถ์ง์ด ๊ฐ๋จํ๊ฒ ์ ๋ฆฌํด๋ณด๋ ค๊ณ ํ๋ค.
โ๏ธ 1. React๋?
๋ฆฌ์กํธ(react.js)๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ํ๋๋ก์ ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ๋ง๋ค๊ธฐ ์ํด ์ฌ์ฉ๋๋ค.
ํ์ด์ค๋ถ๊ณผ ๊ฐ๋ณ ๊ฐ๋ฐ์ ๋ฐ ๊ธฐ์ ๋ค ๊ณต๋์ฒด์ ์ํด ์ ์ง๋ณด์๋๋ค. ๋๊ท๋ชจ ๋๋ ๋ณต์กํ ๋ฆฌ์กํธ ์ ํ๋ฆฌ์ผ์ด์ ๊ฐ๋ฐ์๋ ๋ณดํต ๋ผ์ฐํ , APIํต์ ๋ฑ์ ๊ธฐ๋ฅ์ด ์๊ตฌ๋๋๋ฐ ๋ฆฌ์กํธ์๋ ๊ธฐ๋ณธ์ ์ผ๋ก ์ ๊ณต๋์ง ์๊ธฐ ๋๋ฌธ์ ์ถ๊ฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํด์ผ ํ๋ค.
1) 3์ธ๋ ์น, ํ๋ ์์ํฌ? ๋ผ์ด๋ธ๋ฌ๋ฆฌ?
์๊ฐ์ ๋ฐ๋ผ ์์ฐ์ค๋ฝ๊ฒ ๊ธฐ์ ์ด ๋ฐ์ ํ๋ ๊ฒ์ด ์๋๋ผ ํด๊ฒฐํด์ผ ํ๋ ๋ฌธ์ ์ ๋ณต์ก์ฑ์ด ์ฆ๊ฐํจ์ผ๋ก ์ธํด ๊ธฐ์ ์ด ๋ฐ์ ํ๋ค. ๊ทธ๋ ๋ค๋ฉด ์น์์ ๋ฌธ์ ์ ๋ณต์ก์ฑ์ ๋ฌด์์ ์๋ฏธํ๋ ๊ฑธ๊น? ์ฌ์ฉ์๋ค์ด ์ํ๋ ๊ธฐ๋ฅ๋ค์ด ์ ์ ๋ง์์ง๊ณ ๊ฐ๋ฐ์๋ค์ด ์ฒ๋ฆฌํด์ผ ํ๋ ์ ์ ์ interaction ๋ํ ์ ์ ๋์ด๋๊ฒ ๋๋ค. ์ด๋ฐ ์ํฉ์์ ํ๋ก ํธ ์๋ ๊ฐ๋ฐ์๋ค์ ๊ธฐ์กด์ ๊ธฐ์ ์ ํ๊ณ๋ฅผ ๋๋ผ๊ฒ ๋๊ณ ์๋ก์ด ๊ธฐ์ ์ ๊ฐ๋ฐํ๊ฒ ๋๋ค. ๊ทธ ๊ธฐ์ ๋ค์ด Front-end Framework๋ผ๊ณ ํต์นญ๋๊ณ ์๋ ๊ธฐ์ ๋ค์ด๋ค.
๊ทธ๋ ๋ค๋ฉด ์น์ด ๋ฐ์ ํจ์ ๋ฐ๋ผ ํ๋ก ํธ์๋ ๊ธฐ์ ๋ค์ ์ด๋ค ๋ณํ๋ค์ ๊ฑฐ์ณ ํ์ฌ์ ํ๋ ์ ์ํฌ๊ฐ ๋์จ ๊ฒ์ผ๊น?
๐ 1์ธ๋ ๊ธฐ์
- HTML / CSS
- JavaScript
- DOM
- Event
๐ 2์ธ๋ ๊ธฐ์
- jQuery
๐ 3์ธ๋ ๊ธฐ์
- Angular(Framework)
- Vue(Framework)
- React(Library)
โ๏ธ 2. React / Vue / Angular
1) Framework์ Library์ ์ฐจ์ด?
๐ ๊ณตํต์
- ๋ค๋ฅธ ์ฌ๋๋ค์ด ๋ง๋ค์ด๋ ์ฝ๋์ด๋ค
๐ ์ฐจ์ด์
- ํ๋ ์์ํฌ๋ ๋ค๋ฅธ ์ฌ๋๋ค์ด ๋ง๋ค์ด๋ ํ ์์ผ๋ก ๋ด๊ฐ ๋ค์ด๊ฐ๋ ๊ฒ์ด์ง๋ง ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ๋ด ์์ ์ ๋ค๋ฅธ ์ฌ๋๋ค์ด ๋ง๋ค์ด๋ ์ฝ๋๋ฅผ ๊ฐ์ ธ์์ ์ฌ์ฉํ๋ ๊ฒ์ด๋ค
- ๋ด๊ฐ ๋ถ๋ ค๊ฐ๋ฉด ํ๋ ์์ํฌ, ๋ด๊ฐ ๋ถ๋ฅด๋ฉด ๋ฆฌ์กํธ!
2) React / Vue / Angular
๐ Angular
- 2010๋ ๊ตฌ๊ธ์์ ๊ฐ๋ฐํ ํ๋ ์์ํฌ
- TypeScript ๊ธฐ๋ฐ์ผ๋ก ๋งค์ฐ ์์ ์ ์ด๊ณ ์ ์ค๊ณ๋ ๊ตฌ์กฐ ์์์ ๊ฐ๋ฐ์ด ๊ฐ๋ฅ
- ํ๋ ์์ํฌ ๋ต๊ฒ ๋ค์ํ ๊ธฐ๋ฅ๊ธฐ ๋ด์ฅ๋์ด ์๋ค
- ๋ฌด๊ฒ๊ณ ๋ฐฐ์ฐ๊ธฐ ์ด๋ ต๋ค๋ ๋จ์ ์ด ์๋ค
๐ Vue
- 2014๋ Even You๋ผ๋ ๊ฐ์ธ์ด ๊ฐ๋ฐํ ํ๋ ์์ํฌ
- Angular์ ๋ง์ฐฌ๊ฐ์ง๋ก Vue๋ง์ ๋ฌธ๋ฒ๊ณผ ๊ท์น์ด ์๋ค
- ํ๋ ์์ํฌ ๋ต๊ฒ ๋ค์ํ ๊ธฐ๋ฅ์ด ๋ด์ฅ๋์ด ์๋ค
- ๋ฌ๋์ปค๋ธ๊ฐ ๋ฎ๋ค
๐ React
- 2013๋ ํ์ด์ค๋ถ์์ ๊ฐ๋ฐํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ
- '์ง์์ ์ผ๋ก ๋ฐ์ดํฐ๊ฐ ๋ณํํ๋ ๋๊ท๋ชจ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋' ๋ชฉํ๋ก ๊ฐ๋ฐ
- Angular, Vue ๋ฑ์ ๋ค๋ฅธ ํ๋ ์์ํฌ์๋ ๋ฌ๋ฆฌ ๋ฆฌ์กํธ๋ ์ค์ง View๋ง ๋ด๋นํ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ
- ๊ทธ๋งํผ ๋ด์ฅ๋์ด ์๋ ๊ธฐ๋ฅ์ด ๋ถ์กฑํด third-party ๋ผ์ด๋ธ๋ฌ๋ฆฌ(ex. React-Router, Redux)๋ฅผ ํจ๊ป ์ฌ์ฉํ๋ค
3) ์ ๋ฆฌ์กํธ๋ฅผ ์ฌ์ฉํ ๊น?
- ๋ฆฌ์กํธ๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ๋ฌธ๋ฒ์ ๊ทธ๋๋ก ํ์ฉํ๊ธฐ ๋๋ฌธ์ ํธ๋ฆฌ์ฑ์ ๊ฐ์ง๊ณ ์ฌ์ฉํ ์ ์๋ค
- ํ์ด์ค๋ถ์ ์ง์์ ์ธ ๊ด๋ฆฌ์ ํจ๊ป ์ํ๊ณ๊ฐ ํ์ฑํ ๋์ด์๋ค
- ๋ฆฌ์กํธ๋ ์คํ์์ค ํ๋ก์ ํธ์ด๋ค. ์ฆ, ๋๊ตฌ๋ ์ฝ๋๋ฅผ ๋ณผ ์ ์๊ณ ์์ ๋๋ ์๋ก์ด ๊ธฐ๋ฅ์ ์ ํํ ์ ์๋ค
- ํ์ด์ค๋ถ์์ ๊ด๋ฆฌํ๊ธฐ ๋๋ฌธ์ ํ๋ฆฌํฐ๋ฅผ ์ ์งํ๊ณ ์๋ค
- Angular๋ Vue์ ๋นํด ์ปดํฌ๋ํธ๊ฐ ๋จ์ํ๊ณ ๊ฐ๋จํ๊ฒ ์ ์๋์ด ์๋ค
โ๏ธ 3. React์ ํน์ง
- ์ ์ธ์
- Virtual-dom
- Node & NPM
- CRA
- Component
- JSX
1) ์ ์ธ์ ์ธ ๊ฐ๋ฐ์ด๋?
๊ฐ๋ฐ ๋ฐฉ์์ ํฌ๊ฒ ๋๊ฐ์ง๋ก ๋๋๋ฉด ์ ์ธ์ ๋ฐฉ์, ์ ์ฐจ์ ๋ฐฉ์์ผ๋ก ๋๋ ์ ์๋ค. ์๋ ์ฒญ์๋ฅผ ์์๋ก ๊ฐ๊ฐ์ ํน์ง์ ์ดํด๋ณด์
๐ ์ ์ฐจ์ (HOW?)
- ์ฒญ์๊ธฐ๋ฅผ ๋๋ฆฐ๋ค
- ๋นจ๋๋ฅผ ํ๋ค
- ๊ฑธ๋ ์ง์ ํ๋ค
- ์ฐ๋ ๊ธฐ๋ฅผ ๋ฒ๋ฆฐ๋ค
=> ๋ชฉ์ ์ ์ด๋ฃจ๊ธฐ ์ํด ์ด๋ป๊ฒ? ๋ผ๋ ์ธก๋ฉด์ ์ค์ ์ ๋๊ณ ํ๋ํ๋ ์ ์ฐจ๋ฅผ ๋ฐ์ผ๋ฉด์ ์งํํ๋ค
๐ ์ ์ธ์ (WHAT?)
- ๊นจ๋ํด์ง ๋ฐฉ์ ๋ชจ์ต์ ์์ํด์ ๊ทธ๋ฆผ์ ๊ทธ๋ฆฐ๋ค
- ๋ก๋ด์๊ฒ ๊ทธ๋ฆผ์ ์ ๋ฌํ๋ค. ๋ง๋ค์ด์ค~ (์ฌ๊ธฐ์ ๋ก๋ด์ ๋ฆฌ์กํธ)
=> ๋ฌด์์ด ๋๋ฉด ๋๋์ง? ์ํ๋ ์ต์ข ์ ์ธ ๊ฒฐ๊ณผ๋ฅผ ์ ์ธํ๋ฉด ๋๋ค
๐ ๋๋ฒ๊น ํ๋ ๊ณผ์
- ์ ์ฐจ์ : ๋ชจ๋ ์ ์ฐจ๋ฅผ ๋์ง์ด๋ณด๋ฉด์ ๋ฌธ์ ๊ฐ ๋ฌด์์ธ์ง ํ์ธํด์ผ ํ๋ค. ํ๋ก๊ทธ๋จ์ด ๋ณต์กํด์ง์๋ก ์ ์ง๋ณด์๊ฐ ์ด๋ ต๋ค
- ์ ์ธ์ : ์ฐ๋ฆฌ๊ฐ ์ ์ธํ ๋ชจ์ต์ด ์ฐ๋ฆฌ๊ฐ ๊ธฐ๋ํ ๋ชจ์ต๊ณผ ์ด๋ป๊ฒ ๋ค๋ฅธ์ง ํ์
์ ํด๋ณด๋ฉด ๋๋ค. ์ฆ, ๋ด๊ฐ ๊ทธ๋ฆฐ ๊ทธ๋ฆผ์ด ๋ด๊ฐ ์ค์ ๊ธฐ๋ํ ๊ทธ๋ฆผ๊ณผ ์ด๋ค ๋ถ๋ถ์ด ๋ค๋ฅธ์ง ํ์ธํ ๋ค์ ๊ทธ ๋ถ๋ถ๋ง ๊ณ ์น๋ฉด ๋๋ค. ๊ทธ๋ ๊ธฐ ๋๋ฌธ์ ์ ์ง๋ณด์๊ฐ ์ฝ๋ค
2) Virtual-dom
virtual-DOM์ ๊ฐ์์ DOM(Document Object Model)์ ๋งํ๋ค. DOM์ HTML ๋ฌธ์๋ฅผ ์ ์ดํ ์ ์๋ API ํธ๋ฆฌ ์๋ฃ๊ตฌ์กฐ๋ค. react์์ ์ฌ์ฉํ๋ ๊ฐ์ DOM ๋ํ ์ค์ DOM์ ๊ธฐ๋ฐํ์ฌ ๋ง๋ค์ด์ง๋ค.
react๊ฐ ๊ฐ์ DOM์ ์ฌ์ฉํ๋ ์ด์ ๋ ๊ฐ์ DOM์ ๋ง๋ค์ด ์ด๋ฒคํธ๊ฐ ์๋ก ๋ฐ์ํ ๋๋ง๋ค ์ค์ DOM๊ณผ ๋น๊ตํ์ฌ ์ต์ํ์ ๋ณ๊ฒฝ์ฌํญ๋ง ๋ฐ์ํ๊ธฐ ์ํจ์ด๋ค. ๋ํ ์ค์ DOM์๋ ๋ธ๋ผ์ฐ์ ๊ฐ ํ๋ฉด์ ํํํ๋๋ฐ ํ์ํ ์ ๋ณด๊ฐ ๋ชจ๋ ๋ค์ด์์ด ์ค์ DOM์ ์ด์ฉํ์ฌ ์์ ์ ํ๊ธฐ์ ๋ฌด๊ฑฐ์ฐ๋ฉฐ ์๋๊ฐ ๋๋ฆฌ๋ค. ๊ทธ๋์ ๊ฐ์ DOM์ ์ด์ฉํด ํจ์จ์ฑ๊ณผ ์๋๋ฅผ ๊ฐ์ ํ ์ ์๋ค.
virtual-DOM์ ๋ฆฌ์กํธ๊ฐ ํ๋ฉด์ ์
๋ฐ์ดํธ ํ๋ ๊ณผ์ ์ ์กฐ๊ธ ๋ ํจ์จ์ ์ผ๋ก ์ํํ๊ธฐ ์ํ ๊ตฌ์กฐ์ด๋ค.
3) Node & NPM
๐ Node๋?
๋ ธ๋๋ ์๋ฐ์คํฌ๋ฆฝํธ ์คํ ํ๊ฒฝ์ด๋ค. ์ฐ๋ฆฌ๊ฐ ์์ฑํ๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ ๋จ์ํ ํ ์คํธ์ ๋ด์ด์ด๋ค. ์ด๋ฌํ ํ ์คํธ๋ค์ด ์ค์ ์๋ฏธ๋ฅผ ๊ฐ์ง๋ ค๋ฉด ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ฝ์ด ์ค์ ๋ก ์คํ์ํค๋ ๋๊ตฌ๋ค์ด ํ์ํ๋ค. ์ด๋ค์ ์๋ฐ์คํฌ๋ฆฝํธ ์คํํ๊ฒฝ์ด๋ผ ๋ถ๋ฅธ๋ค. ๊ฐ์ฅ ์ ๋ช ํ ์คํํ๊ฒฝ์ ๋ธ๋ผ์ฐ์ ์ด๋ค.
์น๊ฐ๋ฐ ์์ฅ์ด ์ ์ ์ปค์ง์ผ๋ก ๋ธ๋ผ์ฐ์ ๊ฐ ์๋ ๋ค๋ฅธ ํ๊ฒฝ์์๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ด์ฉํ ๊ฐ๋ฐ์ ํ๋ ค๋ ๋์ฆ๊ฐ ์๊ฒจ๋ฌ๊ณ ์ด๋ฐ ๋์ฆ์์์ ํ์ํ๊ฒ์ด ๋ ธ๋์ด๋ค. ๋ ธํธ๋ ๋ธ๋ผ์ฐ์ ๋ฐ๊นฅ์์๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์คํํ ์์๋๋ก ๋ง๋ค์ด์ฃผ๋ ์๋ฐ์คํฌ๋ฆฝํธ ์คํํ๊ฒฝ์ด๋ค.
์ฐ๋ฆฌ๋ ์ ๋ ธ๋๋ฅผ ์์์ผ ํ๊ณ ํ์๋ก ํ ๊น?
- ์ฐ๋ฆฌ๋ ๋ฆฌ์กํธ๋ฅผ ์ด์ฉํด์ ํ๋ก์ ํธ๋ฅผ ๋ง๋ ๋ค. ๊ทธ๋ฐ๋ฐ ์ฐ๋ฆฌ๊ฐ ํ๋ก์ ํธ๋ฅผ ์งํํ ๋๋ ์ค์ ์น๋ธ๋ผ์ฐ์ ์์์ ์์ ์ ํ๋ ๊ฒ์ด ์๋๋ผ ์ฐ๋ฆฌ์ ์ปดํจํฐ ์์์ ์์ ์ ํ๋ค. ์ด ๋ ๋ฆฌ์กํธ๋ฅผ ๊ตฌ์ฑํ๊ธฐ ์ํด์๋ ๋ฆฌ์กํธ์ ๊ทธ ์ธ์ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๊ตฌ์ฑ๋ ์ฌ๋ฌ ํจํค์ง๋ค์ ํ์๋ก ํ๋ค.
- ์ค์ ๋ก ๋ฆฌ์กํธ๋ UI๋ฅผ ๊ตฌ์ฑํ ๋ ํ์, ์ต์ ์ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฌธ๋ฒ์ ๋ชจ๋ ๋ธ๋ผ์ฐ์ ๊ฐ ์ฝ๊ณ ํด์ํ ์ ์๋ ๊ณผ๊ฑฐ์ ๋ฌธ๋ฒ์ผ๋ก ๋ณํ์์ผ์ฃผ๋ Babel, ์์ฑํ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ ๋ถ์ํ์ฌ ๋ถํ ํ๊ณ ํฉ์ณ์ฃผ๋ ์ญํ ์ ํ๋ WebPack ๋ํ ํ์ํ๋ค.
- ์ด ์ธ์๋ ์๋ง์ ํจํค์ง๋ค์ด ํ๋ก์ ํธ๋ฅผ ์ํ ํ๊ฒ ์งํํ๊ธฐ ์ํด์ ์๊ตฌ๋๋ค. ์ด๋ฐ ์ฌ๋ฌ ํจํค์ง๋ค์ ์์
ํ๊ฒฝ์ธ ์ปดํจํฐ๋ฅผ ๋๋ฆฌ๊ธฐ ์ํด์ ์ฐ๋ฆฌ์ ์ปดํจํฐ์์๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์คํํ ์ ์๋ ๋
ธ๋๋ฅผ ์ค์นํด์ผ ํ๋ค.
๐ NPM์ด๋?
NPM์ Node Package Manager์ ์ฝ์ด์ด๋ค. ์ฌ๊ธฐ์ ๋งํ๋ ํจํค์ง๋ ๋ฌด์จ ์๋ฏธ์ผ๊น?
ํจํค์ง๋ ๋ ธ๋๋ก ์คํํ ์ ์๋ ํ๋ํ๋์ ํ๋ก๊ทธ๋จ์ด๋ค. ์ฐ๋ฆฌ๊ฐ ๋ฐฐ์ฐ๋ ๋ฆฌ์กํธ, ์์์ ์ธ๊ธํ Babel, WebPack ํจํค์ง์ด๋ค. ๊ฒฐ๊ณผ์ ์ผ๋ก ๋ ธ๋๋ฅผ ์คํํ ์ ์๋ ์ฌ๋ฌ ํจํค์ง๋ค์ ๋ค์ด๋ก๋ ๋ฐ๊ณ , ์ ๋ฐ์ดํธ ํ๊ณ ์ญ์ ํ ์ ์๋ ๋งค๋์ ์ ์ญํ ์ ํ๋ ๋๊ตฌ๊ฐ ๋ฐ๋ก NPM์ด๋ค.
4) CRA
Create React App์ ์ฝ์ด์ด๋ค. CRA๋ ๋ฆฌ์กํธ ํ๋ก์ ํธ๋ฅผ ์์ํ๋๋ฐ ํ์ํ ๊ฐ๋ฐ ํ๊ฒฝ์ ์ธํ ํด์ฃผ๋ ๋๊ตฌ์ด๋ค.(toolchain) ๊ทธ๋ ๋ค๋ฉด ์ฐ๋ฆฌ๋ ์ CRA๋ฅผ ํ์๋ก ํ ๊น?
- ๋ฆฌ์กํธ๋ UI ๊ธฐ๋ฅ๋ง์ ์ ๊ณตํ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค. ๊ทธ๋ฌ๋ ์ค์ ์จ์ ํ ์น์ฌ์ดํธ๋ฅผ ๊ตฌ์ถํ๊ธฐ ์ํด์๋ UI ๊ตฌ์ฑ ์ธ์๋ ์ฌ๋ฌ๊ฐ์ง ๋ค๋ฅธ ๋๊ตฌ๋ค์ด ํ์ํ๋ค. ๊ทธ๋์ ๋ฆฌ์กํธ๋ก ํ๋ก์ ํธ๋ฅผ ์งํํ๊ธฐ ์ํด์๋ ํ์ํ ๋๊ตฌ๋ค์ toolchain์ด๋ผ๊ณ ๋ถ๋ฅธ๋ค
- CRA๋ ๋ฆฌ์กํธ๋ก ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋ค๊ธฐ ์ํ ํ๊ฒฝ์ ์ ๊ณตํ๋ค.
- CRA๋ฅผ ์ด์ฉํ๋ฉด ํ๋์ ๋ช ๋ น์ด๋ก ๋ฆฌ์กํธ ๊ฐ๋ฐํ๊ฒฝ ๊ตฌ์ถ์ด ๊ฐ๋ฅํ๋ค.
nax create-react-app
5) Component
Component๋ ์ฌ์ฌ์ฉ์ด ๊ฐ๋ฅํ UI ๊ตฌ์ฑ ๋จ์์ด๋ค. Component๋ฅผ ์ฌ์ฉํ์ ๋ ์ฌ๋ฌ ์ฅ์ ์ด ๋ฐ์ํ๋๋ฐ ์๋๋ฅผ ์ดํด๋ณด์
- ์ฝ๋ ์ฌํ์ฉ์ฑ ์ฆ๊ฐ -> ์ฐ๋ฆฌ๊ฐ ์ปดํฌ๋ํธ ํ๋๋ฅผ ๋ง๋ค์ด ๊ณ์ํด์ ์ฌ์ฌ์ฉํ๊ณ ์๋ค๋ ๊ฒ์ ์๋ฏธํ๋ค
- ์ฝ๋ ์ ์ง๋ณด์๊ฐ ์ฉ์ดํด์ง๋ค. ๋ง์ฝ ๋ฐฑ๊ฐ์ ํํ๋ฅผ ๋ณ๊ฒฝํด์ผํ๋ค๋ ๊ฐ์ ํ์, ํ๋์ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ๋ค๋ฉด ์๋ณธ์ด ๋๋ ์ปดํฌ๋ํธ ๊ตฌ์ฑ๋ง ๋ฐ๊พธ๋ฉด ๋ชจ๋๊ฐ ๋ฐ๋๋ค.
- ํด๋น ํ์ด์ง๊ฐ ์ด๋ป๊ฒ ๊ตฌ์ฑ๋์๋์ง ํ์ ํ๊ธฐ ์ฝ๋ค.
- ์ปดํฌ๋ํธ๋ ๋จ์ผ ๊ฐ๋ ์ด ์๋๋. ๋ ๋ค๋ฅธ ์ปดํฌ๋ํธ๋ฅผ ํฌํจํ๋ค(๋ถ๋ชจ ์ปดํฌ๋ํธ - ์์ ์ปดํฌ๋ํธ)
6) JSX
JavaScript Syntax Extension์ ์ฝ์ด์ด๋ค. ๋ง ๊ทธ๋๋ก ์๋ฐ์คํฌ๋ฆฝํธ ํ์ฅ ๋ฌธ๋ฒ์ด๋ค. ํํ๋ ์๋ฐ์คํฌ๋ฆฝํธ์ html์ ํฉ์ณ๋์ ๋ฏํ ๋ฌธ๋ฒ์ด๋ค. ๋ํ ๋งํฌ์ ์ ํธ๋ฆฌํ๊ฒ ์์ฑํ๊ธฐ ์ํ ๋ฌธ๋ฒ์ด๋ฉฐ JSX๋ก ์์ฑํ ์ฝ๋๋ ์ค์ ์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ์ธ์ํ ์ ์๋ ๋ฌธ๋ฒ์ด๊ธฐ์ Babel์ด๋ผ๋ ํจํค์ง๋ฅผ ์ด์ฉํด์ ๋ณํํด์ค์ผ ํ๋ค. ์๋ ํน์ง๊ณผ ์ฅ์ ์ ํจ๊ป ์ดํด๋ณด์.
ํน์ง
- ๋ชจ๋ ํ๊ทธ๋ค์ ํ๋์ ๋ถ๋ชจํ๊ทธ๋ก ๊ฐ์ธ์ ธ ์์ด์ผ ํ๋ค.
- ๋ชจ๋ ํ๊ทธ๊ฐ ์ ํ ํด๋ก์ง์ด ๊ฐ๋ฅํ๋ค.
- ๋ชจ๋ property๋ค์ camelCase๋ก ์ฌ์ฉํด์ผ ํ๋ค.
- ์๋ฐ์คํฌ๋ฆฝํธ ๋์์ด ๊ฐ๋ฅํ๋ค.
์ฅ์
- HTML ํ๊ทธ๋ฅผ ๊ทธ๋๋ก ์ฌ์ฉํ๊ธฐ ๋๋ฌธ์ ์ฌ์ฉ๊ฐ์ด ์ต์ํ๋ค.
- HTML ๋งํฌ์ ๊ณผ ์๋ฐ์คํฌ๋ฆฝํธ ๋ก์ง์ ๊ฐ์ด ๊ตฌํํ ์ ์๋ค
- ์๋ฐ์คํฌ๋ฆฝํธ ๋ฌธ๋ฒ์ ์ด์ฉํด์ HTML์ ์์ฑํ ์ ์๋ค. ๋ณ๋์ HTML ํ์ผ์ด ํ์ํ์ง ์๋ค.
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ([React] ๐ React.js๋?), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@niboo/React-React.js๋์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ
์ธ ๋ฐ๊ฒฌ์ ์ ๋
(Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค