나만의 react 만들기10 나만의 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 다음
