렌더링을 내장하는 사이드이펙트 로직은 어떤 형태로? Hook vs Component

[milooy]

화면 우하단에 채널톡 버튼을 띄우는 스크립트를 Hook형태로 만들었는데,

function useInitializeChannelTalk() {
  useEffect(() => {
    ChannelService.loadScript();

    /**
     * 화면 우하단에 채널 버튼을 띄웁니다
     */
    ChannelService.boot({
      pluginKey: 채널톡_PLUGIN_KEY,
    });
  }, []);
}

(간접적으로라도) UI를 렌더링하는 코드이기 때문에 컴포넌트 형태로 바꾸면 어떻겠냐라는 의견을 받았어요.
그렇게 리팩토링 해보니 꽤 맘에 들더라구요 👍👍

export default function ChannelTalkButton() {
  useEffect(() => {
    ChannelService.loadScript();
    ChannelService.boot({
      pluginKey: 채널톡_PLUGIN_KEY,
    });
  }, []);

  // NOTE: ChannelService.boot 메서드에서 채널 버튼을 렌더링 해줍니다
  return <></>;
}

여러분은 어떤 코드를 선호하세요?

[sjoleee]

오, 이런 경우는 겪어본 적이 없어서 고민하는 즐거움이 있네요 ㅎㅎ
개인적으로는 컴포넌트 형태가 좋은 것 같아요.

의도가 명확하게 드러납니다.
본문에 작성해 주신 것처럼 '컴포넌트를 렌더링하겠다'는 의도를 명확히 드러냅니다.

디버깅이 편해질 것 같습니다.
React Devtools로 검색하면 트리에서 위치를 쉽게 찾을 수 있습니다.

외부에서 명시적인 조건부 렌더링이 가능합니다
hook으로 작성할 때도 param으로 제어할 수 있지만, 아래처럼 작성하는 것이 더욱 이해하기 쉬울 것 같습니다.
{ condition && <ChannelTalkButton /> }

---

hook과 컴포넌트의 유의미한 차이 중 하나가 '독립적인 렌더링 사이클을 갖는지' 라고 생각하는데요,
본문의 코드와 다르게 param(prop)을 받는 경우라면 최적화에 대해서도 다른 방법을 적용해야 할 것 같다는 생각이 드네요
(부모의 리렌더링만을 고려하느냐, prop의 참조 동일성까지 고려하느냐...)

[milooy]

외부에서 명시적인 조건부 렌더링이 가능합니다

이 value는 생각 못했네요! 👍 좋은데요?

[Han5991]

이런 케이스는 생각 해보지 못 했어요 좋은 인사이트 얻어갑니다.

[nnnnoel]

일단 둘 중 하나를 선택하자면 Component 형태가 렌더링이라는 관심사를 직관적으로 표현할 수 있을 것이라 생각이 들고요.
보통 이런 컴포넌트들은 예시처럼 채널톡, 또는 zendesk 등의 서드파티 라이브러리일 것으로 생각되는데 이 것들은 공통적으로 독립적인 Lifecycle을 갖는 컴포넌트들이기 때문에 제품의 ClientRoot와 격리될 필요가 있습니다.

그래서 투표 올려주신 내용과 별개로 해당 컴포넌트를 사용해야 하는 입장에선 제품의 렌더링 과정과 해당 컴포넌트가 Lifecycle을 공유하지 않는다는 것을 명시적으로 표현하기 위해 react-nil 사용을 권장드립니다.