search

goidle / goidle.github.io

0 stars 0 forks source link

react/in-depth-react-preview/ #4

Open utterances-bot opened 3 years ago

utterances-bot commented 3 years ago

React 톺아보기 - 01. Preview | Deep Dive Magic Code

모든 설명은 v16.12.0 버전 함수형 컴포넌트와 브라우저 환경을 기준으로 합니다. 버전에 따라 코드는 변경될 수 있으며 클래스 컴포넌트는 설명에서 제외됨을 알려 드립니다.…

https://goidle.github.io/react/in-depth-react-preview/

ellemedit commented 3 years ago

자체 제공하는 컴포넌트는 'ExoticComponent' ? 같은 이름을 사용하는 것 같았는데 최근엔 스태틱 컴포넌트로 이름이 바뀌었나요?

goidle commented 3 years ago

자체 제공하는 컴포넌트는 'ExoticComponent' ? 같은 이름을 사용하는 것 같았는데 최근엔 스태틱 컴포넌트로 이름이 바뀌었나요?

해당 시리즈에서 설명을 위해 자체적으로 붙인 명칭일 뿐 리액트 내부에서 사용하는 용어는 아닙니다.~^^

Kwonkunkun commented 2 years ago

멋진글 감사합니다! 새로운걸 많이 알아가네요.

Gi-Youn-Oh commented 11 months ago

안녕하세요! 우선 너무 좋은 글 감사히 잘 읽었습니다. 위 글 중 "컴포넌트를 DOM에 삽입하는 것을 마운트, 브라우저가 화면에 그리는 걸 페인트라 정의하겠습니다."

이 문구에서 브라우저가 화면에 그리는 과정 페인트에 reflow, repaint 포함일까요 아니면 repaint만 일까요?

또 reflow단계를 마운트 단계에서 한다고 봐도 될까요 아니면 삽입 후에 reflow는 브라우저에서 진행한다고 봐야할까요?

답변 주시면 감사드리겠습니다!

goidle commented 11 months ago

@Gi-Youn-Oh 우선 결론은 reflow와 repaint 이전에 리액트의 작업이 모두 끝납니다.

브라우저가 reflow와 repaint를 진행하려면 콜스택을 점유해야 합니다. 하지만, 리액트는 콜스택을 비우지 않고 Render Phase - Commit Phase를 쭉 진행합니다. Commit Phase는 렌더링 결과를 DOM에 커밋하는 과정이고 이때 DOM 삽입이 진행됩니다. 이후에 리액트가 콜스택을 비우면 브라우저가 reflow와 repaint를 진행하면서 화면에 노출됩니다.

Gi-Youn-Oh commented 10 months ago

답변 감사합니다 많이 배워갑니다!!

adultlee commented 10 months ago

반갑습니다 @goidle 님 작성해주신 글을 정말 열심히 읽고 있습니다. 다소 이해가 되지 않았지만, 저만의 해석을 추가로 담아서 글을 작성해보려하는데 혹시 괜찮을까요? 원본에대한 로그는 항상 남겨두도록 하겠습니다

adultlee commented 10 months ago

중간에 Render 라는 패키지를 소개해 주셨는데, reconciler와 legacy-event 패키지에 의존도를 가지고 있습니다. 라고 적혀 있었으나, 제가 react-dom의 package.json을 찾아보았을때, scheduler가 포함된것을 확인할 수 있었습니다.

혹시 제 접근 방식이 잘못된 걸까요?

goidle commented 10 months ago

@adultlee renderer가 scheduler 패키지를 사용하고 있는 것은 맞습니다. 우선순위 셋팅과 콜백 실행을 위해 scheduler의 runWithPriority()을 사용합니다.

추가 해석을 담아 글을 작성하여도 좋습니다 :) (작성 후 공유해주시면 읽어보겠습니다.) 현재 읽고 계시는 글은 16 버전을 기준으로 되어 있기 떄문에 이후 버전의 이해와 맞지 않는 부분이 있을 수 있음을 인지하고 계시면 좋을 것 같습니다.

adultlee commented 9 months ago

허락해주셔서 정말 감사드립니다! 답변해주신점도 추가적으로 학습을 진행해보며 이해해보겠습니다.

해당글은 React 톺아보기 (주석을 담아서)에서 작성될 예정입니다.

글에서 문제가 있어 삭제가 필요한 경우 바로 조치하겠습니다. 혹은 교정이 필요한 부분을 알려주시면, 겸허하게 받아들여 수정하겠습니다.

다시 한번 허락해주셔서 정말 감사합니다😊

goidle commented 9 months ago

@adultlee 안녕하세요. React 톺아보기 - 2 (주석을 담아서)까지 작성해주신 글들 잘 읽어보았습니다 :) 앞으로의 글 작성에 부탁드리고자 하는 부분이 있어서요.

글을 작성함에 있어서 대부분의 제 글을 그대로 옮겨서 주석을 다는 방식보다는 adultlee 님의 이해와 해석이 담긴 내용이 주가 되는 방식으로 작성되는 게 더 좋지 않을까 합니다. 그래야 저도 잘못 이해했거나 생각지 못했던 부분에서 많은 도움을 받을 수 있을 것 같아요.

화이팅 입니다.

adultlee commented 9 months ago

@goidle 네 확인했습니다!! 앞으로 작성될 글에 대해선 제 이해와 해석에 대해서 다시금 작성해보겠습니다! 기존에 작성된 글 또한 수정을 하도록 하겠습니다!! 읽어주셔서 정말 감사합니다😊

JongMany commented 9 months ago

혹시 이런 대규모 오픈소스를 공부하실 때, 공부하시는 방법이 어떻게 될까요??