<div id="readability-page-1" class="page"><div><h2 id="hydration">hydration</h2>
hydration 이슈가 발생했을때 해결방안
<ol>
<li>mounted 조건 추가</li>
</ol>
<pre><code>const Modal: React.FC = ({ isHide }) =&gt; {
 const [isMounted, setIsMounted] = useState(false);

 useEffect(() =&gt; {
 setIsMounted(true);
 }, []);

 const isOpen = isMounted &amp;&amp; !isHide;
 
 //...</code></pre>
<ol start="2">
<li>dynamic import</li>
</ol>
<pre><code>const = BottomSheet = dynamic(
 () =&gt; import('src/components/BottomSheet'),
 {
 ssr: false,
 },
);</code></pre></div></div>

ginameee.log

Jangchun Lee

hydration
hydration 이슈가 발생했을때 해결방안
mounted 조건 추가
const Modal: React.FC = ({ isHide }) => {
const [isMounted, setIsMounted] = useState(false);
useEffect(() => {
 setIsMounted(true);
}, []);
const isOpen = isMounted && !isHide;
//...
dynamic import
const = BottomSheet = dynamic(
() => import('src/components/BottomSheet'),
{
 ssr: false,
},
);

2024.11.11

댓글