댓글기능 만들기 2 (useEffect) Hydration failed 에러 관련

[Kwanyong]

Comment.js 에서 아래와 같은 에러가 발생합니다.

Error: Hydration failed because the initial UI does not match what was rendered on the server.

랜더링 되는 순서때문에 발생하는 문제 같은데, 구글링해서 

아래와 같이, useEffect와 domLoaded를 써서 해결을 했는데,

선생님 코드에서는 에러가 안나오는게 궁금합니다.

미리 답변 감사드립니다.

'use client'
import { useState, useEffect } from "react";
export default function Comment(props) {
    const [domLoaded, setDomLoaded] = useState(false);
    let [comment, setComment] = useState('')

    useEffect(() => {
        setDomLoaded(true);
      }, []);

    return(
        <>
            {domLoaded && (
                <div>
                    <div>comment</div>
                    <input onChange={(e)=>{setComment(e.target.value)}}/>
                    <button onClick={()=>{
                        console.log(comment)
                        fetch('/api/comment/new', {
                            method : 'POST', 
                            body : JSON.stringify({comment : comment, _id : props._id}),
                            })
                    }}>Submit</button>
                </div>
            )}
           

        </>
    )
}

[codingapple]

서버에서 보낸 html이 이상하게 바뀌면 가끔 뜨는데 상세페이지 html 구조가 이상해도 뜰 수 있습니다

[글쓴이]

글