React 1๏ธโฃ
What is React?
๋ฆฌ์กํธ๋ ์ ์ธํ, ์ปดํฌ๋ํธ ๊ธฐ๋ฐ์ JavaScript ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก UI๋ฅผ ๋ง๋ค๊ธฐ ์ํด ์ฌ์ฉ๋๋ค.
JSX๋ผ๋ ๋ฌธ๋ฒ์ ์ฌ์ฉํด SPA๋ฅผ ๊ฐ๋ฐํ ์ ์๊ณ , CSR๋ก ์๋ํ๋ค.
Declarative vs Imperative
๋ฆฌ์กํธ๋ ์ ์ธํ ํ๋ก๊ทธ๋๋ฐ์ด๋ค. ๊ทธ๋์ ์ ์ธํ์ด ๋ญ๋ฐ..?! ๐ค
์ ์ธํ์ ๋ฌด์์ ํ ๊ฒ์ธ์ง์ ํฌ์ปค์ค๋ฅผ ๋ ํ๋ก๊ทธ๋๋ฐ ๋ฐฉ๋ฒ์ด๋ค.
๋ฐ๋ฉด์ ์ ์ธํ์ ๋ฐ๋์ธ ๋ช ๋ นํ์ ์ด๋ป๊ฒ ํ ๊ฒ์ธ์ง์ ์ค์ ์ ๋๊ณ ์๋ค.
์ ์ธํ์ ๋ฌด์์๊ณผ ๋ช ๋ นํ์ ์ด๋ป๊ฒ๋ฅผ ์ค์ํ์์ ๋น๋์ด ์ด์ผ๊ธฐ ํด๋ณด์๋ฉด,
๋ง์๋ ๋ผ๋ฉด ๐์ ๋จน๋๋ค๊ณ ๊ฐ์ ํ ๋ ์๋์ ๊ฐ์ ์ฐจ์ด๋ฅผ ๋ณด์ธ๋ค๊ณ ํ ์ ์๊ฒ ๋ค..
์ ์ธํ (๋ฌด์์ ๐ค) | ์ปต๋ผ๋ฉด์ ๋จน์๋! |
๋ช ๋ นํ (์ด๋ป๊ฒ ๐) | ๋๊ป ํํ์ ์ฉ๊ธฐ๋ฅผ ๊ฐ์ง ๋ผ๋ฉด์ ๋๊ป์ ์ ๊ฑฐํ ๋ค, ๋์ธ ๋ฌผ์ ๋ถ๊ณ , 4๋ถ๊ฐ ๊ธฐ๋ค๋ฆฐ ๋ค ๋จน์๋! |
์ ์ธํ๋ ์ปต๋ผ๋ฉด์ ๋จน๊ธฐ ์ํด์๋ ๋ช ๋ นํ์ ๊ณผ์ ์ ๊ฑฐ์ณ์ผ ํ์ง๋ง, ์ด๋ป๊ฒ๋ฅผ ํ๊ธฐ ์ํ ์ผ๋ จ์ ๊ณผ์ ์ ์ถ์ํํ๋ฉด ๋๋ค.
์ด๋ค ์ปต๋ผ๋ฉด์ด๋ ๋๊ป ์ด๊ณ , ๋์ธ ๋ฌผ ๋ถ๊ณ , 4๋ถ ๊ธฐ๋ค๋ฆฌ๊ณ ๋จน๋ ๊ณผ์ ์ ๋ค ๋๊ฐ์ผ๋๊น ๋ง์ด๋ค..ใ ใ
์ด๊ฑธ ์ฝ๋๋ก ์ฎ๊ฒจ๋ณด์.
๋๋ ์ํผ์น
๋ผ๋ ํ
์คํธ๋ฅผ ๊ฐ์ง h1
ํ๊ทธ๋ฅผ ํ๋ฉด์ ์ถ๋ ฅํ๊ณ ์ถ๋ค.
์ ์ธํ (๋ฌด์์ ๐ค)
const shoupeach = () => {
return (
<h1>์ํผ์น</h1>
)
}
JSX ๋ฌธ๋ฒ์ผ๋ก ์ํผ์น
๋ผ๋ ํ
์คํธ๋ฅผ ๊ฐ์ง h1
ํ๊ทธ๋ฅผ ํํํด๋ณด์๋ค.
<h1>์ํผ์น</h1>
๋ฅผ ํตํด ์ ์ธํ ํ๋ก๊ทธ๋๋ฐ์์ ํ์ธํ ์ ์๋ค!
๋ช ๋ นํ (์ด๋ป๊ฒ ๐)
const h1 = document.createElement('h1');
const text = document.createTextNode('์ํผ์น');
h1.appendChild(text);
JavaScript ๋ฌธ๋ฒ์ผ๋ก ์ํผ์น
๋ผ๋ ํ
์คํธ๋ฅผ ๊ฐ์ง h1
ํ๊ทธ๋ฅผ ํํํด๋ณด์๋ค.
h1
์ธ ์์๋ฅผ ์์ฑํ๊ณ , ์ํผ์น
๋ผ๋ ์์๋ฅผ ์์ฑํ ๋ค, h1
์ ์ํผ์น
๋ฅผ ์ถ๊ฐํด์ฃผ์๋ค.
์ด๋ ๊ฒ ์ ์ฐจ๋ฅผ ๋ฐ๋ฅด๋ ๊ฒ์ ํตํด ๋ช ๋ นํ ํ๋ก๊ทธ๋๋ฐ์์ ํ์ธํ ์ ์๋ค!
ํ์คํ ๋ช ๋ นํ ํ๋ก๊ทธ๋๋ฐ๋ณด๋ค ์ ์ธํ ํ๋ก๊ทธ๋๋ฐ์ด ๋ ์ง๊ด์ ์ด๊ณ ๊ฐ๊ฒฐํจ์ ์ ์ ์๋ค. ๐
Component
๋ฆฌ์กํธ๋ ์ปดํฌ๋ํธ ๊ธฐ๋ฐ์ ํ๋ก๊ทธ๋๋ฐ์ด๋ค.
์ปดํฌ๋ํธ๋, ์ฌ์ฌ์ฉ์ด ๊ฐ๋ฅํ ๊ฐ๊ฐ์ ๋ ๋ฆฝ๋ ๋ชจ๋์ ๋ปํ๋ค.
์ค์ํ ๊ฒ์ ์ฌ์ฌ์ฉ์ ํ ๋ ๊ฐ์ ์ฌ์ฌ์ฉํ๋ ๊ฒ์ด ์๋๋ผ ์ปดํฌ๋ํธ ๋ด๋ถ์ ๋ก์ง์ ์ฌ์ฌ์ฉํ๋ค๋ ๊ฒ์ด๋ค!
ํ์ฌ ๋ด ๋ธ๋ก๊ทธ์ ์คํจ์ ๊ธฐ์ค์ผ๋ก ์๊ฐํ๋ค๋ฉด,
๋ธ๋ก๊ทธ์ ๋ฉ์ธ์์ ๋ค์๊ณผ ๊ฐ์ ๋ชฉ๋ก์ด ์ถ๋ ฅ๋๋ค.
๊ฐ ํฌ์คํธ์ ๋ชฉ๋ก๋ค์ ๋๊ฐ์ ๊ตฌ์กฐ๋ฅผ ๊ฐ์ง๊ณ ์๋ค.
- ํฌ์คํธ ๋ชฉ๋ก ์์ฒด
- ๋ํ ์ด๋ฏธ์ง
- ์ ๋ชฉ
- ๋ถ๊ฐ์ ์ธ ์ ๋ณด๋ค
- ๋ณธ๋ฌธ
์ด๋ ๊ฒ ์ฌ์ฌ์ฉ์ด ๊ฐ๋ฅํ ๋จ์๋ก ๋ฌถ์ด๋ ๊ฒ์ ์ปดํฌ๋ํธ๋ผ๊ณ ํ๋ค.
์์ ์์์์ ๋ถ๊ฐ์ ๋ณด์๋ ์นดํ ๊ณ ๋ฆฌ, ์์ฑ์ผ์, ๋๊ธ์๋ ๋์ผํ ์ ๋ณด๋ฅผ ๋ด๊ณ ์๊ธฐ ๋๋ฌธ์ ์ปดํฌ๋ํธํ ์ํฌ ์ ์์ ๊ฒ์ด๋ค. ๐
์ ๋ฆฌ
1. ๋ฆฌ์กํธ๋ JavaScript ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค.
2. ๋ฆฌ์กํธ๋ ๋ฌด์์ ํํํ ๊ฒ์ธ์ง ์์ฑํ๋ ์ ์ธํ ํ๋ก๊ทธ๋๋ฐ์ด๋ค.
3. ๋ฆฌ์กํธ๋ ์ฌ์ฌ์ฉ์ด ๊ฐ๋ฅํ ๋จ์ ๊ตฌ์กฐ๋ก ๋ฌถ๋ ์ปดํฌ๋ํธ ๊ธฐ๋ฐ์ด๋ค.