์ถ์ฒ: React doc
All values inside the component (including props, state, and variables in your componentโs body) are reactive. Any reactive value can change on a re-render, so you need to include reactive values as Effectโs dependencies.
ex)
function ChatRoom({ roomId, selectedServerUrl }) { // roomId is reactive
const settings = useContext(SettingsContext); // settings is reactive
const serverUrl = selectedServerUrl ?? settings.defaultServerUrl; // serverUrl is reactive
useEffect(() => {
const connection = createConnection(serverUrl, roomId);
connection.connect();
return () => {
connection.disconnect();
};
}, [roomId, serverUrl]);
// ...
}
๐ Effect dependencie์ state, prop๋ฟ๋ง ์๋๋ผ re-render๋์ ๋ณํ๋ ๋ณ์๋ ํฌํจ์ํฌ ํ์๊ฐ ์๋ค.
- reactive
"๋ฐ์ํ"์ด๋ผ๋ ์ฌ์ ์ ์๋ฏธ. ์ด๋ React์ ์ํ(state) ๊ฐ๋ ์ ๋ฐ๋ผ, ๋ณ์๊ฐ ๋ณ๊ฒฝ๋๋ฉด ์ปดํฌ๋ํธ๊ฐ ์๋์ผ๋ก ๋ค์ ๋ ๋๋ง๋์ด UI๊ฐ ์ ๋ฐ์ดํธ๋๋ค๋ ์๋ฏธ์ ๋๋ค.