ํ๊ตญ์ด ๋ง์ถค๋ฒ์์๋ ์์ (colon, ์ฝ๋ก )์ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ๋ฅผ ๊ท์ ํ๊ณ ์๋๋ฐ ํญ๋ชฉ์ ์ด๊ฑฐ๋ ํฌ๊ณก ๋์ฌ ๋ฑ์์๋ง ์ ํ์ ์ผ๋ก ์ฌ์ฉํฉ๋๋ค(์ฐธ๊ณ ). ํนํ ์์ด์ฒ๋ผ ๋ฌธ์ฅ ๋์ ์์ ์ ๋ถ์ด๋ ๊ฒฝ์ฐ๋ ์์ผ๋ฏ๋ก ์ฃผ์ํ์ธ์.
๐๋ชจ๋ฒ ์ฌ๋ก
๋ค์ ์์๋ฅผ ๋ณด์ธ์.
๐์๋ชป๋ ์ฌ๋ก
๋ค์ ์์๋ฅผ ๋ณด์ธ์:
์กด์นญ์ ํํํ๋ '-์-'๋ ๋ฌธ์ฅ์ ๊ฐ๊ฒฐํจ์ ํด์น ์ ์์ต๋๋ค. ~ํ์ธ์์ฒ๋ผ ์ ํ์ ์ธ ๊ฒฝ์ฐ์๋ง ์ฌ์ฉํ๊ณ ๊ทธ ์ธ์๋ ์ฌ์ฉํ์ง ์๋ ํธ์ด ์ข์ต๋๋ค. ๋ค๋ง, ์์
์๋ค๋ผ๋ฆฌ ๋ํํ ๋๋ ์กด์ค์ ์๋ฏธ์์ ์ฌ์ฉํด๋ ์๊ด์์ต๋๋ค.
๐๋ชจ๋ฒ ์ฌ๋ก
์ดํด๋ณด๋ฉด ์ข์ต๋๋ค.
๐๋ชจ๋ฒ ์ฌ๋ก
์ดํด๋ณด์ธ์.
๐์๋ชป๋ ์ฌ๋ก
์ดํด๋ณด์๋ฉด ์ข์ต๋๋ค.
์์ด์ ์ฐ๋ฆฌ๋ง์์ ์ผํ๋ฅผ ์ฌ์ฉํ๋ ์ฌ๋ก๊ฐ ๋ค๋ฆ ๋๋ค. ์ฐ๋ฆฌ๋ง์์ ์ผํ๋ฅผ ์ฌ์ฉํ๋ ๋ช ๊ฐ์ง ๊ฒฝ์ฐ๋ ๋ง์ถค๋ฒ์ ๊ท์ ๋์ด ์์ต๋๋ค. ๊ผญ ํ์ํ ๋๋ง ์ฌ์ฉํ๊ณ ๊ทธ ์ธ์๋ ์ ํํ๋ ํธ์ด ์ข์ ๊ฒ ๊ฐ์ต๋๋ค.
๐ฌ๐ง For example, if `id` is the row ID, either of the following would work
๐๋ชจ๋ฒ ์ฌ๋ก
์๋ฅผ ๋ค์ด `id`๊ฐ ํ์ ID์ผ ๊ฒฝ์ฐ ๋ค์ ์ฝ๋๊ฐ ๋ชจ๋ ์๋ํฉ๋๋ค.
๐์๋ชป๋ ์ฌ๋ก
์๋ฅผ ๋ค์ด, `id`๊ฐ ํ์ ID์ผ ๊ฒฝ์ฐ ๋ค์ ์ฝ๋๊ฐ ๋ชจ๋ ์๋ํฉ๋๋ค.
render๋ bind์ฒ๋ผ ์ฐ๋ฆฌ๋ง ๋ฒ์ญ์ด ์๊ณ ์๋ฌธ์ ์๋ง ๋ฐ์ ์ฐ๋ ๋์ฌ๋ ๋ช
์ฌํ + ~ํ๋ค๋ก ๋ฒ์ญํ๋ ๊ฒ ์ข์ต๋๋ค.
๐ฌ๐ง React renders DOM elements.
๐๋ชจ๋ฒ ์ฌ๋ก
React๋ DOM ์๋ฆฌ๋จผํธ๋ฅผ ๋ ๋๋งํฉ๋๋ค.
๐์๋ชป๋ ์ฌ๋ก
React๋ DOM ์๋ฆฌ๋จผํธ๋ฅผ ๋ ๋ํฉ๋๋ค.
๐๋ชจ๋ฒ ์ฌ๋ก
ํจ์๋ฅผ ๋ฐ์ธ๋ฉํด์ผ ํฉ๋๋ค.
์์ฃผ ๊ฐ๋ ๊ผญ ํ์ํ ๋๊ฐ ์๊ธฐ๋ ํ์ง๋ง ์์ด ํํ์ ๋ง์ ๋น์ ์ด๋ ์ฌ๋ฌ๋ถ, ์ฐ๋ฆฌ๊ฐ์ ํํ์ ์ ์ฐ๋ ๊ฒ ํจ์ฌ ์์ฐ์ค๋ฝ์ต๋๋ค.
๐ฌ๐ง Let's say you want to output "Hello, world" in a DOM element.
๐๋ชจ๋ฒ ์ฌ๋ก
DOM ์๋ฆฌ๋จผํธ์ "Hello, World"๋ฅผ ํํํ๋ค๊ณ ์๊ฐํด๋ด
์๋ค.
๐์๋ชป๋ ์ฌ๋ก
๋น์ ์ด DOM ์๋ฆฌ๋จผํธ์ "Hello, World"๋ฅผ ํํํ๊ณ ์ถ๋ค๊ณ ์๊ฐํด๋ด
์๋ค.
์ฌ์ค ์์น๋๋ก๋ผ๋ฉด ~๋๋ค๊ฐ์ ์๋ํ๋ ๊ฐ๋ฅํ๋ฉด ์ต์ ํ๋ ํธ์ด ์ข์ง๋ง ์ค์ ๋ก ์์
์ ํ๋ค ๋ณด๋ฉด ์จ์ผ ๋ฌธ์ฅ์ด ์์ฐ์ค๋ฌ์ธ ๋๋ ์์ต๋๋ค. ๋ค๋ง ๋ณด์ฌ์ง๋ค, ์๊ฐ๋๋ค์ ๊ฐ์ ๋ถํ์ํ ํผ๋ํ ๋ฌธ์ฅ์ ์์ ํ๋ ํธ์ด ์ข์ต๋๋ค.
๐ฌ๐ง Elements appeared on the screen.
๐๋ชจ๋ฒ ์ฌ๋ก
ํ๋ฉด์ ๋ณด์ด๋ ์๋ฆฌ๋จผํธ.
๐์๋ชป๋ ์ฌ๋ก
ํ๋ฉด์ ๋ณด์ฌ์ง๋ ์๋ฆฌ๋จผํธ.
๋ฒ์ญ๋ฌธ์์ ํํ ๋ํ๋๋ ๋ฌธ์ ๊ฐ ์์ด ๋จ์ด๋ฅผ 1:1๋ก ๋ฒ์ญํ๋ค ๋ณด๋ ํํ์ด ๋จ์กฐ๋ก์์ง๋ค๋ ์ ์
๋๋ค. ์๋ฅผ ๋ค์ด common์ ์ผ๋ฐ์ ์ผ๋ก๋ผ๊ณ ๋ง ๋ฒ์ญํ๋ค๊ฑฐ๋ call์ ํธ์ถํ๋ค๋ผ๊ณ ๋ง ๋ฒ์ญํ๋ ์ฌ๋ก๊ฐ ๋ง์ต๋๋ค. ๊ฐ๊น์ด ์์น์์ ๋๊ฐ์ ํํ์ด ์ฌ๋ฌ ์ฐจ๋ก ๋ฑ์ฅํ ๋ ์กฐ๊ธ์ฉ ํํ์ ๋ฐ๊พธ์ด์ฃผ๋ฉด ๋ฌธ์ฅ์ด ๋ ์ฝ๊ธฐ ์ข์์ง๋๋ค. common์ด๋ commonly๋ ์ผ๋ฐ์ ์ผ๋ก, ๋๋ฆฌ, ํํ ๋ฑ์ผ๋ก ๋ฐ๊ฟ ์ ์๊ณ call, invoke ๋ฑ์ ํธ์ถํ๋ค, ์คํํ๋ค ๋ฑ์ผ๋ก ๋ฐ๊ฟ ์ ์์ต๋๋ค.
๐๋ชจ๋ฒ ์ฌ๋ก
์ด๋ ํํ ์ฌ์ฉ๋๋ ํจํด์ ์ผ๋ฐ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์ฒด๋ฅผ ์ ๋ฌํ๋ ๊ฒ์ด๋ค.
๐์๋ชป๋ ์ฌ๋ก
์ด๋ ์ผ๋ฐ์ ์ผ๋ก ์ฌ์ฉ๋๋ ํจํด์ ์ผ๋ฐ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์ฒด๋ฅผ ์ ๋ฌํ๋ ๊ฒ์ด๋ค.
์๋ ์ฐ๋ฆฌ๋ง์์๋ ~๋ค์ด๋ผ๋ ๋ณต์ํ ํํ์ ๊ทธ๋ฆฌ ๋๋ฆฌ ์ฌ์ฉํ์ง ์์ต๋๋ค. ๋ฌผ๋ก ๋ฌธ์ฅ์ ์๋ฏธ์ ๋ฐ๋ผ ๋ฐ๋์ ๋ณต์์ ๊ฐ์ฒด์์ ๋ช
์ํด์ผ ํ ๋๊ฐ ์๊ธด ํ์ง๋ง, ๊ทธ ์ธ์ ๊ฒฝ์ฐ๋ผ๋ฉด ๋จ์ํ์ผ๋ก ํํํ๋ ํธ์ด ๋์ฒด๋ก ์์ฐ์ค๋ฝ์ต๋๋ค.
๐ฌ๐ง The examples below demonstrate the differences.
๐๋ชจ๋ฒ ์ฌ๋ก
์๋ ์์๋ ์์์ ์ธ๊ธํ ์ฐจ์ด์ ์ ๋ณด์ฌ์ค๋๋ค.
๐๋ชจ๋ฒ ์ฌ๋ก - ๋ณต์ํ ํํ์ด ํ์ํ ๊ฒฝ์ฐ
์๋ ์์๋ ์์์ ์ธ๊ธํ ์ฌ๋ฌ ์ฐจ์ด์ ์ ๋ณด์ฌ์ค๋๋ค.
๐์๋ชป๋ ์ฌ๋ก
์๋ ์์๋ค์ ์์์ ์ธ๊ธํ ์ฐจ์ด์ ๋ค์ ๋ณด์ฌ์ค๋๋ค.
If๋ก ์์ํ๋ ๋ฌธ์ฅ์ ๋ฒ์ญ์ด ํญ์ ๋ง์ฝ์ผ๋ก ์์ํ ํ์๋ ์์ต๋๋ค. ํ๋ฆฐ ๋ฒ์ญ์ ์๋์ง๋ง ํ๊ตญ์ด์์๋ ~ํ๋ค๋ฉด์ด๋ผ๋ ์ด๋ฏธ๊ฐ ์ด๋ฏธ ์กฐ๊ฑด ๋๋ ์ํฉ์ ๊ฐ์ ์ ์๋ฏธํ๋ฏ๋ก ๋๋ก๋ ๋ง์ฝ์ด ์์ด๋ ์ถฉ๋ถํ ๋ง์ด ๋ฉ๋๋ค. ์๋ ์์๋ ์ธ์ ํ ๋ ๋ฌธ์ฅ์ด ๋ชจ๋ ๋ง์ฝ์ผ๋ก ์์ํ๊ณ ์์์ต๋๋ค. ํ ๋ฌธ์ฅ ๋ง์ด๋ผ๋ ๋ง์ฝ์ ์๋ตํ๋ฉด ์กฐ๊ธ ๋ ์ฝ๊ธฐ ์์ํด์ง๋๋ค.
๐ฌ๐งIf you load React from a `<script>` tag, .... If you use ES6 with npm, ...
๐๋ชจ๋ฒ ์ฌ๋ก
React๋ฅผ <script> ํ๊ทธ๋ก ๋ถ๋ฌ์จ๋ค๋ฉด ... ES6์ npm์ ํจ๊ป ์ฌ์ฉํ๋ค๋ฉด ...
๐์๋ชป๋ ์ฌ๋ก
๋ง์ฝ React๋ฅผ <script> ํ๊ทธ๋ก ๋ถ๋ฌ์จ๋ค๋ฉด ... ๋ง์ฝ ES6์ npm์ ํจ๊ป ์ฌ์ฉํ๋ค๋ฉด ...