개발일지 (11월 2주차 회고)

 

 

Feedback

- 디자인 패턴에 대한 깊이 있는 이해가 필요하다.

Overview

React Element를 하나로 감싸는 이유?

 

 

CRA eject란?

eject는 Create React APP을 통해서 애플리케이션을 설정했을 때, 감춰져있는 모든 설정들을 밖으로 추출해주는 명령어이다. 한번 실행하면 되돌릴 수 없으며, babel, webpack등의 기본적인 설정들이 추출되어 나온다. 

 

 

Infinite Scroll vs Virtual Scroll

무한 스크롤은 인스타그램 피드나, 페이스북 피드처럼 끝없이 스크롤 할 수 있도록 구현하는 방식으로, 웹 브라우저에서는 ScrollTop값을 이용해서 스크롤의 끝에 닿았는지를 판단한 후에 API Call을 통해 추가 함수를 로딩해오는 방식이다. 다만 수많은 피드들을 계속해서 로드해오기만 하면 메모리 부족, 과하게 많은 DOM Node 개수 등의 문제로 과부하가 일어날 수 있기 때문에 적절한 가상스크롤을 사용해서 브라우저내에 사용가능한 DOM노드를 적절하게 유지하는 것이 필요한다.

 

 

Javascript File Reader

fileReader.onLoad함수를 정의한다. 

const reader = new FileReader();
reader.onLoad = (e) => {};

해당 이벤트 핸들러는 onLoad이벤트가 fire될 떄 실행되며, reader.readAsText등의 메서드를 통해 읽어온 콘텐츠들이 사용가능할때 실행되므로 이 이벤트 핸들러에서 값에 접근할 수 있다.

 

 

Javascript throttling

빈번한 onChange이벤트들이 수행하는 연산의 로드가 클 경우, 이를 적절하게 제어하기 위해서 사용한다.

Throttling은 특정 시간동안 한번만 이벤트가 발생하도록 하는 것을 의미한다. 예를 들어서 Throttle Time이 100ms로 설정되어 있다면, 해당 시간동안 100번 이벤트를 발생시켜도 단 한번만 이벤트 핸들러가 동작한다는 의미이다.

 

Debounce는 Throttling과 다르게 특정 시간동안 이벤트가 발생하지 않아야 마지막 이벤트만 호출한다는 점에서 다르다 예를 들어서 Debounce Time이 100ms로 설정되어 있다면, 100ms동안 계속 이벤트를 발생시키면 이벤트가 계속 무시되고, 마지막 이벤트 후 100ms동안 아무런 이벤트가 발생하지 않아야 그 마지막 이벤트의 이벤트 핸들러를 동작시킨다는 의미이다.

 

 

React Memo

React Memo는 PureComponent와 같이 Props의 변경이 없는 컴포넌트의 리렌더링을 막아 브라우저의 자원을 효율적으로 사용하게 해준다. 하지만, 반대로 props가 자주 바뀌는 컴포넌트에 React.Memo를 적용하게 되면, 오히려 props비교를 더 많이하게 되어 비효율적인 컴포넌트가 될 수 있다. 이를 잘 파악하여 적절한 곳에 Memo를 사용하는 것이 중요하다.

 

React Fiber에 대한 간단한 소개

자바스크립트는 싱글 스레드로 동작한다. 자바스크립트는 비동기처리를 하기 위해서 이벤트 큐를 사용하는데, 이 이벤트 큐는 콜 스택이 비어있을 때만 동작하기 때문에 콜 스택에 함수들이 남아 있으면 비동기 처리가 딜레이된다. 

 

DOM 조작은 콜스택을 채우고, 이러한 곳에서 비동기 애니메이션 처리를 많이 하다보면 콜스택이 빠르게 비워지지 못해 콜백 함수들이 딜레이되어 버벅거리게 된다. React Fiber는 이런 문제를 해결하기 위해서 도입되었다.

 

RequestIdleCallback을 이용해 동작중인 React 코드를 매번 부르고, 주어진 시간을 초과하면 잠시 멈추고, 우선순위가 더 높은 일에 양보하도록 한다. 사실상 싱글 스레드인 자바스크립트는 멀티 스레드인 것처럼 동작하게 한것. 이에 따른 Context Switching 비용 등으로 인해 아직까지는 복잡한 애니메이션 처리를 하지 않는 이상은 기존의 Virtual DOM방식과 크게 다르진 않아보인다.

 

 

React Event Handling

리액트에서는 이벤트 델리게이션 패턴을 사용한다.

자식요소에 모두 이벤트 리스너들을 등록하는 것이 아니라 가장 상위의 요소에 이벤트 리스너를 달아준다. 이벤트를 감지할 때는 event.target을 이용하여 감지한다.