[React - Trouble Shooting] 불필요한 렌더링으로 인한 문제

하나의 페이지에 속해있는 컴포넌트에서 서버에 소켓 통신을 보내는 코드를 구현했다.

 

하지만 서버에 한 번의 소켓 연결이 이루어지는 것이 아니라

여러번의 연결이 이루어졌다.

 

불필요한 렌더링이 일어난 것이다.

 

이렇게 연결이 여러번 이루어지면서

서버에서는 여러 클라이언트가 연결되었다는 것으로 인식한다.

 

어떻게 해결할 수 있을까?

 

렌더링 자체를 제어할 수 있는 방법도 있지만

이번에는 그런 방법이 아니다.

 

 

useEffect 훅을 사용할 수 있다.

  useEffect(() => {
    // 부수 효과 작업을 수행하는 콜백 함수
    // ...

    return () => {
      // 정리(clean-up) 함수
      // 컴포넌트가 언마운트되거나 의존성이 변경될 때 호출됨
      // ...
    };
  }, [/* 의존성 배열 */]);

의존성 배열 부분을 비워둔다면 컴포넌트가 실행될 때 한 번만 실행된다.

 

 

의존성 배열 부분에 변수를 넣는다면

변수의 값이 변할 때마다 실행된다.

 

이 때는 첫 렌더링 때도 실행되므로

첫 렌더링 때 원하지 않는다면 아래와 같이

훅 맨 윗부분에 if 문을 통해 return 해줄 수 있다.

 

const [socket, setSocket] = useState(null);

useEffect(() => {
        if (socket === null) {
            return; // 초기 렌더링 시에는 실행하지 않음
        }
        
        // ... 원하는 로직
        
}, [socket]);

이렇게 되면 소켓 값이 변할 때마다

useEffect 훅이 동작하는 것을 확인할 수 있다.