react

서론"useEffect에 대해 설명해주세요"라는 질문을 받으면 어떤 대답을 해야 할까요?리액트 공식 문서에 따르면 effect는 함수 컴포넌트와 외부 시스템과의 동기화를 목적으로 만들어졌다고 합니다.여기서 외부 시스템이란 DB,네트워크, 브라우저 DOM등이 될 수 있습니다. react 앱을 개발 서버에서 실행하게 되면 useEffect가 의존성 배열과 상관없이 두번 실행되는 것을 경험하게 됩니다.이 부분 역시 동기화라는 키워드와 연결됩니다. 즉 이팩트 함수와 클린업 함수를 통해 subscrib와 unsubscrib가 올바르게 동작하는지 확인하기 위한 처리인 것이죠. 이제 부터 몇 가지 사례를 통해 불필요한 useEffect에 대해 알아보겠습니다. 1. 파생 상태 처리function Form() { co..

멀티 탭간 인터렉션에 대해 고려해야하는 순간이 있습니다.독립적 탭에서 발생하는 인터렉션을 구독해서 화면을 업데이트(예를 들면 받은 좋아요 혹은 새로운 메세지)를 해야할 수 있습니다.그럴 때 유용한 기능이 Broadcast Channel API입니다.Broadcast Channel API는 동일 origin을 가진 웹페이지간 통신 기능을 제공합니다.채널 명이 동일하다면 해당 채널에 대한 메세지를 수신할 수 있기 때문에 멀티 탭간 통신에 유용한 API 입니다.이 기능을 이용해서 React 앱에서의 멀티 탭 통신 예제를 만들어 보도록 하겠습니다.BroadcastChnnelManager를 만들어 중앙에서 모든 채널을 관리하도록 의도했습니다.BroadcastChnnelManager의 목표는 앱에서 이용되는 채널과..