React DOM APIs
react-dom
package๋ ์น ์ ํ๋ฆฌ์ผ์ด์
์์๋ง ์ง์๋๋ ๋ฉ์๋๋ฅผ ํฌํจํฉ๋๋ค. (๋ธ๋ผ์ฐ์ DOM ํ๊ฒฝ์์๋ง ์คํ๋๋). React Native์์๋ ์ง์๋์ง ์์ต๋๋ค.
APIs
์ด API๋ ์ปดํฌ๋ํธ์์ ๋ถ๋ฌ์ฌ ์ ์์ต๋๋ค. ์ฌ์ฉ๋ ์ผ์ ๊ฑฐ์ ์์ต๋๋ค:
createPortal
์ ์ฌ์ฉํ๋ฉด ์์ ์ปดํฌ๋ํธ๋ฅผ DOM tree์ ๋ค๋ฅธ ๋ถ๋ถ์ ๋ ๋๋ง ํ ์ ์์ต๋๋ค.flushSync
๋ฅผ ์ฌ์ฉํ๋ฉด React๊ฐ state ์ ๋ฐ์ดํธ๋ฅผ ์ํํ๊ณ ๋๊ธฐ์ ์ผ๋ก DOM์ ์ ๋ฐ์ดํธํ๋๋ก ๊ฐ์ ํ ์ ์์ต๋๋ค.
Entry points
react-dom
package ๋ ๋ ๊ฐ์ ์ง์
์ ์ ์ ๊ณตํฉ๋๋ค:
react-dom/client
๋ React ์ปดํฌ๋ํธ๋ฅผ ํด๋ผ์ด์ธํธ์ ๋ ๋๋งํ๋ API๋ฅผ ํฌํจํฉ๋๋ค(๋ธ๋ผ์ฐ์ ์์).react-dom/server
๋ React ์ปดํฌ๋ํธ๋ฅผ ์๋ฒ์ ๋ ๋๋งํ๋ API๋ฅผ ํฌํจํฉ๋๋ค.
Deprecated APIs
findDOMNode
๋ ํด๋์ค ์ปดํฌ๋ํธ ์ธ์คํด์ค์ ์ผ์นํ๋ ๊ฐ์ฅ ๊ฐ๊น์ด DOM ๋ ธ๋๋ฅผ ์ฐพ์ต๋๋ค.hydrate
๋ ํธ๋ฆฌ๋ฅผ ์๋ฒ HTML์์ ์์ฑ๋ DOM์ผ๋ก ๋ง์ดํธํฉ๋๋ค. ๋ ์ด์ ์ฌ์ฉ๋์ง ์์ผ๋ฉฐhydrateRoot
๋ฅผ ๊ถ์ฅํฉ๋๋ค.render
๋ ํธ๋ฆฌ๋ฅผ DOM์ผ๋ก ๋ง์ดํธํฉ๋๋ค. ๋ ์ด์ ์ฌ์ฉ๋์ง ์์ผ๋ฉฐcreateRoot
๋ฅผ ๊ถ์ฅํฉ๋๋ค.unmountComponentAtNode
๋ ํธ๋ฆฌ๋ฅผ DOM์์ ๋ง์ดํธ ํด์ ํฉ๋๋ค. ๋ ์ด์ ์ฌ์ฉ๋์ง ์์ผ๋ฉฐroot.unmount()
๋ฅผ ๊ถ์ฅํฉ๋๋ค.