FRONT-END71 나만의 React 만들기(Build your own react) - STEP 5 https://pomb.us/build-your-own-react/ 을 기반으로 학습 내용을 정리한 글입니다.STEP 5 - Render and commit Phases이전 step에서 수정해야 할 코드가 있다. if (fiber.parent) { fiber.parent.dom.appendChild(fiber.dom);}바로 이 부분인데, element에 대해 작업할 때마다 DOM에 새 노드를 추가하고 있다. 전체 트리 렌더링을 완료하기 전에 브라우저가 작업을 중단할 수 있는데, 이 경우 사용자에게는 완전하지 않은 UI가 표시된다. 따라서 DOM을 변경하는 부분을 제거하고, 대신 fiber tree의 root를 추적할 것이다.이를 work in progress root, 줄여서 wipRoot라고 부른다.. 2024. 9. 6. 나만의 React 만들기(Build your own react) - STEP 4 https://pomb.us/build-your-own-react/ 을 기반으로 학습 내용을 정리한 글입니다.STEP 4 - Fibers이제 앞선 step에 이어 작업 단위를 구성해야 한다. 이때 fiber tree라는 데이터 구조가 필요하다.각 element마다 하나의 fiber가 있고 각 fiber는 작업 단위가 된다. Didact.render( , container);위 코드를 Fiber Tree로 나타내면 다음과 같다. 위 코드를 element tree로 렌더링한다고 가정해 보자.root fiber를 생성하고, nextUntilOfWork로 설정한다.나머지 작업은 PerformUnitOfWork 함수에서 수행되며 각 fiber에 대해 3가지 작업을.. 2024. 9. 5. 나만의 React 만들기(Build your own react) - STEP 3 https://pomb.us/build-your-own-react/ 을 기반으로 학습 내용을 정리한 글입니다.STEP 3 - Concurrent Mode이전 step까지의 코드에서 리팩터링이 필요한 부분이 있다. 그 부분을 먼저 수정하고 진행해 보자.바로 render function 내부에 재귀로 호출하는 부분이다.element.props.children.forEach((child) => render(child, dom)); [왜 문제가 될까?🧐]렌더링을 시작하면 완벽한 element tree를 렌더링 할 때까지 멈추지 않는다. element tree가 크면 메인 스레드를 오랫동안 차단할 수 있다. 그러면 브라우저가 사용자 입력 처리나, 애니메이션을 매끄럽게 유지하는 것과 같은 우선순위가 높은 작업을 .. 2024. 9. 5. 나만의 React 만들기(Build your own react) - STEP 2 https://pomb.us/build-your-own-react/ 을 기반으로 학습 내용을 정리한 글입니다.STEP 2 - The render functionSTEP1 코드에 이어 이제 render function을 만들어보자.ReactDOM.render 버전을 Didact.render로 만들어보는 것이 이번 step의 목표다.function createElement(type, props, ...children) { return { type, props: { ...props, children: children.map((child) => typeof child === "object" ? child : createTextElement(child) ), .. 2024. 9. 4. 나만의 React 만들기(Build your own react) - STEP 1 https://pomb.us/build-your-own-react/ 을 기반으로 학습 내용을 정리한 글입니다.STEP 1 - The createElement Function이제는 React 코드를 우리만의 React인 Didact로 대체해보자.우선 createElement function을 만들어보는 것이 이번 step의 목표다. JSX를 JS로 변환하는 createElement 함수를 만들어보자.const element = ( bar )const container = document.getElementById("root")ReactDOM.render(element, container) 우선 STEP 0을 다시 되짚어보면,위 코드 element JSX가 babel에 의해 변환이 되면 아.. 2024. 9. 4. 나만의 React 만들기(Build your own react) - STEP 0 https://pomb.us/build-your-own-react/ 을 기반으로 학습 내용을 정리한 글입니다.React가 제공해 주는 기능들을 당연한 듯 사용해 왔지만,React 내부가 어떻게 동작하는지 궁금해본 적 없이 당연한 듯 사용하기를 n년...그리고 모던 React Deep Dive를 사고 앞 챕터 부분을 분명 읽었는데 역시 빠르게 휘발되어 버렸다... build-your-own-react 에서 알려주는 대로 차근차근 따라가며 확실히 이해하는 과정 기록을 위해 블로그를 작성한다.왜냐면 사실 한번 쭉 따라 해봤는데, 완벽히 이해했나요? 아니요🙂↔️... 상태이기 때문이다.다시 차근차근.. 이제는 알고쓰자 React! 실습을 하며 같이 진행해야 하기 때문에 해당 문서에서 지원하는 리액트 버전을 .. 2024. 9. 3. 이전 1 2 3 4 5 6 7 ··· 12 다음
