์นดํ์์ ์์ ์์ ๊ฐํน git ๋ช ๋ น์ด ์คํ์ ํ ๊ฒฝ์ฐ ๋์ํ์ง ์์ ๐จ์ฒ์์๋ ssh key ๋ฌธ์ ์ธ ๊ฒ ๊ฐ์ ์ญ์ ํ๊ณ ์๋ก ์ธํ ํด๋ณด์์ผ๋ ํด๊ฒฐ์ด ๋์ง ์์๋ค.stackoverflow ๋ต๋ณ๊ธ(https://stackoverflow.com/questions/7
Hooks ๋ฆฌ์กํธ v16.8์ ์๋ก ๋์ ๋ ๊ธฐ๋ฅ์ผ๋ก ํจ์ํ ์ปดํฌ๋ํธ์์๋ ์ํ ๊ด๋ฆฌ๋ฅผ ํ ์ ์์ต๋๋ค. useState ๊ฐ์ฅ ๊ธฐ๋ณธ์ ์ธ hooks์ด๋ฉฐ, ํจ์ํ ์ปดํฌ๋ํธ์์๋ ๊ฐ๋ณ์ ์ธ ์ํ๋ฅผ ์ง๋ ์ ์๊ฒ ํด์ค๋๋ค. useEffect ์ปดํฌ๋ํธ๊ฐ ๋ ๋๋ง๋ ๋๋ง๋ค ํน์
๋ชจ๋ ๋ฆฌ์กํธ ์ปดํฌ๋ํธ์๋ ๋ผ์ดํ ์ฌ์ดํด(์๋ช ์ฃผ๊ธฐ)์ด ์กด์ฌํฉ๋๋ค.ํด๋์คํ ์ปดํฌ๋ํธ์์๋ง ์ฌ์ฉ์ด ๊ฐ๋ฅํ๊ณ , ํจ์ํ ์ปดํฌ๋ํธ์์๋ Hooks ๊ธฐ๋ฅ์ ์ฌ์ฉํ์ฌ ๋น์ทํ ์์ ์ ์ฒ๋ฆฌํ ์ ์์ต๋๋ค.๋ฉ์๋์ ์ข ๋ฅ๋ ์ด 9๊ฐ์ง ์ ๋๋ค.Will~ ์ ๋์ฌ ๋ฉ์๋ : ์ด๋ค ์์ ์ ์๋ํ
์๋ฐ์คํฌ๋ฆฝํธ ๋ฐฐ์ด ๊ฐ์ฒด์ ๋ด์ฅ ํจ์์ธ map ํจ์๋ฅผ ์ฌ์ฉํ์ฌ ๋ฐ๋ณต๋๋ ์ปดํฌ๋ํธ๋ฅผ ๋ ๋๋งํ ์ ์์ต๋๋ค.map() ํจ์ ๋ ํผ๋ฐ์คkey๋ ์ปดํฌ๋ํธ ๋ฐฐ์ด์ ๋ ๋๋งํ์ ๋ ์ด๋ค ์์์ ๋ณ๋์ด ์์๋์ง ์์๋ด๋ ค๊ณ ์ฌ์ฉํฉ๋๋ค.key ๊ฐ์ ์ค์ ํ ๋๋ map ํจ์์ ์ธ์๋ก ์ ๋ฌ๋๋
ref(Referene) ๊ฐ๋ ์ ๋ฆฌ์กํธ ๋ด๋ถ์์ DOM์ ์ด๋ฆ์ ๋ค๋ ๋ฐฉ๋ฒ์ ๋๋ค.DOM์ ์ง์ ๊ฑด๋๋ ค์ผ ํ ๋ ์ฌ์ฉํฉ๋๋ค.ํน์ input์ ํฌ์ปค์ค ์ฃผ๊ธฐ์คํฌ๋กค ๋ฐ์ค ์กฐ์ํ๊ธฐCanvas ์์์ ๊ทธ๋ฆผ ๊ทธ๋ฆฌ๊ธฐ ๋ฑref๋ฅผ ๋ฌ๊ณ ์ ํ๋ ์์์ ref๋ผ๋ ์ฝ๋ฐฑ ํจ์๋ฅผ props๋ก
์ฌ์ฉ์๊ฐ ๋ธ๋ผ์ฐ์ ์์ DOM ์์๋ค๊ณผ ์ํธ์์ฉํ๋ ๊ฒ์ ์ด๋ฒคํธ๋ผ๊ณ ํฉ๋๋ค.HTML ์ด๋ฒคํธ์ ์ธํฐํ์ด์ค๊ฐ ๋์ผํ๊ธฐ ๋๋ฌธ์ ์ฌ์ฉ๋ฒ์ด ๋น์ทํฉ๋๋ค.์ด๋ฒคํธ ์ด๋ฆ์ ์นด๋ฉ ํ๊ธฐ๋ฒ์ผ๋ก ์์ฑํ๋ค.์ด๋ฒคํธ์ ํจ์ ํํ์ ๊ฐ์ ์ ๋ฌํฉ๋๋ค.DOM ์์์๋ง ์ด๋ฒคํธ๋ฅผ ์ค์ ํ ์ ์์ต๋๋ค.๊ฐ๋ ์ฑ์
์๋ฐ์คํฌ๋ฆฝํธ์ ํ์ฅ ๋ฌธ๋ฒ์ด๋ฉฐ, XML๊ณผ ๋งค์ฐ ๋น์ทํ๊ฒ ์๊ฒผ์ต๋๋ค.ํจ์ํ๊ณผ์ ์ฐจ์ด์ ์ state ๊ธฐ๋ฅ ๋ฐ ๋ผ์ดํ ์ฌ์ดํด ๊ธฐ๋ฅ์ ์ฌ์ฉํ ์ ์๊ณ , ์์ ๋ฉ์๋๋ฅผ ์ ์ํ ์ ์์ต๋๋ค. ํด๋์คํ ์ปดํฌ๋ํธ๋ render ํจ์๊ฐ ๊ผญ ์์ด์ผ ํ๊ณ , ๊ทธ ์์์ ๋ณด์ฌ ์ฃผ์ด์ผ ํ JSX
JSX ์๋ฐ์คํฌ๋ฆฝํธ์ ํ์ฅ ๋ฌธ๋ฒ์ด๋ฉฐ, XML๊ณผ ๋งค์ฐ ๋น์ทํ๊ฒ ์๊ฒผ์ต๋๋ค. ์ฅ์ ๋ณด๊ธฐ ์ฝ๊ณ ์ต์ํ๋ค. ํ์ฉ๋๊ฐ ๋๋ค. > import React from 'react'; > import React from 'react';
brew๋ฅผ ํตํด node.js์ yarn์ ์ค์นvscode์ ํฐ๋ฏธ๋์ฐฝ์์ yarn create-react-app <ํ๋ก์ ํธ ์ด๋ฆ> ์ ์ ๋ ฅํ์ฌ ํ๋ก์ ํธ ์์ฑ์์ฑ ํ์ ํ๋ก์ ํธ ํด๋๋ก ์ด๋ํ์ฌ npm start๋ก ํ๋ก์ ํธ ์๋น์ค๋ฅผ ์คํ๋ฌธ๋ฒ ๊ฒ์ฌ ๋๊ตฌ๋ก vscode์
๋ฌธ์ ๊ตฌ์กฐ๋ฅผ ๊ฐ์ฒด๋ก ํํํ๋ ๋ฐฉ๋ฒํธ๋ฆฌ ํํ์ ๊ตฌ์กฐ๋ฅผ ๊ฐ์ง๊ณ ์์๋์ UI์ ์ต์ ํ๋์ด ์์ง ์์.HTML ์์ฒด๋ ์ ์ ์ด๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ํตํด ๋์ ์ผ๋ก ๋ง๋ค ์ ์์.Virtual DOM์ ์ค์ DOM์ ๊ฐ๋ฒผ์ด ์ฌ๋ณธ๊ณผ ๋น์ทํฉ๋๋ค.๋ฆฌ์กํธ์์ ๋ฐ์ดํฐ๊ฐ ๋ณํด์ DOM์ ์ ๋ฐ์ด
๋ฆฌ์กํธ๋ฅผ ๋ค๋ฃจ๋ ๊ธฐ์ (๊ฐ์ ํ)์ ์ ๋ ํ๋ฉด์ ์์ ํ ๋ด์ฉ์ ๋๋ค.์๋น์ค์ ๊ท๋ชจ๊ฐ ์ปค์ง๊ณ , ์ฌ์ฉ์์๊ฒ ๋ค์ํ ์ธํฐ๋ ์ /๋์ ์ธ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ ค๋ฉด DOM ์์์ ๊ด๋ฆฌ๊ฐ ํ๋ค๋ฟ๋๋ฌ ๋ณต์กํด์ง๋ฉฐ ์ฑ๋ฅ๊น์ง ๋จ์ด์ง ์ ์๋ค.์ด๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด ํ์ด์ค๋ถ์์ ๊ตฌํํ JavaScript ๋ผ์ด