A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition.
ํ์ด์ง ๋ก๋ ์์ ๋ฐ์ํ๋๋ฐ ์ด ๊ฒฝ์ฐ์ React๊ฐ ํ์ด์ง์ ์ผ๋ถ ๋ฐ์ดํฐ๋ฅผ ๋น๋๊ธฐ์ ์ผ๋ก ๋ก๋ํ๋ ๋์ ์ปดํฌ๋ํธ์ ๋ ๋๋ง์ ์ผ์ ์ค๋จ(Suspense)ํ๊ธฐ ๋๋ฌธ์ ๋๋ค.
โ ์ฒดํฌ๋ฆฌ์คํธ
๐ ์์ ์์ธ ๋ด์ฉ
1๏ธโฃ ํ๋ฉด ๊น๋ฐ์ ๋ฌธ์
์ฒ์ ํ์ด์ง๊ฐ ๋ก๋ ๋ ๋(ํน์ ์๋ก๊ณ ์นจ ์) ํ์ด์ง๊ฐ ์ ์ฒด์ ์ผ๋ก ๊น๋ฐ์ด๋ ํ์์ด ์์์ต๋๋ค. route์ ์ ์ฉํ๋ suspense์ ๋ฌธ์ ๊ฐ ์๋๊น ์ถ์ธก๋์ด ํ ์คํธํด๋ณธ ๊ฒฐ๊ณผ, suspense๊ฐ ์์ธ์์ ํ์ธํ์์ต๋๋ค.
์์ ์ suspense์ lazy ๋์ ํ๋ ์ด์
์์ ์ 1์ฐจ ๊ฐ๋ฐ์ด ๋ง๋ฌด๋ฆฌ ๋ ๋์ฏค ์ด๊ธฐ ๋ ๋๋ง ์ง์ฐ์๊ฐ์ ์ค์ด๊ณ ์ lazy loading ๋ฐฉ์์ ๋์ ํ์์ต๋๋ค.
react๋ SPA์ด๊ธฐ๋๋ฌธ์ ํ ๋ฒ์ ์ฌ์ฉํ์ง ์๋ ์ปดํฌ๋ํธ๊น์ง ๋ถ๋ฌ์ค๋ ๋จ์ ์ด ์์ต๋๋ค. lazy loading์ ์ด๊ธฐ์ ํ์ด์ง๊ฐ ๋ก๋๋ ๋ ํ์ํ์ง ์์ ์ปดํฌ๋ํธ๋ฅผ ๋ก๋ํ์ง ์๊ณ ์ฌ์ฉ์๊ฐ ์ค์ ๋ก ํ์ํ ์์ ์ ๋ก๋๋๋๋ก ํด์ค๋๋ค. ์ฌ์ฉ์๊ฐ ์ ๊ทผํ ๋ ๋์ import๋ฅผ ํตํด ๋๊ธฐ์ ์ผ๋ก ๋ก๋๋๊ณ ๋ก๋ ์๋ฃ ์ ๊น์ง์ ๋ก๋ฉ ๊ณผ์ ์ suspense๊ฐ ํ์ํฉ๋๋ค. suspense๋ ์์ง ๋ ๋๋ง ์ค๋น๊ฐ ๋์ง ์์ ์ปดํฌ๋ํธ๊ฐ ์์ ๋ ์ค๋น๊ฐ ์๋ฃ๋ ๋๊น์ง ๋ก๋ฉํ๋ฉด์ ๋ณด์ฌ์ฃผ๊ธฐ ์ํด ์ฌ์ฉํฉ๋๋ค.
suspense๊ฐ ๊น๋ฐ์ ๋ฌธ์ ์ ์์ธ์ด ๋ ์ด์ ๋ ๋คํธ์ํฌ๊ฐ ๋น ๋ฅธ ์ํ์์ ๋ก๋ฉํ๋ฉด๊น์ง ์์๊ฐ์ ์ง๋๊ฐ๋ฒ๋ ค ๊น๋ฐ๊ฑฐ๋ฆฌ๋ ๊ฒ์ผ๋ก ๋ณด์ฌ์ง๊ฒ ๋ ๊ฒ์ ๋๋ค. ๊ทธ๋ฆฌ๊ณ suspense๋ฅผ ํ์ด์ง ์ปดํฌ๋ํธ ์์ฒด์ ์์ ๊ธฐ ๋๋ฌธ์ ๋ก๋ฉํ๋ฉด์ด ํ์ด์ง ์ปดํฌ๋ํธ ๋์ ๊ทธ๋ ค์ ธ ์ ์ฒด ํ์ด์ง๊ฐ ๊น๋ฐ์ด๊ฒ ๋์๋ ๊ฒ์ ๋๋ค.
๊ทธ๋์ ๋์ ํ๋ suspense์ lazy๋ฅผ ์ ๊ฑฐํด์ฃผ๋ ์ ํ ํ์ด์ง ๊น๋ฐ์ ๋ฌธ์ ๊ฐ ์ฌ๋ผ์ก์ต๋๋ค. ํ์ง๋ง ์๋ฒ์์ ๋ฐ์์จ ๋ฐ์ดํฐ๋ค์ด ํ๋ฒ์ ๋ก๋๋์ง ์๊ณ ๊ฐ์ ๋ฐ๋ก ๋ ๋๋ง ๋๊ณ ์์ต๋๋ค.
์
ํ
2๏ธโฃ suspense ์ ๊ฑฐ๋ก ๋ํ๋ ์๋ฌ
suspense์ lazy ์ ๊ฑฐ ํ์ ๋ฐ์ํ ์๋ฌ์ ๋๋ค.
ํ์ธ ๊ฒฐ๊ณผ, useProfile ํ ์ ์ฌ์ฉํ๋ ์ปดํฌ๋ํธ๋ค ๋๋ฌธ์ ํด๋น ์๋ฌ๊ฐ ๋ํ๋ฌ๊ณ ์๋ฌ๊ฐ ๋ํ๋๋ ์ปดํฌ๋ํธ๋ฅผ Senspense๋ก ๊ฐ์ธ ์๋ฌ๋ฅผ ํด๊ฒฐํ์ต๋๋ค. (Setting ํ์ด์ง ์ ์ธ, Setting ํ์ด์ง ์๋ก๊ณ ์นจ ์ ์๋ฌ ๋ฐ์ํจ.) ์๋ 4๊ตฐ๋ฐ์ ์ปดํฌ๋ํธ์ ์ ์ฉํด๋์์ต๋๋ค.
3๏ธโฃ zustand ์ค์น
recoil -> zustand ๋ณ๊ฒฝ์ ์ํด ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ค์นํ์ต๋๋ค.
zustand๋ ํ์ฌ ์ ์ฉ๋์ด ์๋ recoil๊ณผ ๋ง์ฐฌ๊ฐ์ง๋ก ์ํ ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋๋ค. ํ์ฌ ๊ฐ์ฅ ๋ง์ด ์ฐ์ด๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ redux > zustand > jotai > recoil ์ด๋ผ๊ณ ํฉ๋๋ค. redux๋ ์ฌ์ฉ๋ฒ์ด ๊ฝค ๋ณต์กํ๊ณ ํจํค์ง ์ฉ๋์ด ํฐ ๋ฐ๋ฉด, zustand๋ ์ง๊ด์ ์ธ ์ฌ์ฉ๋ฒ๊ณผ ๋งค์ฐ ์ ์ ์์ ์ฝ๋๋ก๋ ์ํ ๊ด๋ฆฌ๊ฐ ๊ฐ๋ฅํฉ๋๋ค. recoil์ ๋ค๋ฅธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋นํด ์ ๋ฐ์ดํธ๊ฐ ์ ๋์ง ์๊ณ ์๋ค๊ณ ํฉ๋๋ค.
๐จ ๋ฒ๊ทธ ๋ฐ์ ์ด์ (์ ํ ์ฌํญ)
๐ ํ์ ์์ (์ ํ ์ฌํญ)
๐ค ์ง๋ฌธ ์ฌํญ (์ ํ ์ฌํญ)
๐ ์ฐธ๊ณ ์๋ฃ (์ ํ ์ฌํญ)
Transition : ์ฟ, ์ด์ ์์ ํด ๋์ ์์ Suspense ์ํ ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋ํ ๊ณ ์ฐฐ
๐ธ ์คํฌ๋ฆฐ์ท (์ ํ ์ฌํญ)
๋ณ๊ฒฝ ์ฌํญ์ ๋ํ ์คํฌ๋ฆฐ์ท์ด ์๋ค๋ฉด ์ฒจ๋ถํด์ฃผ์ธ์.
โ ์ ํ ์ฒดํฌ๋ฆฌ์คํธ
์ด์ ๋ฒํธ: Close #161