๐ ๋ฆฌ์กํธ ๊ณต์๋ฌธ์์ ๋ฆฌ์กํธ๋ฅผ ๋ค๋ฃจ๋ ๊ธฐ์ ์ ์ฐธ๊ณ ํ์ฌ ์์ฑํ ๊ธ์ ๋๋ค. const element = <h1>Hello, world!</h1>;JavaScript๋ฅผ ํ์ฅํ ๋ฌธ๋ฒ, ์ฝ๊ฒ ๋งํด HTML ๋ฌธ๋ฒ์ JavaScript ์ฝ๋ ๋ด๋ถ์ ์ด ๊ฒ. JSX๋ก ์
์ปดํฌ๋ํธ๋ฅผ ์์ฑํ๋ ๋ฐฉ๋ฒ์ ํจ์ ์ปดํฌ๋ํธ์ ํด๋์ค ์ปดํฌ๋ํธ๊ฐ ์๋ค.๋ฉ๋ชจ๋ฆฌ์์๋ ํด๋์ค ์ปดํฌ๋ํธ ๋ณด๋ค ๋ ์ฌ์ฉํ๋ค๊ณ ํ๋ค. โ ๊ทธ๋ฌ๋ ์ฑ๋ฅ์ ์ค์ ๋ก๋ ๊ฑฐ์ ๋น์ทํ๋ค๊ณ ํ๋ค.ํจ์ ์ปดํฌ๋ํธ์ ์ฃผ์ ๋จ์ ์ด์๋ state์ ๋ผ์ดํ์ฌ์ดํด API์ ์ฌ์ฉ์ด ๋ถ๊ฐ๋ฅํ๋ค๋ ๊ฒ์ด์๋๋ฐ,
๐ ๋ฆฌ์กํธ ๊ณต์๋ฌธ์์ ๋ฆฌ์กํธ๋ฅผ ๋ค๋ฃจ๋ ๊ธฐ์ ์ ์ฐธ๊ณ ํ์ฌ ์์ฑํ ๊ธ์ ๋๋ค.์ปดํฌ๋ํธ ์์ฑ์ ์ค์ ํ ๋ ์ฌ์ฉํ๋ ์์๋ก, ๊ฐ๋จํ ๋งํ์๋ฉด ์ปดํฌ๋ํธ์์ ์ปดํฌ๋ํธ๋ก ์ ๋ฌํ๋ ๋ฐ์ดํฐ ์ด๋ค.props๋ ์ฝ๊ธฐ ์ ์ฉ์ด๋ค. โ ํจ์ ์ปดํฌ๋ํธ๋ ํด๋์ค ์ปดํฌ๋ํธ ๋ชจ๋ ์ปดํฌ๋ํธ์ ์์ฒด pro
๐ ๋ฆฌ์กํธ ๊ณต์๋ฌธ์์ ๋ฆฌ์กํธ๋ฅผ ๋ค๋ฃจ๋ ๊ธฐ์ ์ ์ฐธ๊ณ ํ์ฌ ์์ฑํ ๊ธ์ ๋๋ค.9๊ฐ์ง์ ์๋ช ์ฃผ๊ธฐ ๋ฉ์๋๊ฐ ์์ต๋๋ค. ํ๋์ฉ ์ดํด๋ด ์๋ค..!๋ง์ดํธ๋ ๋ ๋ฐ์ํ๋ ์๋ช ์ฃผ๊ธฐ ์ ๋๋ค.constructorgetDerivedStateFromPropsrendercomponentDidMoun
1\. state๊ฐ ๋ณ๊ฒฝ๋ ๋2\. ๋ถ๋ชจ ์ปดํฌ๋ํธ๊ฐ ๋ฆฌ๋ ๋๋ง ๋ ๋3\. props๊ฐ ๋ณ๊ฒฝ๋ ๋4\. forceUpdate ํจ์๊ฐ ์คํ๋ ๋
์ด๋ ๊ฒ key๋ฅผ ๊ฐ์ง๊ณ ์์ด์ ์์ ์์๊ฐ ์ถ๊ฐ๊ฐ ๋๋๋ผ๋, 2015,2016ํค๋ฅผ ๊ฐ์ง ๋ฐ์ดํฐ๋ ์ด๋๋ง ํ๋ฉด๋๊ณ , 2014ํค๋ฅผ ๊ฐ์ง ๋ฐ์ดํฐ๋ง ์ถ๊ฐ๊ฐ ๋ฉ๋๋ค.key๊ฐ์ ๋ฐ์ดํฐ๊ฐ ๊ฐ์ง ๊ณ ์ ๊ฐ์ผ๋ก ์ค์ ํด์ผํฉ๋๋ค. ๊ณ ์ ํ ๊ฐ(id)๊ฐ ์๋ค๋ฉด index๋ฅผ ์ฌ์ฉํ ์ ์์ต๋๋ค.์ปดํฌ
์ค๋์ useEffect์ useLayoutEffect์ ์ฐจ์ด์ ๋ํด ๊ณต๋ถํด๋ณด๋ ค๊ณ ํฉ๋๋ค. ์ผ๋จ 2๊ฐ์ง ๊ณผ์ ์ ๋ํด ์์์ผํฉ๋๋ค. Render: DOM Tree ๋ฅผ ๊ตฌ์ฑํ๊ธฐ ์ํด ๊ฐ ์๋ฆฌ๋จผํธ์ ์คํ์ผ ์์ฑ์ ๊ณ์ฐํ๋ ๊ณผ์ Paint: ์ค์ ์คํฌ๋ฆฐ์ Layout์ ํ
์ฌ์ด๋ ํ๋ก์ ํธ๋ฅผ ํ๋ ๋์ค์ ์ด๋ค ํ์ด์ง๋ Header,Footer,Nav๊ฐ ๋ณด์ฌ์ ธ์ผํ๊ณ , ์ด๋ค ํ์ด์ง์์๋ ์๋ณด์ฌ์ฃผ๋ ๋ฐฉ๋ฒ์ ์ฐพ์๋ณด๊ณ ์์์ต๋๋ค. ๐ฑ ๊ฐ ํ์ํ ํ์ด์ง๋ง๋ค Header, Footer, Nav๋ฅผ ๋ณด์ฌ์ฃผ๋๋ก ํ๋๊ฒ์ ๋นํจ์จ์ ์ด๋ผ๋ ์๊ฐ์ด ๋ค์ด์ ์ํ๋