๋‚ด์žฅ React API

Hook๊ณผ ์ปดํฌ๋„ŒํŠธ ์™ธ์—๋„ react ํŒจํ‚ค์ง€๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ •์˜ํ•˜๋Š”๋ฐ ์œ ์šฉํ•œ ๋ช‡ ๊ฐ€์ง€ API๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ํŽ˜์ด์ง€๋Š” ์ตœ์‹  React API๋ฅผ ๋ชจ๋‘ ๋‚˜์—ดํ•ฉ๋‹ˆ๋‹ค.


  • act๋ฅผ ํ†ตํ•ด ํ…Œ์ŠคํŠธ์—์„œ ๋ Œ๋”๋ง์ด๋‚˜ ์ƒํ˜ธ์ž‘์šฉ์„ ๊ฐ์‹ธ์„œ ๊ด€๋ จ๋œ ์—…๋ฐ์ดํŠธ๊ฐ€ ๋ชจ๋‘ ์ฒ˜๋ฆฌ๋œ ๋’ค์— ๊ฒ€์ฆํ•ฉ๋‹ˆ๋‹ค.
  • cache๋ฅผ ํ†ตํ•ด ๊ฐ€์ ธ์˜จ ๋ฐ์ดํ„ฐ๋‚˜ ์—ฐ์‚ฐ์˜ ๊ฒฐ๊ณผ๋ฅผ ์บ์‹ฑํ•ฉ๋‹ˆ๋‹ค.
  • captureOwnerStack์„ ํ†ตํ•ด ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์—์„œ ํ˜„์žฌ Owner Stack์„ ์ฝ๊ณ , ์‚ฌ์šฉ๊ฐ€๋Šฅํ•œ ๋ฌธ์ž์—ด์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.
  • createContext๋ฅผ ํ†ตํ•ด ์ž์‹ ์ปดํฌ๋„ŒํŠธ๋“ค์—๊ฒŒ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ๋Š” ์ปจํ…์ŠคํŠธ๋ฅผ ์ •์˜ํ•˜๊ณ  ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ๋ณดํ†ต useContext์™€ ํ•จ๊ป˜ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.
  • lazy๋ฅผ ํ†ตํ•ด ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ฒ˜์Œ ๋ Œ๋”๋ง๋  ๋•Œ๊นŒ์ง€ ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ์˜ ์ฝ”๋“œ๋ฅผ ๋กœ๋”ฉํ•˜๋Š” ๊ฒƒ์„ ์ง€์—ฐํ•ฉ๋‹ˆ๋‹ค.
  • memo๋ฅผ ํ†ตํ•ด ๋™์ผํ•œ Props์ผ ๊ฒฝ์šฐ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋‹ค์‹œ ๋ Œ๋”๋ง๋˜์ง€ ์•Š๋„๋ก ์ตœ์ ํ™”ํ•ฉ๋‹ˆ๋‹ค. ์ฃผ๋กœ useMemo, useCallback๊ณผ ํ•จ๊ป˜ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.
  • startTransition์„ ํ†ตํ•ด ์ƒํƒœ ์—…๋ฐ์ดํŠธ๋ฅผ โ€œ๋œ ๊ธด๊ธ‰ํ•œ ์ž‘์—…โ€์œผ๋กœ ํ‘œ์‹œํ•˜์—ฌ UI์˜ ๋ฐ˜์‘์„ฑ์„ ์œ ์ง€ํ•ฉ๋‹ˆ๋‹ค. useTransition๊ณผ ์œ ์‚ฌํ•ฉ๋‹ˆ๋‹ค.
  • use๋Š” Promise๋‚˜ Context์™€ ๊ฐ™์€ ๋ฐ์ดํ„ฐ๋ฅผ ์ฐธ์กฐํ•˜๋Š” React Hook์ž…๋‹ˆ๋‹ค.
  • taintObjectReference๋ฅผ ํ†ตํ•ด user ๊ฐ์ฒด์™€ ๊ฐ™์€ ํŠน์ •ํ•œ ๊ฐ์ฒด ์ธ์Šคํ„ด์Šค๋ฅผ ํด๋ผ์ด์–ธํŠธ ์ปดํฌ๋„ŒํŠธ๋กœ ์ „์†กํ•˜๋Š” ๊ฒƒ์„ ๋ฐฉ์ง€ํ•ฉ๋‹ˆ๋‹ค.
  • taintUniqueValue๋ฅผ ํ†ตํ•ด ํŒจ์Šค์›Œ๋“œ, ํ‚ค ๋˜๋Š” ํ† ํฐ๊ณผ ๊ฐ™์€ ๊ณ ์œ  ๊ฐ’์„ ํด๋ผ์ด์–ธํŠธ ์ปดํฌ๋„ŒํŠธ๋กœ ์ „์†กํ•˜๋Š” ๊ฒƒ์„ ๋ฐฉ์ง€ํ•ฉ๋‹ˆ๋‹ค.
  • addTransitionType๋ฅผ ํ†ตํ•ด, ํŠธ๋žœ์ง€์…˜์ด ๋ฐœ์ƒํ•œ ์›์ธ์„ ์ƒ์„ธํžˆ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค.

Resource APIs

Resource๋ฅผ State์˜ ์ผ๋ถ€๋กœ ํฌํ•จํ•˜์ง€ ์•Š๊ณ ๋„ ์ปดํฌ๋„ŒํŠธ์—์„œ Resource์— ์•ก์„ธ์Šคํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ์ปดํฌ๋„ŒํŠธ๋Š” Promise์—์„œ ๋ฉ”์‹œ์ง€๋ฅผ ์ฝ๊ฑฐ๋‚˜ Context์—์„œ ์Šคํƒ€์ผ ์ •๋ณด๋ฅผ ์ฝ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Resource์—์„œ ๊ฐ’์„ ์ฝ์œผ๋ ค๋ฉด ๋‹ค์Œ API๋ฅผ ์‚ฌ์šฉํ•˜์„ธ์š”.

  • use๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด Promise๋‚˜ Context์™€ ๊ฐ™์€ Resource์˜ ๊ฐ’์„ ์ฝ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
function MessageComponent({ messagePromise }) {
const message = use(messagePromise);
const theme = use(ThemeContext);
// ...
}