만들면서 학습하기/React를 만들면서 이해해보자

본 게시글의 코드는 리액트 16버전을 기준으로 하고있습니다. 이전 게시글에서 reconciler 패키지의 rednerWithHooks함수를 찾았고, 거기서 훅을 주입한다는 것을 알게되었다. 그럼 실제 코드를 확인하며 어떻게 훅을 주입하고 있는지 확인해보자. renderWithHooks 우선 함수의 인자들을 확인해보자. current와 workInProgress, Component, props, refOrContext, nextRenderExpirationTime을 받아서 사용한다. 자... 하나씩보자. 일단 current와 workInProgress는 넘어가자. Component는 실행시켜야할 함수를 말한다. (ReactElement의 tag 프로퍼티) props는 ReactElement의 props를 ..

본 게시글의 코드는 리액트 16버전을 기준으로 하고있습니다. 이 글을 쓰게된 계기 이전 게시글까지 리액트처럼 동작하는 코드를 작성해보았다. 그런데 이전 게시글에서 만든 useState는 한가지 치명적인 문제가 있다. useState를 쓰는 컴포넌트가 조건부 렌더링이 되는 경우, states배열이 망가진다는 것이다. const Component1=()=>{ const [inner,setInner]=useState("컴포넌트1입니다!"); return {inner}; } const Component2=()=>{ const [inner,setInner]=useState("컴포넌트2입니다!"); return {inner}; } const App=()=>{ const [state,setState]=useState..

이 글을 읽기에 앞서 이 게시글은 리액트처럼 동작 하는 코드를 작성해보는 것이지 리액트와 100% 동일한 코드를 작성하려 하는 것이 아닙니다. 기존의 리렌더 기존의 리렌더링(사실 리렌더가 아니고 다른걸 렌더하는 거지만)은 명시적으로 다른 element를 넘겨서 업데이트 하는 형태였다. import App from './components/App'; import React from './core/React'; import { Change } from './components/Change'; const app = document.getElementById('root'); const prev = App(); React.render(prev, app); setTimeout(() => React.updateDOM..

이 글을 읽기에 앞서 이 게시글은 리액트처럼 동작 하는 코드를 작성해보는 것이지 리액트와 100% 동일한 코드를 작성하려 하는 것이 아닙니다. 이전게시글에서 render와 rerender를 구현했다....만 너무 성능이 안좋을 것 같으니 개선을 해보고자 한다. 참고로 아래의 diffing알고리즘은 이 블로그 글의 코드를 기반으로 작성, 개선되었다. 기존의 DOM요소 변경은 특정 DOM요소를 DOM API를 통해 가져와서 그 부분만 업데이트하는 형태이다. 이런 형태를 지금의 render방식에 적용할수는 없을까? 할수있다! 바로 기존의 element객체를 활용하는 것이다. 우리는 element객체를 DOM요소로 변경했다. 따라서 element객체의 중첩구조와 DOM요소의 중첩구조는 완벽하게 동일하다. 따라서..

이 글을 읽기에 앞서 이 게시글은 리액트처럼 동작 하는 코드를 작성해보는 것이지 리액트와 100% 동일한 코드를 작성하려 하는 것이 아닙니다. 이전게시글을 통해 JSX요소를 객체형태로 변환하는 것 까지 진행했다. 이제 JSX 컴포넌트는 tagName, props객체, children배열을 가진 객체로 관리된다. 그럼 이제 이걸 DOM api를 사용해서 객체를 DOM요소로 변환시키자. makeDOM /** * @param {object} element createElement로 만들어진 요소 * @param {string} element.tagName 요소의 태그 이름 * @param {object} element.props 요소의 속성 객체 * @param {Array|undefined} element...

이 글을 읽기에 앞서 이 게시글은 리액트처럼 동작 하는 코드를 작성해보는 것이지 리액트와 100% 동일한 코드를 작성하려 하는 것이 아닙니다. JSX jsx는 javascript + xml의 줄임말이다. 이걸 쓰면 html마냥 쓸수가 있다. 파악해보기 근데 이걸 어떻게 html마냥쓸 수가 있지???라는 생각이 들었다. 이건 과연 내부적으로 어떻게 처리가 되는걸까? 바벨의 트랜스파일링을 확인해보자 링크에서 위 이미지를 직접확인할 수 있다. jsx라는 함수로 변환되는 것을 볼 수 있다. 좀더 복잡한 형태는 어떨까? 요렇게 변환되는 것을 볼 수 있다. jsx함수 파악하기 그럼 jsx함수는 어떻게 작동하는지를 보자 우선 jsx나 jsxs나 똑같이 jsxProd를 호출한다. 그리고 위의 import문을 보면 알 ..