Open Source

React ClientOnly 컴포넌트 만들기 (feat. useMount)

📌 목차 서론 ClientOnly 컴포넌트는 뭘까? Next 공식 문서에 나와 있는 ClientOnly 컴포넌트 Next 공식 문서에 나와 있는 ClientOnly 컴포넌트의 문제점 Nuxt 같은 ClientOnly 만들기 코드 자세하게 뜯어보기 결론 📌 서론 SSR을 사용하면 필연적으로 ClientOnly 컴포넌트를 사용해야 하는 순간이 있어요. Browser에서만 있는 정보로 rendering을 해야 하거나 의도적으로 서버에서 그려지지 않게 하는 순간 말이에요. 특히 저는 A, B 테스팅을 할 때 ClientOnly의 도움을 많이 받고 있어요. 구글 에널릭틱스의 A, B 테스팅에서 돔을 조작하게 되는데 이때 ClientOnly의 기능이 없다면 서버에서 내려주는 Dom과 Hydration 이후의 돔이 ..