์ด์ฉ๋ฉด ๋ชฐ๋ผ๋ ๋๋ ๋ฆฌ์กํธ ๊น์ํ ๊ณณ์ ์ด์ผ๊ธฐ
๋ฆฌ์กํธ์์ Virtual DOM์ ๋ฌด์์ด๊ณ ๋ฆฌ์กํธ์์๋ ์ ์ด๊ฒ์ ์ฌ์ฉํ๋๊ฐ์ ๋ํด ๊ฐ๋ตํ๊ฒ ์ ๋ฆฌํด๋ณด์
์์์ React reconciliation, ๊ทธ ์ ์๋ React18์ ์ ์ฉ๋ Suspense, useTransition ๋ฑ์ ๋ํ ๊ถ๊ธ์ฆ์์๋ถํฐ์๋ค. ๊ด๋ จ ๊ธ์ ์ฝ๋ค๋ณด๋ ์์ฃผ ๋์ค๋ ๊ฐ๋ ์ธ DOM node, element ๋ฑ์ ๋ํ ์ดํด๋๋ฅผ ๋์ด๊ณ ์ ์ ๋ฆฌํ๋ ๊ธ
์ปดํฌ๋ํธ์, ๊ทธ์ instance ๊ทธ๋ฆฌ๊ณ element๊ฐ์ ๊ตฌ๋ถ์ ํท๊ฐ๋ฆฌ๋ ๊ฐ๋ ์ด๋ค. ์ ๊ทธ๋ค์ ๋ชจ๋ ์คํฌ๋ฆฐ์ ๊ทธ๋ ค์ง ์ด๋ค ๊ฒ์ ์ง์นญํ๋ฉด์ ๋ค๋ฅธ ๋จ์ด๋ค๋ก ์ฌ์ฉ๋๋๊ฐ?
render()ํจ์๋ ๋ธ๋ผ์ฐ์ ์์ UI๋ฅผ render ํ๋ คํ ๋ ๋ง๋ค ๋ถ๋ฆฌ์ฐ๋ ํจ์์ด๋ค. ์ต์์ render ํจ์๋ React element๋ค์ ํธ๋ฆฌ๋ฅผ ์ฌ๊ท์ ์ผ๋ก ๋ฆฌํดํ๋ ํจ์๋ผ๊ณ ๋ณผ ์ ์๋ค. ๊ทธ ํ ๋ค์ ๋ ๋ cycle์์ ํด๋น ์ปดํฌ๋ํธ์ ํธ๋ฆฌ๋ ๋ค์ ์์ฑ๋๋ค(re
ํ์ ๋ณํ์ ์ฝ๋์ ์๋์ ๋ฐ๋ผ ๊ฐ์์ ์ผ๋ก ์๋๊ฐ ๋ณด์ด๋ ๋ช ์์ ํ์ ๋ณํ๊ณผ ์์ง์ ์ํด ์๋์ผ๋ก ๋ณํ๋๋ ์๋ฌต์ ํ์ ๋ณํ์ด ์๋ค.
7. ์ฐ์ฐ์ ์ฐ์ฐ์๋ ํ๋ ์ด์์ ํํ์์ ๋์์ผ๋ก ์ฐ์ , ํ ๋น, ๋น๊ต, ๋ ผ๋ฆฌ, ํ์ , ์ง์ ์ฐ์ฐ ๋ฑ์ ์ํํ์ฌ ํ๋์ ๊ฐ์ ๋ง๋ ๋ค.
์๋ฐ์คํฌ๋ฆฝํธ๋ 7๊ฐ์ ๋ฐ์ดํฐ ํ์ ์ด ์๋ค. ๊ทผ๋ฐ ์ด์ ES11์์ BigInt๊ฐ ์ถ๊ฐ๋.
ํ๋ก๊ทธ๋จ์ ๋ฌธ์ ์งํฉ์ผ๋ก ์ด๋ค์ง ๊ฒ์ผ๋ก ๋ฌธ์ ์์ฑํ์ฌ ์์์ ๋ง๊ฒ ๋์ดํ๋ ๊ฒ์ด ํ๋ก๊ทธ๋๋ฐ์ด๋ค. ์ฆ ๋ฌธ์ ํ๋ก๊ทธ๋จ์ ๊ตฌ์ฑํ๋ ๊ธฐ๋ณธ ๋จ์์ด์ ์ต์ ์คํ ๋จ์์ด๋ฉฐ ๋ฌธ์ ํํ์์ธ ๋ฌธ๊ณผ ํํ์์ด ์๋๋ฌธ์ผ๋ก ๋๋ ์ ์๋ค.
์๋ฌด๋ฆฌ ๋ณต์กํ ์ดํ๋ฆฌ์ผ์ด์ ์ด๋ผ ํ ์ง๋ผ๋ ๋ฐ์ดํฐ๋ฅผ ์ ๋ ฅ ๋ฐ์ ์ฒ๋ฆฌํ๊ณ ๊ฒฐ๊ณผ๋ฅผ ์ถ๋ ฅ ํ๋ ๊ฒ์ด ์ ๋ถ์ด๋ค.
ํ๋ก๊ทธ๋๋ฐ์ด๋ 0๊ณผ 1๋ฐ์ ์์ง ๋ชปํ๋ ๊ธฐ๊ณ๊ฐ ์คํํ ์ ์์ ์ ๋๋ก ์ ํํ๊ณ ์์ธํ๊ฒ ์๊ตฌ์ฌํญ์ ์ค๋ช ํ๋ ์์ ์ ์ฝ๋๋ก ๋ช ๋ น์ ์ ๋ฌํ๋ ๊ฒ์ด๋ค. ๊ทธ 0๊ณผ1์ ์ธ๊ฐ์นํ์ ์ธ ์ธ์ด๋ก ๋ง๋ค์ด์ง ๊ฒ์ด ์๋ฐ์คํฌ๋ฆฝํธ์ผ๋ฟ.
graphQL์, graphQL์ ์ํ, graphQL๋ฅผ ์ํ
React์ graphQL๊ณผ React-Apollo๋ฅผ ํ ์คํผ์ฉ ๋ฃ์ด์ ์ดํ๋ฆฌ์ผ์ด์ ์ ๋ ๋ง์๊ฒ ๋ง๋ค์ด๋ณด์.
๋ญ๋ผ๊ณ ? ์๋ง์กด์์ ๋ฌด๋ฃ๋ก ์ปดํจํฐ๋ฅผ ๋ง์ถฐ์ค๋ค๊ณ ? ์ฅ?
About desing patterns with React: Flux, provider and Observer in brief way.
๋ช์ผ ์ ๊ฐ๋ฐ์ ํ๋ค๊ฐ JSONํ์ผ์ numberํ์ ์ id์ ๊ฐ์ ์ปดํฌ๋ํธ์ id๊ฐ์ผ๋ก ํ ๋นํ๊ณ ๋ค์ JSONํ์ผ ์ id์ ๋น๊ต๋ฅผ ํ ๋ ์์ฒญ๋ ์ ๋ฅผ ๋จน์์ ์ด์๋ค.filter๋ฅผ ์ด์ฉํด์ ๊ฑธ๋ฌ๋ด๋ ค๋ ํจ์๋ฅผ ์์ฑํ๋๋ฐ ์ฝ์์ ๊ฐ์ ๊ฐ์ด ์ฐํ๋๋๋ ๋ถ๊ตฌํ๊ณ filterํจ์
The code written in Javascript is executed in synchronously while, nowadays, more and more asynchronous functions need to be used.Therefore, we should
์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ด ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ฅผ ์คํํ๋ ๋ฐฉ์๊ณผ ๋น๋๊ธฐ ํจ์์ ๋ํด์๋ ์ด๋ค ๊ณผ์ ์ด ์ผ์ด๋๋์ง ์์๋ณด๊ธฐ.
์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํ๋ ๋ชฉ์ ๊ณผ ์ด์ , ๊ทธ๋ฆฌ๊ณ ๋ฆฌ์กํธ๋ฅผ ์ฌ์ฉํ๋ ์ด์ ๋ ๋์๊ฐ ํ๋ก ํธ์๋์ ๋ณธ์ง์ ์ธ ํ๋ ์ผ
Promise ํจํด์ ํจ์ ์คํ์ ์์๋๋ก ๋ณด์ฅ๋ฐ์ง ๋ชปํ๋ ํจ์ ์คํ์ ๋ํ ๋ฐฉํ ๊ณํํ์ด๋ค. ๊ทธ๋ฆฌ๊ณ Promise๋ ๊ทธ๊ฑธ ๊ฐ์ํ๋ฉฐ ํ๋ํ๋ ์ฑ๊ณต์ธ์ง ์คํจ์ธ์ง ํ๋ณํ์ฌ ์๋ ค์ฃผ๋ ์ด๋จธ๋๋ค.