2021/11/13 : 고객 불편사항 해결 (prop에 따른 리렌더링)

 

 

다라쓰는 react에서 JSX문법으로 사용할 수 있도록, 별도의 Component를 라이브러리로 제공한다.

https://github.com/zereight/darass-react

GitHub - zereight/darass-react: Darass reply module for React

 

다라쓰 고객사 중의 하나로 https://babble.gg/

사이트가 있는데, 다크모드를 토글할 수 있는 기능이 있다.

 

그런데, Darass의 prop이 변경되었는데 다라쓰 컴포넌트는 새롭게 렌더링되지 않아,

다크모드가 풀렸음에도 글씨가 하얗게 나오고있었다.

 

불편사항을 접수하고 원인만 파악한채로 이력서나 포트폴리오를 준비하다보니 좀 늦은감이 있지만

시간이 남아서 바로 이슈를 해결했다.

 

해결한 방법은 아주 간단하다.

 

  useEffect(() => {
    if (isSSR) return;
    const onMessageForRequestPort = init();

    if (!onMessageForRequestPort) return;
    window.addEventListener("message", onMessageForRequestPort);

    return () => {
      document.querySelector("#darass-reply-comment-area")?.remove();
      document.querySelector("#darass-reply-comment-modal")?.remove();
      window.removeEventListener("message", onMessageForRequestPort);
    };
  }, [
    isSSR
  ]);

위 코드를

 

  useEffect(() => {
    if (isSSR) return;
    const onMessageForRequestPort = init();

    if (!onMessageForRequestPort) return;
    window.addEventListener("message", onMessageForRequestPort);

    return () => {
      document.querySelector("#darass-reply-comment-area")?.remove();
      document.querySelector("#darass-reply-comment-modal")?.remove();
      window.removeEventListener("message", onMessageForRequestPort);
    };
  }, [
    isSSR,
    projectKey,
    darkMode,
    primaryColor,
    isShowSortOption,
    isAllowSocialLogin,
    isShowLogo
  ]);

 

으로 바꾸어서, prop들이 바뀜을 감지시켜주었다.

 

이제 고객사에서는 라이브러리를 새롭게 설치하여 배포하도록 알려주기만 하면 된다!