프로젝트/빙수먹을래?

빙액트 - styled-component(반의 반쪽) 적용

우리는 이제 빙액트를 구현하였는데 이제 css를 다룸에 있어서 styled-component를 사용하고자 했다. 그 이유는 애초에 리액트에서의 개발환경을 다 가져가고 싶기 때문이 가장 큰 것같다. 또 어떻게 구현됐을지 궁금하고 재밌기도 하고.. ※ 주의: 내 생각대로 구현하였으며 기존의 기능과 크게 다를 수 있음 먼저 styled-component의 동작방식을 보면 class를 랜덤한 값으로 지정해준다. 또 이 클래스를 css로 넣어줌으로써 스타일이 적용된다. 이를 활용해 js에서 css작성 클래스를 지정해 넣어보자. 먼저 styled-component를 적용해 렌더를 해보면 type에서 에러가 나는 것을 볼 수 있다. 이 에러가 발생하는 이유는 우리는 지금 createElement에서 type을 그대로..

빙액트 (5)

지난 번에 구현하였던 Vritual DOM에 이어 함수형 컴포넌트를 지원하기 위한 작업을 이어서 해보자. 7. 함수형 컴포넌트 함수형 컴포넌트에서는 두 가지 면에서 차이가 있는데 함수형 컴포넌트에서 만들어진 fiber는 DOM 노드가 없고 자식들을 props에 직접 가져오는 대신 함수를 실행하여 얻는다. 그래서 함수형 컴포넌트의 경우 따로 구현을 해줘야하기 때문에 조건 로직을 구현한다. function performUnitOfWork(fiber) { // 함수형 컴포넌트에서 만들어진 fiber는 DOM 노드가 없고 children을 props에서 직접 가져오는 대신 함수를 실행하여 얻는다. // 이를 판별하는 조건문을 만든다. const isFunctionComponent = fiber.type inst..

빙액트(4)

힘든 렌더링 과정은 얼추 끝난 것 같지만 브라우저가 렌더링 중에 개입한다면 미완성된 UI를 보게되는 이슈가 있었다. 이를 모든 작업이 끝난 다음에 전체 fiber 트리를 DOM에 커밋하는 방법으로 해결해보자. 5. 렌더와 커밋 먼저 모든 작업이 끝난 다음에 커밋을 할 대상인 루트 fiber를 추적해보자. 이를 work in progress 루트라는 뜻으로 wipRoot라고 부르겠다. let wipRoot = null; function render(element, container) { // 1. 렌더 실행 시 다음 단위 작업에 루트 fiber 설정 wipRoot = { dom: container, props: { children: [element], }, alternate: currentRoot, // ..

빙액트(3)

3. 브라우저와 작업 동시에 하(는 것처럼 보이)기 전 챕터에서 render를 구현했지만 재귀적으로 render를 하며 엘리먼트가 커진다면 브라우저가 렌더링이 끝날때까지 동작을 할 수 없는 문제가 있었다. 이 문제를 해결하기 위해 이 챕터에서 렌더링 작업을 더 세분화하고 브라우저가 끼어들 수 있게 할 것이다. 먼저 알아야 할 지식이 있는데 그것은 requestIdleCallback 함수이다. https://developer.mozilla.org/ko/docs/Web/API/Window/requestIdleCallback window.requestIdleCallback() - Web API | MDN window.requestIdleCallback() 메서드는 브라우저의 idle 상태에 호출될 함수를 대기..

빙액트 (2)

1. createElement 우리는 이제 우리가 만든 리액트로 대체 할 것이다. 앞서 살펴 봤듯이 JSX를 JS로 변환하면 createElement를 호출한다. 이는 type과 props를 가진 객체 엘리멘트를 반환한다. 이를 우리가 만든다면 아래와 같다. function createElement(type, props, ...children) { return { type, props: { ...props, children: children.map((child) => (typeof child === 'object' ? child : createTextElement(child))), }, }; } function createTextElement(text) { return { type: 'TEXT_ELEME..