[React] useEffect의 생명주기

😀 Effect의 생명주기

---

https://www.topcoder.com/thrive/articles/lifecycle-methods-in-react-js

 

 

- componentDidMount : 컴포넌트가 생성될 때

- componentDidUpdate: 컴포넌트가 리렌더링될 때

- componentWillUnmount: 컴포넌트가 화면에서 제거되었을때

 

 

모든 React 구성 요소는 위의 동일한 생명주기를 거친다.

- 구성요소가 화면에 추가되면 마운트 된다.

- 새로운 상태 변경시, 업데이트된다.

- 구성요소가 화면에 제거되면 마운트 해제 된다.

 

const serverUrl = 'https://localhost:1234';

function ChatRoom({ roomId }) {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => {
      connection.disconnect();
    };
  }, [roomId]);
  // ...
}

 

위의 예제를 그냥 생각없이 보면,  연결을 하고 바로 연결을 해제 시키는것으로 보인다.

 

const connection = createConnection(serverUrl, roomId);
connection.connect();
return () => {
  connection.disconnect();
};

 

연결하고 바로 해제라고 생각할수도있지만, useEffect는 그렇게 동작하지 않는다.

 

ChatRoom("A-1");
// ROOMID : A-1 연결

ChatRoom("A-2");
// ROOMID : A-2 연결

ChatRoom("A-3");
// ROOMID : A-3 연결

 

-- ROOMID: A-1 --

1. A-1 연결

-- ROOMID: A-2 --

2. A-1 연결 해제 

3. A-2 연결

-- ROOMID: A-3 --

4. A-2 연결 해제

5. A-3 연결

 

const serverUrl = 'https://localhost:1234';

function ChatRoom({ roomId }) {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => {
      connection.disconnect();
      // 이전 요소가 제거되었을때, componentWillUnmount 실행
    };
  }, [roomId]);
  //roomID 변경 시, componentDidUpdate 실행
  // ...
}

카카오톡  대화방 리스트중에 A-1 대화방을 클릭한다.

-> componentDidMount : 컴포넌트가 생성될 때

 

 A-1 방을 나간 후, A-2 방을 클릭한다.

-> componentDidUpdate: 컴포넌트가 리렌더링될 때

-> componentWillUnmount: 컴포넌트가 화면에서 제거되었을때

 

😀  동기화가 두 번 이상 발생해야 하는 이유

---

-- ROOMID: A-1 --

1. A-1 연결

-- ROOMID: A-2 --

2. A-1 연결 해제 

3. A-2 연결

-- ROOMID: A-3 --

4. A-2 연결 해제

5. A-3 연결

 

위의 내용이 이해가 되었다면, 동기화가 두 번 이상 발생하는 이유는

React가 두 가지 작업을 수행하기 원하기 떄문이다.

 

1. 이전과의 동기화 중지 

2. 새로운 것과 동기화 시작.

 

 A-1 연결이 되어있는 상황에서, A-2가 신규로 연결이 된다면 이 전에 있던 A-1의 연결을 해제하고,

새로운 A-2 연결을 시작한다.

 

A-1 연결 해제 부분은 React의 생명주기에서의 componentWillUnmount 에서 요소가 제거되었기때문에

componentWillUnmount 생명주기가 동작된다.

 

😀  각 효과는 별도의 동기화 프로세스로 구현해야 한다

---

function ChatRoom({ roomId }) {
  useEffect(() => {
    logVisit(roomId);
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => {
      connection.disconnect();
    };
  }, [roomId]);
  // ...
}

사용자가 채팅방을 연결할 때 분석 이벤트를 보내고싶은 예제입니다.

위의 예제는 정상적으로 동작하겠지만, 유지보수의 어려움이 발생될수있는 코드이기도 합니다.

 

" 코드의 각 Effect는 별도의 독립적인 동기화 프로세스를 나타내야 한다." 

 

1. 방문 로그 등록 Effect

2. 채팅방연결 Effect

 

function ChatRoom({ roomId }) {
  //방문 로그 등록
  useEffect(() => {
    logVisit(roomId);
  }, [roomId]);
  
  //채팅방 연결 
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    // ...
  }, [roomId]);
  // ...
}

 

 

https://react.dev/learn/lifecycle-of-reactive-effects

Lifecycle of Reactive Effects – React