๊ธฐ๋ฅ ์ ์์ฒญํ๊ฑฐ๋ ๋ฒ๊ทธ๋ฅผ๋ณด๊ณ ํ์๊ฒ ์ต๋๊น?
๋ฒ๋ ๊ฐ์
ํ์ฌ ํ๋์ ๋ฌด์์
๋๊น?
React๋ก ์๋ฒ ์ธก ๋ ๋๋ง์ ์ํ ํ ๋ react-dom
(์ ์ด์ ์ผ๋ก ReactDOMFrameScheduling.js
ํ์)๋ฅผ ์๊ตฌํ๋ฉด rAF๊ฐ ์ ์๋์ง ์์๊ธฐ ๋๋ฌธ์ ์์ธ๊ฐ ๋ฐ์ํฉ๋๋ค.
Invariant Violation: React depends on requestAnimationFrame. Make sure that you load a polyfill in older browsers.
at invariant (app/node_modules/fbjs/lib/invariant.js:44:15)
at Object.<anonymous> (app/node_modules/react-dom/lib/ReactDOMFrameScheduling.js:30:3)
๋น์ ๊ฐ์ ํด๋ผ์ด์ธํธ ์ธก ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์ต์์ ์์
์ด ๋ณดํธ์ ์ธ ๊ตฌ์ฑ ์์๊ฐ์๋ ๊ฒฝ์ฐ์ ๋ฐ์ํ ์ ์์ต๋๋ค react-router-scroll
ํ์ react-dom
๋์ react-dom/server
.
์์๋๋ ๋์์ ๋ฌด์์
๋๊น?
requestAnimationFrame์ด ์ค์ ๋ก ํธ์ถ๋์ง ์๋ ํ์ด ์ค๋ฅ๊ฐ ๋ฐ์ํ์ง ์์ ๊ฒ์ผ๋ก ์์ํฉ๋๋ค. ์ : rAF๋ฅผ ๋๋ฆฌ๊ฒ ํ์ธํ๊ณ rIC๋ฅผ ์ ์ํฉ๋๋ค.
์ด๋ค ๋ฒ์ ์ React์ ์ด๋ค ๋ธ๋ผ์ฐ์ / OS๊ฐ์ด ๋ฌธ์ ์ ์ํฅ์ ๋ฐ์ต๋๊น?
Node 7.7.1์์ React 16.0.0-alpha.3. ์ด๋ Fiber๋ฅผ ์ถ์ํ๊ณ ํ์ฑํ ํ ์ํ 3์์ ์์๋์์ต๋๋ค.
๋ด ์์ ๋ ๋์์ ๋ฌ์ฑํ๋ ํด๊ฒฐ ๋ฐฉ๋ฒ์ React์ ๊ฐ ์๋น์๊ฐ ๋ค๋ฅธ ์ฌ์ฉ์๋ณด๋ค ๋จผ์ ๊ฐ์ ธ์จ ํ์ผ์ ์ฝ๊ฐ์ polyfill์ ์ ์ํ๋ ๊ฒ์ด์ง๋ง ๋ง์ ์ฌ๋๋ค์ด์ด ๋ฌธ์ ์ ๋ถ๋ช ํ ๊ฒ์ผ๋ก ์์ํฉ๋๋ค. ์ด๊ฒ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
global.window = global;
window.addEventListener = () => {};
window.requestAnimationFrame = () => {
throw new Error('requestAnimationFrame is not supported in Node');
};
rAF
polyfill์ ๋๋ฆฌ๊ฒ ์ด๊ธฐํํ์ฌ์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ์ ์์ง๋ง ์ด์ ์๊ฐํ๋ฉด findDOMNode
(๊ตฌ์ฑ ์์๊ฐ ์ํํ๋ ์์
์ผ ๊ฐ๋ฅ์ฑ์ด ๋์)๋ฅผ ๊ฐ์ ธ ์ค๋ ๊ฒ๋ง์ผ๋ก๋ ์ ์ฒด ํด๋ผ์ด์ธํธ ์กฐ์ ์ ์ด๊ธฐํ ์ฝ๋๋ฅผ ์คํํ๋ ๊ฒ์ด ๋ถํ ํด ๋ณด์
๋๋ค. .
@gaearon ๋จ์ ํ ์คํธ ์์ ์กํ์ง ์์์ด์ผ ํ์ต๋๊น ?
๋ํ ๋ ์ค์ํ ๊ฒ์ react-dom
๊ฐ ํ์ํ์ง ์๊ณ ์๋ฒ์์ findDOMNode
๋ฅผ ์คํํ๋ ์ํฐ ํจํด์ด๋ฉฐ, ํด๋น ๊ตฌ์ฑ ์์๋ ์๋ฒ์์ ์คํ๋๋ ํํฌ์์ ์ด๋ฌํ ์์๋ฅผ ํผํด์ผํฉ๋๊น?
๋ํ ๋ ์ค์ํ ๊ฒ์ react-dom์ ์๊ตฌํ์ง ์๊ณ ์๋ฒ์์ findDOMNode๋ฅผ ์ํฐ ํจํด์ผ๋ก ์คํํ๋ ๊ฒ์ด ์๋๋ฉฐ, ํด๋น ๊ตฌ์ฑ ์์๋ ์๋ฒ์์ ์คํ๋๋ ํํฌ์์์ด๋ฅผ ํผํด์ผํฉ๋๊น?
์๋ฒ์์ ์คํํด์๋ ์๋์ง๋ง ๊ฐ์ ธ ์ค๊ธฐ๋ ๊ด์ฐฎ์ต๋๋ค. ๊ทธ๋ ์ง ์์ผ๋ฉด ํด๋ผ์ด์ธํธ์์ findDOMNode
๋ฅผ ์ฌ์ฉํ์ง๋ง ์ฌ์ ํ ์๋ฒ์์ ์๋ํ๋ ๊ตฌ์ฑ ์์๋ฅผ ์ด๋ป๊ฒ ์์ฑํฉ๋๊น?
๋จ์ ํ ์คํธ์์ ์กํ์ง ์์์ด์ผ ํ์ต๋๊น?
์๋์, ํ ์คํธ ํ๊ฒฝ์ ์ผ๋ถ๋ก ์ ์ญ rAF ํด๋ฆฌ ํ์ ์ค์ ํ๊ธฐ ๋๋ฌธ์ ํ ์คํธ์์์ด๋ฅผ ํฌ์ฐฉํ์ง ๋ชปํฉ๋๋ค.
ํธ์ง : PR์ ๋จ์ง ์ค๋ช ์์ํ ๊ฒ์ ๋๋ค. ๋จ์ ํ ์คํธ๋ฅผ ์คํํ์ต๋๋ค. ์์ง ๋ณดํ์ด์๊ณ ๋ ์์๋ค.
์์ด๋์ด๋ฅผ ์ฝ๋์ ์ ๊ธฐ ์ํด PR์ ์ด์์ต๋๋ค.
ReactFiberScheduler ์์ rAF
์ํ๋ฅผ ์ฎ๊ฒผ์ต๋๋ค.
ํ์ง๋ง ์ง๊ธ์ rAF
๊ฐ ํด๋ฆฌ ํ๋์ง ์์ผ๋ฉด ๋์ง ์์๋ ๋ฅ๋ ฅ์ ์์์ต๋๋ค. ๋น์ ์ด ์ธ๊ธ ํ ๊ฒ์ผ๋ฅธ ์ํ๋ฅผ์ํ ์ฌ๋ฐ๋ฅธ ์ฅ์์
๋๊น?
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
๋ด ์์ ๋ ๋์์ ๋ฌ์ฑํ๋ ํด๊ฒฐ ๋ฐฉ๋ฒ์ React์ ๊ฐ ์๋น์๊ฐ ๋ค๋ฅธ ์ฌ์ฉ์๋ณด๋ค ๋จผ์ ๊ฐ์ ธ์จ ํ์ผ์ ์ฝ๊ฐ์ polyfill์ ์ ์ํ๋ ๊ฒ์ด์ง๋ง ๋ง์ ์ฌ๋๋ค์ด์ด ๋ฌธ์ ์ ๋ถ๋ช ํ ๊ฒ์ผ๋ก ์์ํฉ๋๋ค. ์ด๊ฒ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.