전체 글93 memo, useMemo 이해하기 리액트 공식문서를 보고 정리한 내용입니다.누군가 내게 memo, useMemo, useCallback 그거 왜 써? 라고 물어본다면 자신 있게 대답할 수 있을까?"성능 최적화를 위해 쓰지~""어떻게 최적화가 되는데?""음..."학습 전 누가 나에게 물어봤다면 이렇게 꿀 먹은 벙어리가 되어버렸을 것 같다...!하지만 이번에 나만의 React 만들기를 구현하며 memo, useMemo를 직접 구현해보려고 하니 다시 개념을 확실히 짚고 넘어가야 할 필요성을 강하게 느껴 학습해보았다.사실 당연한 거지 뭔지 알아야 만들 수 있으니까~!그래서 시작한 공식문서 정리! 이 정리를 바탕으로 정리가 되어 구현까지 진행할 수 있었다!시작해보자 😁 memo공식문서 : https://ko.react.dev/reference/.. 2024. 9. 11. 나만의 React 만들기(Build your own react) - STEP +α STEP +α - memo, useMemo 구현 지금까지는 문서에 나와있는 내용을 차근차근 따라 하며 구현해 봤다.한 번에 이해가 가지 않는 부분들이 있어서 문서보고 따라치며 github README에 정리 -> 정리한 내용을 바탕으로 다시 처음부터 코드를 짜보며 블로그에 다시 정리 -> 마지막으로 코드 다시 작성해 보면서 총 3번을 해보니까 이제야 흐름이 눈에 보이기 시작했다!문서 내용에 그치지 않고, 더 나아가 memo, useMemo를 구현해야 한다고 하면 어떻게 작성해야 할지 추가 스텝을 진행해보려고 한다!우선 이 memo, useMemo를 구현하기 전에 memo와 useMemo가 뭔지 알아야 구현을 시작할 수 있으니 개념 정리를 다시금 진행했다. 개념 정리는 노션에 정리해 놔서 이 글 바로 다음.. 2024. 9. 10. 나만의 React 만들기(Build your own react) - STEP 8 https://pomb.us/build-your-own-react/ 을 기반으로 학습 내용을 정리한 글입니다.STEP 8 - Hooks이제 function components가 있으니 state를 추가해보는 작업을 해보겠다.const Didact = { createElement, render, useState,};/** @jsx Didact.createElement */function Counter() { const [state, setState] = Didact.useState(1); return setState((c) => c + 1)}>Count: {state};}const element = ;const container = document.getElementById("root"); 영.. 2024. 9. 9. 나만의 React 만들기(Build your own react) - STEP 7 https://pomb.us/build-your-own-react/ 을 기반으로 학습 내용을 정리한 글입니다.STEP 7 - Function Components이제 function components에 대한 지원을 할 수 있도록 코드를 수정해보자. function App(props) { return Hi {props.name};}const element = ;const container = document.getElementById("root");Didact.render(element, container);위와 같이 h1을 반환하는 간단한 function component를 사용해보겠다.위 jsx 코드를 js로 변환하면 아래 코드와 같다.function App(props) { return Didact.. 2024. 9. 7. 나만의 React 만들기(Build your own react) - STEP 6 https://pomb.us/build-your-own-react/ 을 기반으로 학습 내용을 정리한 글입니다.STEP 6 - ReconciliationReconciliation이란 재조정이라는 의미이다.리액트 공식문서에도 해당 내용이 있으니 참고해도 좋을 것 같다. 이전 step까지는 DOM에만 항목을 추가했다.이번 step부터는 노드를 업데이트하거나 삭제하는 방법에 대해 학습할 것이다.답을 먼저 말하자면 렌더링 함수에서 받은 요소를 DOM에 커밋한 마지막 fiber tree와 비교해야 한다.비교를 위해 커밋를 마친 후에 DOM에 커밋한 마지막 fiber tree에 대한 참조를 currentRoot라는 변수로 저장했다.즉, currentRoot는 이전에 렌더링된, 그리고 DOM에 커밋된 fiber tre.. 2024. 9. 6. 나만의 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. 이전 1 2 3 4 5 6 ··· 11 다음
