![]()
서론컴포넌트를 개발하다보면 서로 독립적으로 선언된 컴포넌트가 관계를 갖는 경우가 있습니다.html태그에서 select태그와 option태그의 관계를 예로 들 수 있습니다.option은 select에 종속된 요소로 select요소의 클릭 상태를 공유받으며 이러한 상태 공유가 캡슐화되어 있습니다. key1 key2 key3 이런 암묵적 관계의 표현을 리액트 컴포넌트에서 할 수 없을까요? 이러한 접근이 바로 Compond Pattern입니다. 이 패턴은 상위 컴포넌트와 하위 컴포넌트 간의 관계를 직관적으로 표현합니다.아래 코드는 chakra-ui의 menu 컴포넌트 입니다. 첨부된 이미지의 UI를 상상해보세요! }> Actions Download Create a Copy M..
![]()
서론"useEffect에 대해 설명해주세요"라는 질문을 받으면 어떤 대답을 해야 할까요?리액트 공식 문서에 따르면 effect는 함수 컴포넌트와 외부 시스템과의 동기화를 목적으로 만들어졌다고 합니다.여기서 외부 시스템이란 DB,네트워크, 브라우저 DOM등이 될 수 있습니다. react 앱을 개발 서버에서 실행하게 되면 useEffect가 의존성 배열과 상관없이 두번 실행되는 것을 경험하게 됩니다.이 부분 역시 동기화라는 키워드와 연결됩니다. 즉 이팩트 함수와 클린업 함수를 통해 subscrib와 unsubscrib가 올바르게 동작하는지 확인하기 위한 처리인 것이죠. 이제 부터 몇 가지 사례를 통해 불필요한 useEffect에 대해 알아보겠습니다. 1. 파생 상태 처리function Form() { co..
![]()
한번에 많은 대량의 데이터를 처리하게 되면 싱글 스레드 구조상 연산이 끝나기 전까지 웹이 먹통이 됩니다.이런 상황에서 태스크의 분산 처리가 필요한데 requestIdleCallback을 통해 브라우저의 유휴시간에 분할 요청하여 대량 데이터 연산을 처리할 수 있습니다. window.requestIdleCallback() - Web API | MDNwindow.requestIdleCallback() 메서드는 브라우저의 idle 상태에 호출될 함수를 대기열에 넣습니다. 이를 통해 개발자는 애니메이션 및 입력 응답과 같은 대기 시간이 중요한 이벤트에 영향을 미치지 않developer.mozilla.org 우리의 목표는 다음과 같습니다대량의 데이터를 처리하되 인터렉션을 유지한다.데이터 처리 진행율을 시각화한다...
1. Type assertion 대신 Type Guard로 타입 좁히기as(type assertion)대신 type guard를 사용하는 것이 대부분 더 안전합니다.as(type assertion)의 경우 type 체크의 블랙박스를 만들고 운영 이슈로 이어질 수 있습니다.const dog = {} as Dog;// ❌ 런타임 에러가 나기 쉽다.dog.bark();interface Animal { type: 'dog' | 'bird'}type AnimalType = Animal['type']interface Dog extends Animal { type: 'dog'; bark: VoidFunction}interface Bird extends Animal { type: 'bird'; ..
![]()
멀티 탭간 인터렉션에 대해 고려해야하는 순간이 있습니다.독립적 탭에서 발생하는 인터렉션을 구독해서 화면을 업데이트(예를 들면 받은 좋아요 혹은 새로운 메세지)를 해야할 수 있습니다.그럴 때 유용한 기능이 Broadcast Channel API입니다.Broadcast Channel API는 동일 origin을 가진 웹페이지간 통신 기능을 제공합니다.채널 명이 동일하다면 해당 채널에 대한 메세지를 수신할 수 있기 때문에 멀티 탭간 통신에 유용한 API 입니다.이 기능을 이용해서 React 앱에서의 멀티 탭 통신 예제를 만들어 보도록 하겠습니다.BroadcastChnnelManager를 만들어 중앙에서 모든 채널을 관리하도록 의도했습니다.BroadcastChnnelManager의 목표는 앱에서 이용되는 채널과..
