์ธ๋ถ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ชจ๋์ ํ์ ์ ์ ์ํด๋ณด์. ์ธ๋ถ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ชจ๋๊ณผ ํ์ ๊ธฐ๋ณธ์ ์ผ๋ก ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋ง๋ค์ด์ง ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด๊ธฐ ๋๋ฌธ์ ํ์ ์คํฌ๋ฆฝํธ๋ก ์ธ์ํ ์ ์๋ ํํ๋ก ํ์ ์ ์ ์ํด์ฃผ์ด์ผ ํ๋ค. axios๊ฐ์ ์๋ถ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๊ฒฝ์ฐ์๋ ์ด๋ฏธ ๊ด๋ฆฌ๊ฐ ์ ๋์ด ์๊ธฐ ๋๋ฌธ์ ๋ฐ๋ก
ํ์ ์ปดํฌ๋ํธ ๊ฐ์ ์ํ ์ ๋ฌ์ Context API๋ฅผ ํตํด ์คํํด๋ณด์.๋ด๊ฐ ์ํ๋ ์์ ์ ํ์ ์ปดํฌ๋ํธ(quiz, result) ๊ฐ์ ๋ฐ์ดํฐ ์ ์ก์ด๊ณ , ๊ฒ์ํด ๋ณธ ๊ฒฐ๊ณผ ์ ์ญ์ํ๊ด๋ฆฌ๋ฅผ ํ ์ ์๊ฒ ํด์ฃผ๋ context api๋ฅผ ์ฌ์ฉํด์ผ ํ๋ค๋ ๊ฒ์ ์๊ฒ ๋์๋ค.์ ์ญ์ํ
๋ฐ์ดํฐ๋ก ๋ฐ์์จ ๋ฌธ์์ด์ ์ค๋ฐ๊ฟ์ ์ ์ฉํด ์ํ๋ ํํ๋ก ๋ง๋ค์ด๋ณด์.API๋ฅผ ํตํด ๋ฐ์์ค๋ ๋ฐ์ดํฐ๋ฅผ ์์ ํ๋ ์ํฉ.์ํ๋ ๊ตฌ์กฐ์ค์ ๋ ๋๋ง๋ ๊ตฌ์กฐ์ ๊ท์์ ํ์ฉํ replace ๋ฉ์๋๋ฐฑ์๋์๊ฒ ๋์ด์ฐ๊ธฐ ํ ๋ถ๋ถ๋ง๋ค < br >๋ฅผ ๋ฃ์ด๋ฌ๋ผ๊ณ ๋ถํํ๊ณ , repalce๋ฉ์๋
๋น๊ตํ๊ธฐ ์๋ฒ์ ํต์ ํ์ฌ ๋ฐ์์จ ๋ฐ์ดํฐ๋ฅผ ์ฝ์์ ๋ณด์ฌ์ฃผ๊ธฐ ๋ฌธ์ ์ : ๋น๋ฐฐ์ด์ด ๋์จ๋ค. ์๋ง๋ ๋น๋๊ธฐ๋ฐฉ์๋๋ฌธ์ ์๋ฒ๋ฅผ ๊ธฐ๋ค๋ฆฌ์ง ์๊ณ , ์ฝ์์ ๋จผ์ ์ฐ์ด ๋ณด์ฌ์ฃผ๋ ๋ฏํ๋ค. ์๋์ฝ๋ useEffect(() => { axios.get(${QUESTIONAPI}) .t
useState ํจ์ํ ์ปดํฌ๋ํธ๋ ํ์ ์คํฌ๋ฆฝํธ์์ด ์ปดํฌ๋ํธ๋ฅผ ์์ฑํ๋ ๊ฒ๊ณผ ๋ณ ์ฐจ์ด๊ฐ ์๋ค. hooks๋ class ์ปดํฌ๋ํธ์ ๋ฌ๋ฆฌ, useState๋ฅผ ์ฌ์ฉํ ๋ Generics๋ฅผ ์ฌ์ฉํ์ง ์์๋ ํ์ ์คํฌ๋ฆฝํธ๊ฐ ํ์ ์ ์ ์ถํ๊ธฐ ๋๋ฌธ์ ์๋ตํด๋ ์๊ด์๋ค. useStat
event์ ๊ฐ์ฒด target๊ณผ currentTarget์ ๋น๊ตํด๋ณด์.๋์ ์ฐจ์ด๋ฅผ ์๊ธฐ ์ํด์๋ ์ด๋ฒคํธ ๋ฒ๋ธ๋ง์ด๋ผ๋ ๊ฐ๋ ์ ๋ํด ์์์ผ ํ๋ค.์ด๋ฒคํธ ๋ฒ๋ธ๋ง์ ํน์ ํ๋ฉด ์์์์ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ์ ๋ ํด๋น ์ด๋ฒคํธ๊ฐ ๋ ์์์ ํ๋ฉด ์์๋ค๋ก ์ ๋ฌ๋์ด ๊ฐ๋ ํน์ฑ์ ์๋ฏธํ๋ค.
ํจ์ํ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์ ๋ฑ์ฅํ๋ ๋ณดํธ์ ์ธ ํน์ฑ์ธ ํด๋ก์ ์ ๋ํด ์์๋ณด์. closure๋? MDN์ ์ ์์ ๋ฐ๋ฅด๋ฉด, ํด๋ก์ ๋ ํจ์์ ๊ทธ ํจ์๊ฐ ์ ์ธ๋์ ๋์ ๋ ์์ปฌ ํ๊ฒฝ(Lexical environment)๊ณผ์ ์กฐํฉ์ด๋ค. ํํ ํจ์ ๋ด์์ ํจ์๋ฅผ ์ ์ํ๊ณ ์ฌ์ฉํ๋ฉด
๋ฆฌ์กํธ + ํ์ ์คํฌ๋ฆฝํธ ๊ธฐ๋ณธ์ธํ ๋ฐฉ๋ฒ์ ๋ํด ์ ๋ฆฌํด๋ณด์.react + ts + prttier์ eslint ์ค์ , airbnb ๊ท์น ์ ์ฉ(tslint๋์ eslint์ค์น)npm i -D eslint eslint-config-airbnb eslint-config-prett
๊ณ ๊ธ ํ์ ์ธ 'utility type' ๋ช๊ฐ์ง๋ฅผ ์ดํด๋ณด์. ์ ํธ๋ฆฌํฐ ํ์ ์ด๋ฏธ ์ ์ํด ๋์ ํ์ ์ ๋ณํํ ๋ ์ฌ์ฉํ๊ธฐ ์ข์ ๋ฌธ๋ฒ์ด๋ค. ๊ธฐ์กด์ ์ธํฐํ์ด์ค, ์ ๋ค๋ฆญ ๋ฑ์ ๊ธฐ๋ณธ ๋ฌธ๋ฒ์ผ๋ก ์ถฉ๋ถํ ํ์ ์ ๋ณํํ ์ ์์ง๋ง ์ ํธ๋ฆฌํฐ ํ์ ์ ์ฌ์ฉํ๋ฉด ํจ์ฌ ๊ฐ๊ฒฐํ ๋ฌธ๋ฒ์ ํ์ ์ ์
ํ์ ์คํฌ๋ฆฝํธ๊ฐ ํ์ ์ ์ถ๋ก ์ ํด๋๊ฐ๋ ๊ณผ์ ๋ฐ ๋จ์ธ๊ณผ์ ๋ฑ์ ๋ํด ์์๋ณด์.ํ์ ์ถ๋ก ์ด๋ ํ์ ์คํฌ๋ฆฝํธ์์ ํ์ ์ด ์ง์ ๋์ด ์์ง ์์ ๊ฒฝ์ฐ, ์ฝ๋๋ฅผ ํด์ํ์ฌ ํ์ ์ ์ ์ถํด๋๊ฐ๋ ๋์์ ๋งํ๋ค.์ผ์ผ์ด ๋ณ์๋ฅผ ์ ์ธํ ๋๋ง๋ค ํ์ ์ ์ ์ธํด์ผํ๊ณ ํ์ํ ํ์ ์ ์ ์ํด์ผํ๋ ๋ฒ๊ฑฐ
Cํ์ ์คํฌ๋ฆฝํธ์์ ํ์ ์ ๋ง์น ํจ์์ ํ๋ผ๋ฏธํฐ์ฒ๋ผ ์ฌ์ฉํ๋ ๊ฒ์ ์๋ฏธํ๋ค.์ ๋ค๋ฆญ์ ์ฌ์ฉํ๋ฉด ํด๋์ค๋ ํจ์์ ๋ชฉ์ ์ค ํ๋์ธ ์ฌ์ฌ์ฉ์ฑ์ด ์ฆ๊ฐํ๋ค. ํ๊ฐ์ง ํ์ ๋ณด๋ค ์ฌ๋ฌ๊ฐ์ง ํ์ ์์ ๋์ํ๋ ์ปดํฌ๋ํธ๋ฅผ ์์ฑํ๋๋ฐ ์ฌ์ฉ๋๋ค.๊ธฐ์กด ํ์ ์ ์๋ฐฉ์์ ๋ฌธ์ ์ ์ด ๋ฌด์์ธ์ง ํ์ ํ๊ณ ,
๋ฆฌ์กํธ ํ ์ค ๋๋ฒ์งธ ์๊ฐ, useReducer, useMemo, useCallback, useRef์ ๋ํด ์์๋ณด์.useReducer๋ useState๋ณด๋ค ๋ ๋ค์ํ ์ปดํฌ๋ํธ ์ํฉ์ ๋ฐ๋ผ ๋ค์ํ ์ํ๋ฅผ ๋ค๋ฅธ ๊ฐ์ผ๋ก ์ ๋ฐ์ดํธํด์ฃผ๊ณ ์ถ์ ๋ ์ฌ์ฉํ๋ hook์ด๋ค. ๋ฆฌ๋์
ํน์ ์ธ์๋ ๋ณ์์ ํ๊ฐ์ง ์ด์์ ํ์ ์ ์ฌ์ฉํ๊ณ ์ถ์ ๋ ์ฌ์ฉํ๋ค. ์๋ฐ์คํฌ๋ฆฝํธ์ OR์ฐ์ฐ์(||)์ ๊ฐ์ด a์ด๊ฑฐ๋ b์ด๋ค ๋ผ๋ ์๋ฏธ์ด๋ค.'MONG'์ด๋ ๋ณ์์๋ string, number, boolean ํ์ ์ ๋ชจ๋ ์ฌ์ฉํ ์ ์๋ค.์ฌ๋ฌ ํ์ ์ ๋ชจ๋ ๋ง์กฑํ๋ ํ๋์
ํจ์ํ ์ปดํฌ๋ํธ์์ react hooks๋ฅผ ์ฌ์ฉํ์ฌ ์ํ ๊ด๋ฆฌ๋ฅผ ํด๋ณด์. React Hooks๋? react Hook๋ฅผ ํ๋ง๋๋ก ์์ฝํ๋ฉด, ํด๋์คํ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ์ง์๊ณ ๋ ํจ์ํ ์ปดํฌ๋ํธ์์๋ state ๋ฅผ ์ด์ฉํ ์ ์๋ ๊ธฐ๋ฅ์ ๋งํ๋ค. ๊ธฐ์กด์ ํจ์ํ ์ปดํฌ๋ํธ๋
'์ธํฐํ์ด์ค'์ ์ฌ์ฉ๋ฒ์ ๋ํด ์์๋ณด์. Interface๋? ์ธํฐํ์ด์ค๋ ๊ฐ๋จํ๊ฒ ์ด๋ ํ ๋๊ฐ์ ์์คํ ์ฌ์ด์ ์ํธ์์ฉํ ์ ์๊ฒ ํด์ฃผ๋ ์กฐ๊ฑด, ๊ท์ฝ์ ๋งํ๋ค. interface + ์ํ๋ ์ด๋ฆ, ๊ฐ์ฒด ์์ ํญ๋ชฉ๋ค์ ๋ฃ์ด์ฃผ๊ณ , ํ์ ์ ์ง์ ํด์ค๋ค. Interface
ํ๋กํ ํ์ 2๋ฒ์งธ, 'ํ๋กํ ํ์ ์ฒด์ธ'์ ๋ํด์ ์์๋ณด์."์ค๋ฒ๋ผ์ด๋ = ๋ฎ์ด์ฐ๊ธฐ"์์ฑ์ ํจ์๋ฅผ ์ด์ฉํ์ฌ ์์์ ํ๋ค๋ณด๋ฉด ๋ฌผ๋ ค๋ฐ์ ๋ถ๋ชจ์ ๊ธฐ๋ฅ์ ๊ทธ๋๋ก ์ฌ์ฉํ์ง ์๊ณ ์ฌ์ ์ํด์ผ ํ ๊ฒฝ์ฐ๊ฐ ์๊ธด๋ค. ์ด๋ ์์ํด๋์ค์์ ๋ถ๋ชจํด๋์ค์ ๊ธฐ๋ฅ์ ์ฌ์ ์ํ ๋ ์ฌ์ฉํ๋ ๊ฒ์ด '์ค๋ฒ
'ํ๋กํ ํ์ '์ ๊ฐ๋ ์ ๋ํด ์์๋ณด์.
TypeScript์ ๋ชฉ์ , ์ฌ์ฉ๋ฒ์ ๋ํด์ ์์๋ณด์.์๋ฐ์คํฌ๋ฆฝํธ์ ํ์ ์ ๋ถ์ฌํ ์ธ์ด์ด๋ค. ํ์ ์คํฌ๋ฆฝํธ๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ๋ฌ๋ฆฌ ๋ธ๋ผ์ฐ์ ์์ ์คํํ๋ ค๋ฉด ํ์ผ์ ๋ณํํด์ฃผ์ด์ผํ๋ค.//ts์ฝ๋function sum(a: number, b: number) { return a
'์ฝ์ด ์๋ฐ์คํฌ๋ฆฝํธ' ์ฑ ์ ํตํด ์ฝ๋ฐฑํจ์์ ๋ํด ๊น๊ฒ ์์๋ณด์.(์ฑํฐ4) ์ฝ๋ฐฑ ํจ์ ์ฝ๋ฐฑ ํจ์๋ ๋ค๋ฅธ ์ฝ๋(ํจ์,๋ฉ์๋)์ ์ธ์๋ก ๋๊ฒจ์ค์ผ๋ก์จ ๊ทธ ์ ์ด๊ถ๋ ํจ๊ป ์์ํ ํจ์๋ฅผ ๋งํ๋ค. ๋ฌด์ธ๊ฐ ์ผ์ ๋ค๋ฅธ ๊ฐ์ฒด์๊ฒ ์ํค๊ณ , ๊ทธ ์ผ์ด ๋๋๋ ๊ฒ์ ๊ธฐ๋ค๋ฆฌ๋ ๊ฒ์ด ์๋๋ผ ๊ทธ
์น์ฌ์ดํธ์์ ๋ง์ด ์ฌ์ฉ๋๊ณ ์๋ 'tabs menu'๋ฅผ ๋ฆฌ์กํธ์ ๋ทฐ๋ฅผ ์ด์ฉํ์ฌ ๋ง๋ค์ด๋ณด์.