
๋ฆฌ์กํธ ๊ณต์๋ฌธ์ ํจ๊ป ๊ณต๋ถํ๊ธฐ
์ ์ฌ๋จ
2023๋ ๋ฆฌ๋ด์ผ๋ React ๊ณต์ ๋ฌธ์๋ฅผ ํจ๊ป ํ์ตํด์.
์ ๋ฌธ
React, JavaScript, react.js
ES6 ์ด์ ๊น์ง์ ์๋ฐ์คํฌ๋ฆฝํธ ์ ์ฒด๋ฅผ ๊ดํตํ๋ ํต์ฌ ๊ฐ๋ ๋ค์ ๋ํ์ฌ, ์ ๋ฐ์ ์ธ ํ๋ฆ์ ์ดํด๋ณด๋ ๊ฐ์์ ๋๋ค.
์๊ฐ์ 4,145๋ช
๋์ด๋ ์ด๊ธ
์๊ฐ๊ธฐํ ๋ฌด์ ํ





์ผ์ดํฐ
์์ง์๋ค๋ ์ด ๊ฐ์๋ฅผ ๋ฃ๊ณ ์์ด์!





์ผ์ดํฐ
์์ง์๋ค๋ ์ด ๊ฐ์๋ฅผ ๋ฃ๊ณ ์์ด์!
๋จผ์ ๊ฒฝํํ ์๊ฐ์๋ค์ ํ๊ธฐ
5.0
์ ์๊ธฐ
์ ์ฌ๋จ ๋์ด ์ฒ์ ํ๊ฒ ๋ํ ๊ฒ์ ๋๋ฌด ๋ ๋ก ๋จน์ ๊ฒ ๊ฐ์ ์ฃ์กํ๊ณ ๊ฐ์ฌํฉ๋๋ค.
5.0
๊ฐญ์์
ํ๋ฅญํ ๊ฐ์ ์ฌํ ๋ค์๋ ์๋ฐ ๊ฐ์์๋ ์ข ๋ง์ด ๋ค๋ฅธ๋ฐ์. ๋๋ถ๋ถ ๊ฐ์๊ฐ ๊ธฐ์ด์ ์ธ ๋ถ๋ถ๋ถํฐ ์ญ ํ์ด๋๊ฐ๋ค๊ณ ํ๋ฉด, ์ด ๊ฐ์๋ ํต์ฌ์ ์ธ ๋งฅ๋ฝ์ ์ง์ด์ค๋ค๊ณ ํ ์ ์์ต๋๋ค. ์์งํ ๋ณ์, ๋ฐฐ์ด ๊ฐ์ ๊ฑด ์ ํฌ๋ธ์ ์๋ฐ ๊ฐ์์น๋ฉด ๋ง์ด ๋์ค๋ ๊ฑฐ์์์. ์ฝ๋ฐฑ์ด๋ผ๋๊ฐ, ์ค์ฝํ ๋ฑ ํ์๋ค์ด ํท๊ฐ๋ คํ๋ ๋ถ๋ถ, ์ข ๋ ์๊ฐํด๋ด์ผํ ๋ถ๋ถ์ ์ข ๋ ์ง์คํ ์ ์๋๋ก ๋์์ฃผ๋ ๋ฉด์์ ์ถ์ฒํฉ๋๋ค. ์คํ๋ ค ์ ๋ฌธ ๊ฐ์ฌ๋์ด๋ ๊ต์๋์ด ์๋๋ผ์ ๊ฐ์ ํ์ด๋๊ฐ๋ ๋ฐฉ์์ด ์์ํ ์๋ ์๋๋ฐ์. ์ ์์ธ๋ก ์ ์ ํ๊ณ ์ข์์ต๋๋ค.
5.0
์๋นต
์ฌ์ค ์๋ฌด๊ฒ๋ ๋ชจ๋ฅด๋ ๋ ๋ค์์ ๋๋ ์ค๊ฐ์ ํฌ๊ธฐํ์ต๋๋ค. ์ ๋ง ์ดํด๊ฐ ์ ๊ฐ๊ฑฐ๋ ์. ๊ทธ๋ฐ๋ฐ ์ทจ์ ๋ ํ๊ณ ๊ณ์ ๋ฐ๋ก ๊ณต๋ถํ๋ฉด์ ํค๋งค๋ค๊ฐ ์ฐ์ฐํ ๋ค์ ๋ค์๋๋ฐ... ์ฌํ ํท๊ฐ๋ ธ๋ ์ ๋ค์ด ํด๊ฒฐ๋๊ณ ๋ค์ผ๋ก ๊ทธ๊ฒ๋ค์ ์ ๋ํด์ฃผ๋ ๊ฐ์ข์์ต๋๋ค. ๋ง์ฝ ์ ์ฒ๋ผ prototype์ด๋, Execute Environment ์ Lexical Environment ๋ฑ์ ๊ฐ๋ ์ ๋ํด์ ํค๋งค์๋ ๋ถ๋ค์ด ์๋ค๋ฉด ๊ผญ ๋ค์ด๋ณด๋ ๊ฒ์ ์ถ์ฒํฉ๋๋ค. (๋ค๋ง ์ ๋ง ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ฒ์ํ์๋ ๋ถ๋ค์ด๋ผ๋ฉด ๋ฃ๋ ๊ฑธ ์ถ์ฒํ์ง๋ ์์ต๋๋ค!)
์๋ฐ์คํฌ๋ฆฝํธ์ ํต์ฌ ๊ฐ๋
๊ธฐ๋ณธ ๋ฐ์ดํฐ ํ์ ๊ณผ ์ฐธ์กฐ ๋ฐ์ดํฐ ํ์ ์ ์ฐจ์ด
์คํ ์ปจํ ์คํธ์ ์ดํด
this ํค์๋์ ๋ค์ํ ์ฌ์ฉ๋ฒ
์ฝ๋ฐฑ ํจ์์ ๊ฐ๋ ๊ณผ ์ฌ์ฉ๋ฒ
ํด๋ก์ ์ ๊ฐ๋ ๊ณผ ํ์ฉ
ํ๋กํ ํ์ ์ ์ดํด์ ๊ฐ์ฒด์งํฅ ํ๋ก๊ทธ๋๋ฐ
ํด๋์ค์ ์์ ๊ตฌํ
๐ข ๊ฐ์ ๋ฆฌ๋ด์ผ ์๋ด
์ฝ์ด ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์ข๋ ES6 ์ด์ ๊น์ง์ ์๋ฐ์คํฌ๋ฆฝํธ ์ ์ฒด๋ฅผ ๊ดํตํ๋ ํต์ฌ ๊ฐ๋ ๋ค์ ์ ๋ฐ์ ์ธ ํ๋ฆ์ ์ดํด๋ณด๋ ๊ฐ์์ ๋๋ค. ์๋ฐ์คํฌ๋ฆฝํธ ์ด์ฌ์๋ค์ด ๊ฐ์ฅ ์ด๋ ค์ํ๋ this, ์ฝ๋ฐฑ, ์ค์ฝํ์ ์คํ ์ปจํ ์คํธ, ํ๋กํ ํ์ , ํด๋ก์ ๋ฑ์ ๋ํ์ฌ ๊ฐ๋ ๋ฐ ๋์ ์๋ฆฌ๋ฅผ ์๊ธฐ ์ฝ๊ฒ ์ค๋ช ํจ์ผ๋ก์จ, ์๊ฐ์๋ค์ด ํฅํ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ํ์ตํ๋ ๋ฐ์ ์์ด ๊ฐ์ด๋๋ฅผ ์ ์ํด ๋๋ฆฝ๋๋ค.
์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ๋ฐ์ ๋ฐ ์ง๋ง์
๊ธฐ๋ณธ๊ธฐ์ ๊ฐ์ฆ์ ๋๋ผ๋ ์ค๋ฌด์
๊ฐ๋ ์ ์ ๋งคํ๊ฒ ์์ ์์ ๊ฐ์ด ์๋ ๋ถ
์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๋ ํํ๋ค ํ๊ณ๋ฅผ ๋๋ผ๋ ๋ถ
์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ์ด๋ ต๊ณ ์ฌ๋ฏธ์๋ค๊ณ ๋๋ผ๋ ๋ถ
ํ์ต ๋ฐฉ๋ฒ์ด๋ ๋ฐฉํฅ์ฑ์ ์ค๊ฐ ์ ๊ฒํ๊ณ ์ถ์ ๋ถ
ํ์ต ๋์์
๋๊ตฌ์ผ๊น์?
์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๊น์ด ์๊ฒ ๋ฐฐ์ฐ๊ณ ์ถ์ ๋ถ
ํ๋ก ํธ์๋ ๊ฐ๋ฐ์
์๋ฐ์คํฌ๋ฆฝํธ์ ๋ด๋ถ ๊ตฌ์กฐ๋ฅผ ์ดํดํ๊ณ ์ถ์ ๋ถ
๊ฐ์ฒด์งํฅ ํ๋ก๊ทธ๋๋ฐ์ ๊ด์ฌ ์๋ ๋ถ
๋ฉ๋ชจ๋ฆฌ ๊ด๋ฆฌ์ ๋ฐ์ดํฐ ํ์ ์ ๋ํด ๋ฐฐ์ฐ๊ณ ์ถ์ ๋ถ
์ ์ ์ง์,
ํ์ํ ๊น์?
๋ณ์์ ์ธ๋ฐฉ์
๋ฐ๋ณต๋ฌธ๊ณผ ์กฐ๊ฑด๋ฌธ
๋ฐ์ดํฐ ํ์ ๋ณ ๊ธฐ๋ณธ ๋ฉ์๋
ํ๋ณํ ๋ฐ ์ฐ์ฐ์
ํํ์
33,505
๋ช
์๊ฐ์
704
๊ฐ
์๊ฐํ
395
๊ฐ
๋ต๋ณ
4.8
์
๊ฐ์ ํ์
11
๊ฐ
๊ฐ์
์๋
ํ์ธ์, ์๋์ด ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ์ ์ฌ๋จ ์
๋๋ค.
์๋ก ๋๊ณ ํจ๊ป ๋ฐ์ ํ๋ ๊ฑด์ ํ ๊ณต์ ๋ฌธํ๋ฅผ ์งํฅํ์ฌ ๋ค์ํ ํ๋์ ํ๊ณ ์์ต๋๋ค.
์ ์: ์ฝ์ด ์๋ฐ์คํฌ๋ฆฝํธ
์ ํ๋ธ ์ฑ๋: FE์ฌ๋จ
์ํฐํด ๋ฐ ์ธํฐ๋ทฐ ์์:
์ํฐ๋) ์ ์ ๊ฐ๋ฐ์, ๋ญ ๊ณต๋ถํด์ผ ํ์ฃ ? https://www.wanted.co.kr/events/22_02_s01_b01
์ธํ๋ฐ) To. ์ฃผ๋์ด ๊ฐ๋ฐ์ https://www.inflearn.com/pages/for-junior-developers-20211207
๋ฒค์ฒ์ด๋ชฝ) ๋ฒค์ฒ/์คํํธ์ ์๋์ด ๊ฐ๋ฐ์์ ์ฃผ๋์ด ๊ฐ๋ฐ์์ ์์ง๋ด๋ฐฑ ํ ํฌ์ผ https://youtu.be/6D7I4NNFHsU?si=nD6-F7EU_ZtYqDLI
๋ฐ๋๋ผ์ฝ๋ฉ) ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ์ทจ์ ๋ง์ธ๋์ https://youtu.be/zX68pyoLctI
์ ์ฒด
8๊ฐ โ (1์๊ฐ 57๋ถ)
์ ์ฒด
307๊ฐ
4.8
307๊ฐ์ ์๊ฐํ
์๊ฐํ 3
โ
ํ๊ท ํ์ 5.0
5
ํ๋ฅญํ ๊ฐ์ ์ฌํ ๋ค์๋ ์๋ฐ ๊ฐ์์๋ ์ข ๋ง์ด ๋ค๋ฅธ๋ฐ์. ๋๋ถ๋ถ ๊ฐ์๊ฐ ๊ธฐ์ด์ ์ธ ๋ถ๋ถ๋ถํฐ ์ญ ํ์ด๋๊ฐ๋ค๊ณ ํ๋ฉด, ์ด ๊ฐ์๋ ํต์ฌ์ ์ธ ๋งฅ๋ฝ์ ์ง์ด์ค๋ค๊ณ ํ ์ ์์ต๋๋ค. ์์งํ ๋ณ์, ๋ฐฐ์ด ๊ฐ์ ๊ฑด ์ ํฌ๋ธ์ ์๋ฐ ๊ฐ์์น๋ฉด ๋ง์ด ๋์ค๋ ๊ฑฐ์์์. ์ฝ๋ฐฑ์ด๋ผ๋๊ฐ, ์ค์ฝํ ๋ฑ ํ์๋ค์ด ํท๊ฐ๋ คํ๋ ๋ถ๋ถ, ์ข ๋ ์๊ฐํด๋ด์ผํ ๋ถ๋ถ์ ์ข ๋ ์ง์คํ ์ ์๋๋ก ๋์์ฃผ๋ ๋ฉด์์ ์ถ์ฒํฉ๋๋ค. ์คํ๋ ค ์ ๋ฌธ ๊ฐ์ฌ๋์ด๋ ๊ต์๋์ด ์๋๋ผ์ ๊ฐ์ ํ์ด๋๊ฐ๋ ๋ฐฉ์์ด ์์ํ ์๋ ์๋๋ฐ์. ์ ์์ธ๋ก ์ ์ ํ๊ณ ์ข์์ต๋๋ค.
์๊ฐํ 8
โ
ํ๊ท ํ์ 4.9
์๊ฐํ 38
โ
ํ๊ท ํ์ 4.8
5
์ฌ์ค ์๋ฌด๊ฒ๋ ๋ชจ๋ฅด๋ ๋ ๋ค์์ ๋๋ ์ค๊ฐ์ ํฌ๊ธฐํ์ต๋๋ค. ์ ๋ง ์ดํด๊ฐ ์ ๊ฐ๊ฑฐ๋ ์. ๊ทธ๋ฐ๋ฐ ์ทจ์ ๋ ํ๊ณ ๊ณ์ ๋ฐ๋ก ๊ณต๋ถํ๋ฉด์ ํค๋งค๋ค๊ฐ ์ฐ์ฐํ ๋ค์ ๋ค์๋๋ฐ... ์ฌํ ํท๊ฐ๋ ธ๋ ์ ๋ค์ด ํด๊ฒฐ๋๊ณ ๋ค์ผ๋ก ๊ทธ๊ฒ๋ค์ ์ ๋ํด์ฃผ๋ ๊ฐ์ข์์ต๋๋ค. ๋ง์ฝ ์ ์ฒ๋ผ prototype์ด๋, Execute Environment ์ Lexical Environment ๋ฑ์ ๊ฐ๋ ์ ๋ํด์ ํค๋งค์๋ ๋ถ๋ค์ด ์๋ค๋ฉด ๊ผญ ๋ค์ด๋ณด๋ ๊ฒ์ ์ถ์ฒํฉ๋๋ค. (๋ค๋ง ์ ๋ง ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ฒ์ํ์๋ ๋ถ๋ค์ด๋ผ๋ฉด ๋ฃ๋ ๊ฑธ ์ถ์ฒํ์ง๋ ์์ต๋๋ค!)
์๊ฐํ 11
โ
ํ๊ท ํ์ 5.0
5
์๊ตฌ๋ฆฌ์์ ์ฟก ์ฐ๋ฌ์ค์ ๋๊ตฐ๊ฐ๊ฐ ์๋ ค์คฌ๋๋ผ๋ฉด .. ์ด๋ผ๋ ๋ง์ ๊ณต๊ฐ์ ์ํ ์๊ฐ ์๋ค์. ๋ ํ์ผ๋ก ์๊ฐ์ด ๋ง์ด ๋ค์์๋ค, ๋ด๊ฐ ๋ค์ธ ์๊ฐ์ผ๋ก ๋๊ตฐ๊ฐ์ ์๊ตฌ๋ฆฌ๋ฅผ ์ฐ๋ฌ์ฃผ๊ณ ์ถ๋ค. ํ์ ์ ์ฃผ๊ณ ์ถ๋ค. ๋ ํํ๋ฉด์๋ ์ ์ด ๊ฒ์ด ์ค์ํ์ง ์๊ณ ์ถ์๋ค. ์ฌ๋ฌ ๋ฑ๋ฑ ๋ถ๋ก์ Intro์์ ์ฐกํ์ต๋๋ค. ๋์ผํ ๋ ํ์ ์์ ์ด ์์์ง๋ง ์ ๋ ํฌ๊ธฐํ๋ ์ฌ๋์ ๋๋ค. Flow ๊ฐ์๋ถํฐ ์ง๊ธ ์ ์ ์๊ตฌ๋ฆฌ๋ก ์ฐ๋ฌ์ฃผ์๋ ์ด๋ฒ์ ํฌ๊ธฐ ์์ ๊ฒ ๊ฐ๋ค์. ๊ฐ์ฌํฉ๋๋ค.
์๊ฐํ 1
โ
ํ๊ท ํ์ 3.0
3
*๋ด์ฉ์ ์ข์ต๋๋ค. ๊ทธ๋ ์ง๋ง ์ ๋ฃ๋ก ๋ฃ๊ธด ์ข ์์ฝ๋จ ์๊ฐ์ ๋๋ค. ๋ฌด๋ฃ ๋๋ 3์ฒ ์ดํ ๊ฐ์๋ฉด ์ข๊ฒ ์ต๋๋ค. ๋ณด๋ ๊ฐ์ฌ๋์ ํ์ ๊ฐ์๊ฐ ์๋๊ตฐ์. ๋ณธ ๊ฐ์์ ๋ง์กฑํ ์ฌ๋๋ค์ด ํ์๊ฐ์๋ฅผ ๋ฃ๊ณ ๊ฑฐ๊ธฐ์๋ ์ ๋ฃ๋ก ํ๋๊ฒ ์ ์ ํ์ง ์์๊น ์๊ฐ๋ฉ๋๋ค. *๋ค๋ฅธ ์ฌ๋๋ค ๊ธ์ ๋ณด๋ ์ค๋ช ์ด ๋น ๋ฅด๋ค ํ๋๋ฐ ๋จ์ํ ์ค๋ช ์ด ๋นจ๋ผ์ ์ดํด๊ฐ ์ด๋ ค์ด๊ฒ ์๋๊ณ ์ฅํ์ ์ค๋ช ์ ๋งค์น์ํค๋ ๊ธฐ๋ฒ์ด๋ ์ค๋ช ์ ์ฌ๋ก๋ ์์๋ฅผ ๋ค์ด ํด์ค๋ค๊ฑฐ๋ ์ด๋ฐ ๋ถ๋ถ์ด ๋ถ์กฑํ์ง ์๋ ์ถ์ต๋๋ค. ์ฌ์ค ๋ฃ๋ ๋ด๋ด ์คํธ๋ ์ค๋ฅผ ๋ฐ๊ฒ ๋ฉ๋๋ค. ์ด๊ฒ ๋ญ์ง ๋ญ์งํ๋ฉด์ stop์ ์์ผ์ผํด์์... *์ธ์ฌ์ดํธ์๋ฐ ์ฑ ์ ๋ณด๋ค๊ฐ ์ด ๊ฐ์๋ฅผ ๋ฃ๊ฒ ๋์๋๋ฐ... ๋ค๋ฃจ๋ ์ฃผ์ ๋ ๋น์ทํ๋ค์. ๊ทธ๋ฌ๋ ์ด ๊ฐ์์ ์ฑ๊ฒฉ์ด ์ ๋งคํฉ๋๋ค. ์ธ์ฌ์ดํธ์๋ฐ ๋ณด๋ค ๋์ ์์ญ์ ์ทจ๊ธํ๋๊ฒ๋ ์๋๊ณ ์ธ์ฌ์ดํธ์๋ฐ๋ง์ผ๋ก ์ดํดํ๊ธฐ ์ด๋ ค์ ๋ ํต์ฌ ๊ฐ๋ ์ ์ ์ดํดํ ์ ์๊ฒ ํด์ฃผ๋ ๊ฒ๋ ์๋๊ณ ... ์ ๊ฐ ์ด ๊ฐ์ข๋ฅผ ๊ฒฐ์ ํ๋ฉด์ ๊ธฐ๋ํ๋ ๋ด์ฉ์ ์ธ์ฌ์ดํธ๋ฅผ ์ ์ดํดํ ์ ์๋ ๋ณด์กฐ ๊ฐ์ข๋ฉด ๋ฑ ์ข๊ฒ ๋ค์๋๋ฐ ๊ทธ๋ฐ ์ญํ ์๋ ์ข ๋ถ์กฑํ๋จ ์๊ฐ๋๋ค์. ์ด ๊ฐ๋ ํ๋ ์ก์ ๊ฑด ๋๊ณผ ์๊ฐ์ด ์๊น์ง ์๋ค๋ ์๊ฐ์ ๋ค์์ด์ผํ๋๋ฐ ใ ใ
๋ฆฌ๋ด์ผ ์ด์ ์ ์๊ฐํ์ธ ์ ์ฐธ๊ณ ๋ถํ๋๋ฆฝ๋๋ค.
์ง์๊ณต์ ์๋์ ๋ค๋ฅธ ๊ฐ์๋ฅผ ๋ง๋๋ณด์ธ์!
๊ฐ์ ๋ถ์ผ์ ๋ค๋ฅธ ๊ฐ์๋ฅผ ๋ง๋๋ณด์ธ์!
๊ฐ์๊ฐ ํฌํจ๋ ๋ก๋๋งต์ผ๋ก ํ์ตํด ๋ณด์ธ์!