11.13 항해 62일차 TIL

전에는 잘 몰라서 헤더에 적용을 못했는데 이제 소켓의 구조를 좀 이해하고 헤더에 적용 해보니 잘 동작 했다. 근데 뭔가 느낌이 문제가 있을 거 같아서 다시 페이지 별로 하려다가 그 문제가 있는지를 찾아보려고 일단은 헤더에 넣어놨다. 현재는 잘 동작한다!

오늘 작업을 하면서 헤더에 소켓을 넣은게 계속 마음에 걸렸는데 왜 마음에 걸렸는지 알 것 같다.

헤더에 소켓을 넣는다는 것은 결국 모든 페이지에서 사용하기 위해 넣은 거지만 정작 헤더랑은 관련이 없는 상황이라 기능적인 분리를 하지 못한 것에 대한 찝찝함인 것 같다.

그래서 껍데기 컴포넌트를 분리해서 거기서 소켓을 쓴 다음에 App.js에서 다른 모든 컴포넌트를 감싸 주었다. 그렇기에 그 컴포넌트는 새로고침 전까지 절대 렌더링 되지 않는다

// WsNotiRoom.js
import React from 'react';
import useSocketNotiRoom from '../hooks/useSocketNotiRoom';

const WsNotiRoom = ({ children }) => {
  const [wsConnectSubscribe, token] = useSocketNotiRoom();

  React.useEffect(() => {
    if (!token) {
      return null;
    }
    wsConnectSubscribe();
    return null;
  }, []);
  return children;
};

export default WsNotiRoom;

// App.js
//WsNotiRoom 추가
function App() {
  return (
    <WrapApp>
      <Wrap>
        <Reset />
        <PublicRoute restricted path="/login" component={Login} exact />
        <PublicRoute restricted path="/signup" component={Signup} exact />
        <>
          <WsNotiRoom>
            <Header />
            <Permit>
              <PublicRoute path="/" component={CardList} exact />
              <PrivatecRoute path="/settings" component={Settings} exact />
              <PrivatecRoute path="/contap" component={Contap} exact />
              <PrivatecRoute path="/mypage" component={Mypage} exact />
              <PrivatecRoute path="/edit" component={CardEdit} exact />
            </Permit>
          </WsNotiRoom>
        </>
      </Wrap>
    </WrapApp>
  );
}

이렇게 하나로 쓰려니 커스텀훅을 굳이 쓸 필요가 없다고 생각 되었지만 그래도 처음 만들어본 훅이니까 그냥 쓰기로 했다..!