LEARN REACT_ESCAPE HATCHES_Lifecycle of Reactive Effects 👉 Effect dependencie

출처: React doc

All variables declared in the component body are reactive

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가 업데이트된다는 의미입니다.