분류 전체보기
이게(this) 뭐야
this this는 무엇일까요? 자바스크립트에서 함수는 호출될 때, 매개변수로 전달되는 인자값 이외에, arguments 객체와 this를 암묵적으로 전달받습니다. 또 this는 함수 호출방식에 따라 this에 바인딩되는 객체가 달라집니다. 문제는 함수는 다양한 방식으로 호출할 수 있습니다. 그 말은 this가 가리키는 것은 호출 방식에 차이가 있다는 것입니다. 예시를 살펴봅시다 일반 함수 내부에서의 this console.log(this); function square(number){ // 일반 함수 내부에서 this는 전역 객체 window를 가리킨다. console.log(this); return number * number; } square(2); 일반 함수 내부에서 this는 기본적으로 전역 객..
빙액트 - 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, // ..