사전 렌더링 시 JS 코드를 HTML 파일로 변환하는 거에 대해 질문이 있습니다

작성한 질문수 3

3

안녕하세요 만두찐빵님 이정환입니다.

결론부터 말씀드리면 사전 렌더링 과정에서는, 해당 페이지를 이루는 모든 리액트 컴포넌트를 실행하여 결과로 UI를 생성합니다. 즉 HTML을 생성한다는 말이죠

이때 이 HTML에 브라우저측(클라이언트 사이드)에서 동작하는 onClick 이벤트 핸들러 등의 인터렉션 코드는 HTML에 포함되지 않습니다. 이런 JS 코드들은 향후에 JS Bundle로써 전달되어 Hydration을 거치게 됩니다.

예를 들어 아래와 같은 컴포넌트가 있다고 가정해보겠습니다.

export default function ButtonComponent() {
  const handleClick = () => {
    console.log('Button clicked!');
  };
  return <button onClick={handleClick}>Click me</button>;
}

사전 렌더링 과정에서는 위 컴포넌트가 렌더링하는 UI만 HTML로 변환합니다. 따라서 결과는 다음과 같을 겁니다.

<button>Click me</button>

그리고 브라우저 측에서 작동해야 하는 이벤트 핸들러등의 자바스크립트 코드들은 대략 아래와 같은 형태로 후속으로 브라우저에게 전달될 겁니다.

// React hydration에서 기존의 HTML과 연결되어 동작을 추가하는 단계
const handleClick = () => {
  console.log('Button clicked!');
};

// 이 시점에 React가 이미 렌더링된 HTML 요소에 이벤트를 붙입니다.
document.querySelector('button').addEventListener('click', handleClick);

그럼 브라우저는 위 코드를 실행하여 결과적으로 정적인 button 태그에 'click' 이벤트 핸들러를 설정하게 되고 이를 통해 상호작용이 가능하게 되어 Hydration 과정이 이루어지게 되는 것 입니다.