Transcript
00:00:00React에 아주 흥미로운 새 도구가 등장해서, 우리가 UI 요소를
00:00:05모달, 다이얼로그, 확인 창 같은 대화형 UI를 렌더링하는 방식을 완전히 바꾸고 있습니다.
00:00:11바로 React Call입니다.
00:00:13복잡한 다단계 폼 위저드, 확인 모달, 또는 아이템 선택기를
00:00:18React로 만들어 본 적이 있다면, 열림 상태 관리, 성공 콜백 전달,
00:00:24그리고 프로미스 처리가 코드를 얼마나 엉망으로 만드는지 잘 아실 겁니다.
00:00:28하지만 React Call은 바로 이 문제를 해결하기 위해 설계되었습니다.
00:00:31오늘 영상에서는 React Call을 살펴보고, 어떻게 작동하는지,
00:00:36코드 예제도 함께 확인해 보겠습니다.
00:00:37정말 재미있을 테니 바로 시작해 보죠.
00:00:44그럼 React Call이란 정확히 무엇일까요?
00:00:47React 컴포넌트를 비동기 함수처럼 호출할 수 있게 해주는 아주 가볍고 작은 유틸리티입니다.
00:00:52브라우저의
00:00:53기본 window.confirm API를 생각해 보세요.
00:00:57이 함수를 호출하면 코드가 잠시 멈추고 사용자가 확인이나 취소를 클릭하기를 기다렸다가,
00:01:03불리언 값을 바로 반환하죠.
00:01:06비즈니스 로직을 호출하는 쪽에 그대로 유지할 수 있습니다.
00:01:09React Call은 바로 그 직관적인 멘탈 모델을 현대 React 환경으로 가져온 것입니다.
00:01:16isModalOpen 같은 별도의 상태 변수를 만들거나, onClose나
00:01:22onSubmit prop을 전달하고, 복잡한 컨텍스트 프로바이더나 포털을 설정하는 대신, 간단히
00:01:29컴포넌트의 응답을 기다리면(await) 됩니다.
00:01:30내부적으로는 프로미스 관리를 추상화하고, 타입 요청과 응답을
00:01:36기본적으로 처리하며, 핫 모듈 교체(HMR)도 완벽히 지원해서 개발 워크플로우를
00:01:41빠르게 유지합니다.
00:01:42그리고 세 가지 개념을 제공합니다: 루트와 스택, 업서트(upsert), 그리고 뮤테이션 플로우입니다.
00:01:48첫 번째 주요 개념은 루트와 스택입니다.
00:01:50React Call에서 만드는 호출 가능한 컴포넌트는 함수가 아닙니다.
00:01:54실제로 애플리케이션 트리 안에서 자체 마운팅 지점 역할을 합니다.
00:01:58앱 파일이나 최상위 레이아웃 파일처럼 보이는 곳 어디에나 컴포넌트를
00:02:03루트 태그로 배치하면 리스너처럼 동작합니다.
00:02:06여러 번 호출하면 React Call이 내부 스택을 사용하여 관리하고,
00:02:11모든 활성 인스턴스를 자동으로 렌더링합니다.
00:02:14또한 닫힐 때 깔끔한 종료 애니메이션을 처리하고, 각 인스턴스가 서로
00:02:20간섭하지 않도록 격리해 줍니다.
00:02:22다음은 싱글톤 UI 패턴에 아주 유용한 업서트(upsert)입니다.
00:02:27보통 컴포넌트를 여러 번 호출하면 스택에 새로운 인스턴스가 추가됩니다.
00:02:33하지만 화면에 하나만 떠 있어야 하는 글로벌 알림 토스트, 로딩 오버레이,
00:02:39혹은 프로그레스 인디케이터를 만들 때는 어떻게 할까요?
00:02:45그럴 땐 call 대신 upsert를 실행하면 됩니다.
00:02:48이미 활성 인스턴스가 있으면 중복으로 생성하지 않고,
00:02:52기존 컴포넌트에 새로운 데이터를 즉시 업데이트해 줍니다.
00:02:56마지막으로 뮤테이션 플로우가 있습니다.
00:02:58이 라이브러리에는 호출 가능한 UI를 비동기 작업과 직접 연결하도록 설계된
00:03:04useMutationFlow 훅이 내장되어 있습니다.
00:03:06제출 시 백엔드 API 요청이 발생하는 확인 모달이 있다면, 이 훅이
00:03:12보류 상태를 자동으로 관리해 줍니다.
00:03:15비동기 함수가 실행되는 동안 모달을 열어두고 로딩 스피너를 보여주며,
00:03:21프로미스가 성공적으로 해결된 후에야 호출을 종료합니다.
00:03:25UI 상태와 데이터 변형을 아주 멋지게 연결해 주죠.
00:03:29이제 웹사이트에서 실제 예제들을 살펴볼 텐데, 정말 직관적이고
00:03:34이해하기 쉽습니다.
00:03:36또한 구현하는 데 코드가 얼마나 조금 필요한지 잘 보여줍니다.
00:03:41예를 들어 확인 다이얼로그의 경우, 여기 호출 가능한 객체를 만들기만 하면 됩니다.
00:03:48그리고 create callable 훅으로 컴포넌트를 고차 컴포넌트로 감싸주고요.
00:03:54그런 다음 버튼 클릭 이벤트에 call 함수를 전달하면 됩니다.
00:04:01호출 가능한 객체에 필요한 건 이게 전부입니다.
00:04:04루트에서는 컴포넌트 자체를 임포트하기만 하면 되고요.
00:04:08삭제 버튼의 경우, 확인 컴포넌트가 create callable
00:04:14고차 함수로 감싸져 있기 때문에, 클릭 핸들러에서 비동기로 호출하면 됩니다.
00:04:21정말 깔끔하고, 복잡한 보일러플레이트 코드가 없죠.
00:04:26컨텍스트 프로바이더나 상태 변수, Redux나 Zustand도 필요 없습니다.
00:04:31더 다양한 사례가 궁금하다면 예제 섹션을 확인해 보세요.
00:04:36각 예제마다 코드 스니펫도 제공됩니다.
00:04:40백그라운드에서 실행되는 비동기 작업처럼 꽤 복잡한 예제들도
00:04:46확인할 수 있습니다.
00:04:49이 멋진 예제들을 모두 살펴보세요.
00:04:52정말 훌륭하고 가벼운 도구라고 생각합니다.
00:04:55잘 만들었네요.
00:04:56자, 여기까지입니다.
00:04:57React Call에 대한 핵심 내용이었습니다.
00:04:59물론 직접 간단한 프로미스 래퍼나 모달을 코딩할 수도 있겠지만,
00:05:06이 라이브러리는 스택 내의 여러 활성 인스턴스 처리,
00:05:11upsert를 통한 싱글톤 업데이트, 무거운 백엔드 작업과 UI 상태 동기화 같은
00:05:17까다로운 에지 케이스를 아름답게 처리합니다.
00:05:18더 깔끔하고 읽기 쉬운 React 아키텍처를 위해 프론트엔드 툴킷에
00:05:24넣어두기 딱 좋은 가벼운 유틸리티라고 생각합니다.
00:05:26React Call에 대해 어떻게 생각하시나요?
00:05:28이 패턴이 마음에 드시나요?
00:05:29여러분 프로젝트에도 사용해 보실 건가요?
00:05:31아래 댓글 섹션에 알려주세요.
00:05:33이런 기술적인 내용이 도움이 되었다면 영상 아래 좋아요 버튼을
00:05:37눌러서 알려주세요.
00:05:39그리고 저희 채널 구독도 잊지 마시고요.
00:05:42지금까지 BetterStack의 Andrus였고, 다음 영상에서 뵙겠습니다.
00:05:58감사합니다.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video