ํ์ ์ปดํฌ๋ํธ ๊ฐ์ ์ํ ์ ๋ฌ์ Context API๋ฅผ ํตํด ์คํํด๋ณด์.๋ด๊ฐ ์ํ๋ ์์ ์ ํ์ ์ปดํฌ๋ํธ(quiz, result) ๊ฐ์ ๋ฐ์ดํฐ ์ ์ก์ด๊ณ , ๊ฒ์ํด ๋ณธ ๊ฒฐ๊ณผ ์ ์ญ์ํ๊ด๋ฆฌ๋ฅผ ํ ์ ์๊ฒ ํด์ฃผ๋ context api๋ฅผ ์ฌ์ฉํด์ผ ํ๋ค๋ ๊ฒ์ ์๊ฒ ๋์๋ค.์ ์ญ์ํ
๋ฐ์ดํฐ๋ก ๋ฐ์์จ ๋ฌธ์์ด์ ์ค๋ฐ๊ฟ์ ์ ์ฉํด ์ํ๋ ํํ๋ก ๋ง๋ค์ด๋ณด์.API๋ฅผ ํตํด ๋ฐ์์ค๋ ๋ฐ์ดํฐ๋ฅผ ์์ ํ๋ ์ํฉ.์ํ๋ ๊ตฌ์กฐ์ค์ ๋ ๋๋ง๋ ๊ตฌ์กฐ์ ๊ท์์ ํ์ฉํ replace ๋ฉ์๋๋ฐฑ์๋์๊ฒ ๋์ด์ฐ๊ธฐ ํ ๋ถ๋ถ๋ง๋ค < br >๋ฅผ ๋ฃ์ด๋ฌ๋ผ๊ณ ๋ถํํ๊ณ , repalce๋ฉ์๋
๋น๊ตํ๊ธฐ ์๋ฒ์ ํต์ ํ์ฌ ๋ฐ์์จ ๋ฐ์ดํฐ๋ฅผ ์ฝ์์ ๋ณด์ฌ์ฃผ๊ธฐ ๋ฌธ์ ์ : ๋น๋ฐฐ์ด์ด ๋์จ๋ค. ์๋ง๋ ๋น๋๊ธฐ๋ฐฉ์๋๋ฌธ์ ์๋ฒ๋ฅผ ๊ธฐ๋ค๋ฆฌ์ง ์๊ณ , ์ฝ์์ ๋จผ์ ์ฐ์ด ๋ณด์ฌ์ฃผ๋ ๋ฏํ๋ค. ์๋์ฝ๋ useEffect(() => { axios.get(${QUESTIONAPI}) .t
useState ํจ์ํ ์ปดํฌ๋ํธ๋ ํ์ ์คํฌ๋ฆฝํธ์์ด ์ปดํฌ๋ํธ๋ฅผ ์์ฑํ๋ ๊ฒ๊ณผ ๋ณ ์ฐจ์ด๊ฐ ์๋ค. hooks๋ class ์ปดํฌ๋ํธ์ ๋ฌ๋ฆฌ, useState๋ฅผ ์ฌ์ฉํ ๋ Generics๋ฅผ ์ฌ์ฉํ์ง ์์๋ ํ์ ์คํฌ๋ฆฝํธ๊ฐ ํ์ ์ ์ ์ถํ๊ธฐ ๋๋ฌธ์ ์๋ตํด๋ ์๊ด์๋ค. useStat
๋ฆฌ์กํธ + ํ์ ์คํฌ๋ฆฝํธ ๊ธฐ๋ณธ์ธํ ๋ฐฉ๋ฒ์ ๋ํด ์ ๋ฆฌํด๋ณด์.react + ts + prttier์ eslint ์ค์ , airbnb ๊ท์น ์ ์ฉ(tslint๋์ eslint์ค์น)npm i -D eslint eslint-config-airbnb eslint-config-prett
๋ฆฌ์กํธ ํ ์ค ๋๋ฒ์งธ ์๊ฐ, useReducer, useMemo, useCallback, useRef์ ๋ํด ์์๋ณด์.useReducer๋ useState๋ณด๋ค ๋ ๋ค์ํ ์ปดํฌ๋ํธ ์ํฉ์ ๋ฐ๋ผ ๋ค์ํ ์ํ๋ฅผ ๋ค๋ฅธ ๊ฐ์ผ๋ก ์ ๋ฐ์ดํธํด์ฃผ๊ณ ์ถ์ ๋ ์ฌ์ฉํ๋ hook์ด๋ค. ๋ฆฌ๋์
ํจ์ํ ์ปดํฌ๋ํธ์์ react hooks๋ฅผ ์ฌ์ฉํ์ฌ ์ํ ๊ด๋ฆฌ๋ฅผ ํด๋ณด์. React Hooks๋? react Hook๋ฅผ ํ๋ง๋๋ก ์์ฝํ๋ฉด, ํด๋์คํ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ์ง์๊ณ ๋ ํจ์ํ ์ปดํฌ๋ํธ์์๋ state ๋ฅผ ์ด์ฉํ ์ ์๋ ๊ธฐ๋ฅ์ ๋งํ๋ค. ๊ธฐ์กด์ ํจ์ํ ์ปดํฌ๋ํธ๋
์น์ฌ์ดํธ์์ ๋ง์ด ์ฌ์ฉ๋๊ณ ์๋ 'tabs menu'๋ฅผ ๋ฆฌ์กํธ์ ๋ทฐ๋ฅผ ์ด์ฉํ์ฌ ๋ง๋ค์ด๋ณด์.
state๋ฅผ ํจ์จ์ ์ผ๋ก ๊ด๋ฆฌํด์ฃผ๋ redux, mobx. ๋ณธ๊ฒฉ์ ์ผ๋ก ๋ฐฐ์ฐ๊ธฐ ์ ์ ์ด๋ค ๊ฐ๋ ์ธ์ง ์์๋ณด๋ ์๊ฐ์ ๊ฐ์ ธ๋ณด์.React๋ ๊ธฐ๋ณธ์ ์ผ๋ก component๋ง๋ค ์ํ๊ด๋ฆฌ๋ฅผ ํ๋ค.ํ๋ก์ ํธ์ ๊ท๋ชจ๊ฐ ์ปค์ง๊ฑฐ๋ ์๊ตฌ์ฌํญ์ด ์ ์ ๋์ด๋จ์ ๋ฐ๋ผ์ component๋ผ๋ฆฌ ์ํ ๊ต
๋ง์ด ๋ค์ด๋ดค์ง๋ง ํ๋ฒ๋ ์ฌ์ฉํด๋ณธ ์ ์๋ componentDidUpdate๋ฅผ ์ด๋ฒ ํ๋ก์ ํธ์์ ๋๋์ด ์ฌ์ฉํด๋ณด์๋ค. ์ ๋ฆฌํด๋ณด์!์ด์ ์ํ์ ํ์ฌ ์ํ๋ฅผ ๋น๊ตํ์ฌ ๊ตฌ์ฑ ์์ ์ ๋ฐ์ดํธ๋ฅผ ํ๋ค.componentDidUpdate()ํ์ ํธ์ถ componentDidMount()
'๋์ ๋ผ์ฐํ '์ ์ด์ฉํด์ ์ํ๋ฆฌ์คํธํ์ด์ง์์ ํด๋น ์ํ์ ํด๋ฆญํ์ฌ ์์ธํ์ด์ง๋ก ๋์ด๊ฐ๋ณด์. ๋์ ๋ผ์ฐํ (Dynamic Routing)์ด๋? ๋์ ๋ผ์ฐํ ์ด๋ ๋ผ์ฐํธ์ ๊ฒฝ๋ก์ ํน์ ๊ฐ์ ๋ฃ์ด ํด๋น ํ์ด์ง๋ก ์ด๋ํ ์ ์๊ฒ ํ๋ ๊ธฐ๋ฅ์ ๋งํ๋ค. 'Query parameters
์์ดํ ์ด ๋ง์ ์ผํ๋ชฐ์ ๊ฒฝ์ฐ ์ ์ฒด์ํ์ ํ๊บผ๋ฒ์ ๋ณด์ฌ์ค ์ ์๋ค. ์ด๋ ์ผ์ ๋จ์๋ก ๋์ด์ ์์ดํ ์ ๋ณด์ฌ์ฃผ๋ ๊ธฐ๋ฅ์ธ pagenation์ ๋ํด ์์๋ณด์. Pagination(paging) ๋ฐฑ์๋์์ ๋ณด๋ด๋ ๋ฐ์ดํฐ์์ด ๋ง๋ค๋ฉด, ๊ทธ ๋ฐ์ดํฐ๋ฅผ ํ ํ๋ฉด์ ์ ๋ถ ๋ณด์ฌ์ค ์ ์์
'styled components'๋ ํ์กดํ๋ CSS in JS ๊ด๋ จ ๋ฆฌ์กํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ค์์ ๊ฐ์ฅ ์ธ๊ธฐ ์๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ค ํ๋์ด๋ค. ๊ทธ๋ฌ๋๊น ์ฌ์ฉํด๋ณด๊ณ ์์๋ณด์. styled component ๊ธฐ์กด์ ๋ฐ๋ก cssํ์ผ์ ๋ง๋ค์ด์ฃผ๋ ๊ฒ๊ณผ ๋ฌ๋ฆฌ JS ์์์ CSS๋ฅผ
nav๋ ๋๋ถ๋ถ์ ํ์ด์ง์ ๋ค์ด๊ฐ์ง๋ง, ํน์ ํ์ด์ง์๋ ํ์ํ์ง ์๋ค. route์ ์ด ๋ถ๋ถ์ ์ด๋ป๊ฒ ๋ฐ์ํ ์ ์๋์ง ์์๋ณด์.๋๋ถ๋ถ ํ์ด์ง์ nav component๊ฐ ํ์ํ์ง๋ง ๋ก๊ทธ์ธ, ํ์๊ฐ์ ํ์ด์ง๊ฐ์ ๊ฒฝ์ฐ์๋ ํ์์์๋ค. ํ์ํ ์ปดํฌ๋ํธ์๋ง nav๋ฅผ ๋ฃ์ด์ฃผ๋ ๋ฐฉ
๋๋ถ๋ถ์ ์ฌ์ดํธ์์ ํ์์ ์ธ ์์์ธ '๋ก๊ทธ์ธ'๊ณผ 'ํ์๊ฐ์ '. ์ค๋์ ์ฃผ์ ๋ฅผ ํตํด ํ๋ก ํธ์ ๋ฐฑ์ค๋์ ํต์ ์ ์ดํดํด๋ณด๋๋ก ํ์. access token ์ก์ธ์ค ํ ํฐ์ ์ฑ๊ณต์ ์ผ๋ก ๋ก๊ทธ์ธ ํ์์ ์ฆ๋ช ํ๋ ์ํธ๋ฌธ ํํ์ ์ผ์ข ์ '์ ์ฅ๊ถ'์ด๋ค. ํ๋ก ํธ์ ๋ฐฑ์ ์๋ก ํต์ ํ๊ธฐ ์
๋ฆฌ์กํธ component๊ฐ ์์ฑ(mounting)๋๊ณ , ์์ (updating)๋๊ณ , ์๋ฉธ(unmounting)๋๋ ๊ณผ์ ๋ค์ ๋ํด ์์๋ณด์.Life Cycle์ด๋ ์ปดํฌ๋ํธ๊ฐ ์์ฑ๋์ด ์๋ฉธ๋ ๋๊น์ง์ ์ผ๋ จ์ ๊ณผ์ ๋ค์ ์ผ์ปซ๋๋ค.์ปดํผ๋ํธ๊ฐ ๋ธ๋ผ์ฐ์ ์์ ๋ํ๋๋ ๊ฒ์ ๋งํ๋ค.ํด
๋ ๊ฐ์ฒด ๋ชจ๋ ๋ ๋๋ง ๊ฒฐ๊ณผ๋ฌผ์ ์ํฅ์ ์ฃผ๋ ์ ๋ณด๋ฅผ ๊ฐ๊ณ ์๋ค๋ ๊ณตํต์ ์ด ์๋ค. ํ์ง๋ง, props๋ ์ปดํฌ๋ํธ์ ์ ๋ฌ๋๋ค๋ ์ ๊ณผ status๋ ์ปดํฌ๋ํธ ์์์ ๊ด๋ฆฌํ๋ค๋ ์ ์ด ๋ค๋ฅด๋ค.๋ถ๋ชจ ์ปดํฌ๋ํธ๊ฐ ์์ ์ปดํฌ๋ํธ์๊ฒ ์ฃผ๋ ๊ฐ์ ๋งํ๋ค. ์์ ์ปดํฌ๋ํธ๋ props๋ฅผ ๋ฐ์์ค
ํ ์นํ์ด์ง ์์์ ์ฌ๋ฌ ๊ฐ์ ํ์ด์ง๋ฅผ ๋ณด์ฌ์ฃผ๋ 'routing'๊ธฐ๋ฅ์ ๋ํด์ ์์๋ณด์.๋ผ์ฐํ ์ด๋ ์ฝ๊ฒ๋งํด, ํ ์นํ์ด์ง ๋ด์์ ๋ค๋ฅธ ๊ฒฝ๋ก์ ๋ฐ๋ผ ๋ค๋ฅธ ํ๋ฉด์ ๋ณด์ฌ์ฃผ๋ ๊ฒ์ ๋งํ๋ค. ์์ฝ๊ฒ๋ ๋ฆฌ์กํธ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์์ฒด์๋ ์ด๋ฐ ๊ธฐ๋ฅ์ด ๋ด์ฅ๋์ด์์ง ์๊ธฐ๋๋ฌธ์ 'third-pa
๊ธฐ์กด์ html๋ฌธ๋ฒ๊ณผ jsx๋ฌธ๋ฒ ์ฐจ์ด์ ์ ์ ์ํ์.์๋๋ ์ปดํผ๋ํธ๋ฅผ ๋ง๋๋๋ฐ ํ์ํ ์ฝ๋์ด๋ค.App์ด๋ผ๋ ํด๋์ค๋ฅผ ๋ง๋ค๊ณ , ๋ฆฌ์กํธ์ ์ปดํผ๋ํธ๋ผ๋ ๋ฆฌ์กํธ๊ฐ ๊ฐ์ง๊ณ ์๋ ํด๋์ค๋ฅผ ์์ํด์ ์๋ก์ด ํด๋์ค๋ฅผ ๋ง๋ ๋ค. ๊ทธ ํด๋์ค๋ render๋ผ๋ ๋ฉ์๋๋ฅผ ๊ฐ์ง๊ณ ์๋๋ฐ, ์ด๋
'๋ฆฌ์กํธ'๋ ๊ฐ์ฅ ์ธ๊ธฐ์๋ ํ๋ก ํธ์๋์ ๊ฝ์ธ ๋ฆฌ์กํธ์ ๊ฐ๋ ์ ๋ํด ์์๋ณด์. (๋ฆฌ์กํธ ๋ฌด์ญ๋ค...)๋ฆฌ์กํธ๋ 2011๋ ํ์ด์ค๋ถ์ ์ํด ๋ง๋ค์ด์ง ํ์ฌ ๊ฐ์ฅ ์ธ๊ธฐ์๋ ์๋ฐ์คํฌ๋ฆฝํธ๊ธฐ๋ฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด๋ค. ๊ธฐ์กด์ ๋ฐฉ์์ผ๋ก๋ ๋ณต์กํ ๋์ ์นํ์ด์ง๋ฅผ ๊ตฌํํ๋๋ฐ ์ด๋ ค์์ด ์์๋ค. ์๋ฅผ