search

starkoora / wanted-pre-onboarding-challenge-fe-1

64 stars 1 forks source link

[질문] 2회차 수업 Universal Rendering 질문입니다! #21

Closed uhgenie7 closed 2 years ago

uhgenie7 commented 2 years ago

집중력이 흐트러졌는지 갑자기 훅 어려워져서 강의 정리하다가 긴가민가한 부분이 있어 질문드립니다. 어렴풋이 알듯말듯한 자갈만 가득해서 다소 횡설수설할수도 있습니다.

1. ReactDOMServer

ReactDOMServer 는 ssr, csr 상관없이 무조건 앱을 렌더링 하고 createRoot().render(), hydrateRoot()에 따라서 ssr, csr의 방식이 달라지는 건가요? 아니면 ReactDOMServer는 ssr으로만 쓰이고 createRoot().render(), hydrateRoot()에 따라 클라이언트에서 렌더링을 한번 더 하느냐, 그려진 돔 위에 리스너를 붙이는 수화만 하느냐의 차이인가요?

한 번에 너무 많은 지식이 들어와서 헷깔리는데, react server에서

let indexHTML = fs.readFileSync(
    path.resolve(__dirname, "dist/index.html"),
    "utf8"
  );

로 build 된 index.html 을 가져오고, 컴포넌트로 되어있는 부분을 ReactDOM.renderToString으로 변환해서 replace 시켜준다고 이해하면 될까요?

이걸 그대로 갖다가 hydrateRoot()로 받으면 ssr이고 createRoot().render()로 다시 그리는게 csr 인지?

그런데 csr은 클라이언트에서 js로 화면을 그리는건데... react의 csr은 중간에 ReactDOM.renderToString로 컴포넌트의 직렬화 과정을 거친 뒤 js로 그리고 있었던건지?

코드부분부분은 이해가 가는데 리액트의 렌더링 과정이 머릿속에 잘 안 그려져서 헷깔립니다. ~저도 제가 무슨 소리를 하는지 모르겠어요 ㅠㅠ~

2. 가상돔

react-dom은 server에서도 돈다며 가상돔 이야기를 하셨는데요,

가상돔은 트리형태로 된 자바스크립트 객체이고 서버에서도 진짜 돔이 없어도 만들 수 있음 → 그럼 진짜 돔은 어디에? → 브라우저에 있음. → ...??

server 이야기를 하다가 갑자기 브라우저 얘기가 나와서 이 이후 말씀하시는걸 놓쳤습니다. 이 부분 다시 설명 부탁 드려도 될까요?

starkoora commented 2 years ago

@uhgenie7

ReactDOMServer 는 ssr, csr 상관없이 무조건 앱을 렌더링 하고 createRoot().render(), hydrateRoot()에 따라서 ssr, csr의 방식이 달라지는 건가요?

ReactDOMServer는 createRoot().render(), hydrateRoot() 와는 무관합니다. 서버 측에서 클라이언트가 어떤 메서드로 렌더링 할지 알 수 있는 방법은 없기 때문이죠. 서버는 그냥 html 파일을 클라이언트 측에 건넬 뿐입니다.

CSR, SSR 나눠서 보여드린 이유는

이 상황을 보여드리기 위해서였습니다

아니면 ReactDOMServer는 ssr으로만 쓰이고 createRoot().render(), hydrateRoot()에 따라 클라이언트에서 렌더링을 한번 더 하느냐, 그려진 돔 위에 리스너를 붙이는 수화만 하느냐의 차이인가요?

이게 맞습니다.

(...) index.html 을 가져오고, 컴포넌트로 되어있는 부분을 ReactDOM.renderToString으로 변환해서 replace 시켜준다고 이해하면 될까요?

넵

이걸 그대로 갖다가 hydrateRoot()로 받으면 ssr이고 createRoot().render()로 다시 그리는게 csr 인지?

넵 x 2

그런데 csr은 클라이언트에서 js로 화면을 그리는건데... react의 csr은 중간에 ReactDOM.renderToString로 컴포넌트의 직렬화 과정을 거친 뒤 js로 그리고 있었던건지?

아니요... CSR은 createRoot.render()로 넘겨진 react 가상 dom을 div#id 에 적용하는 방식으로 렌더링을 해요

starkoora commented 2 years ago

@uhgenie7

가상돔은 트리형태로 된 자바스크립트 객체이고 서버에서도 진짜 돔이 없어도 만들 수 있음 → 그럼 진짜 돔은 어디에? → 브라우저에 있음. → ...??

이 부분은 React가 dom을 직접 조작하지 않는 가상 dom 방식을 사용하면서 dom을 추상화시킨 효과를 얻게 되었다고 말씀드리고 싶어서 언급드렸던 부분입니다.

예컨대 진짜 dom을 조작하는 렌더링 방식이었다면 서버 측에서는 렌더링을 할 수 없게 됩니다. dom을 가져올 때 기본적으로 document.querySelector() 같은 걸 사용하는데, 서버 측에는 document 객체가 없으니까요.

그런데 가상 dom은 렌더링 연산을 할 때 실제 dom이 필요 없습니다. 물론 결국 최종 목적은 진짜 dom에 영향을 주는 것이지만 가상 dom 자체는 자바스크립트 객체이고, 가상 Dom을 렌더링한다는 건 그냥 자바스크립트 객체를 찍어내는 것이니까요. 당연히 서버 측에서도 실행이 가능합니다. 서버 측에서 어떻게 리액트를 실행시킬 수 있는 것인지에 대한 대답이었습니다 ㅋㅋ

uhgenie7 commented 2 years ago

친절한 설명 감사드립니다 d^_^b