bkdragon's log

useImperativeHandle은 ref로 노출되는 핸들을 사용자가 직접 정의할 수 있게 해주는 React 훅이다. 무슨 소리냐면 컴포넌트 내부 함수를 부모 컴포넌트에서 실행할 수 있게 해준다는 소리이다.import React, { forwardRef, useRef, useImperativeHandle, Ref } from 'react';interface MyInputProps extends React.InputHTMLAttributes {}export interface MyInputHandle { focus: () => void; scrollIntoView: () => void;}const MyInput = forwardRef(function MyInput( props, ref: Ref) {..

Web Speech API 는 웹에서 음성 데이터를 인식할 수 있는 API 이다.주요 개념SpeechRecognition인식을 위한 인터페이스이다. 문법 , 언어 중간값 반환등의 옵션을 지정하고 음성 인식을 시작 또는 종료할 수 있다.speechstart, speechend, result, error 등의 이벤트 리스너를 등록할 수 있다.const grammar = "#JSGF V1.0; grammar colors; public = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | ind..

React에서 useRef로 DOM 요소에 대한 참조를 얻을 수 있다. 근데 ref는 컴포넌트에는 사용할 수 없는데 그 이유는 컴포넌트는 DOM 요소를 반환하는 함수이기 때문이다. 그래서 컴포넌트에 ref를 넘기려면 forwardRef 가 필요하다.import React, { forwardRef, Ref } from 'react';interface MyInputProps extends React.InputHTMLAttributes {}const MyInput = forwardRef( (props, ref: Ref) => { return ; });MyInput.displayName = "MyInput";export default MyInput;forwardRef로 감싸서 컴포넌트를 만들면 된다. ..

Portal을 사용해서 렌더링하는 컴포넌트는 play 함수의 canvasElement 내에 없기 때문에 찾을 수 없다. 따라서 @storybook/test에서 제공하는 screen을 사용해줘야 한다.import { expect, screen, waitFor, fireEvent, fn } from "@storybook/test";export const Default: Story = { name: "모달 창 기본", args: { onClose: fn(), isOpen: true, }, play: async ({ args, _ }) => { await waitFor(() => { expect(screen.getByTestId("..

storybook 의 play 함수를 사용하면 스토리가 렌더링 된 이후 사용자 상호작용을 시뮬레이션할 수 있다.설정play 함수를 사용하기 위해서는 스토리북 설정 파일에서 interactions 플러그인울 추가해야한다.npm install @storybook/test @storybook/addon-interactions --save-dev// .storybook/main.jsmodule.exports = { stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"], addons: ["@storybook/addon-interactions"],};방법사용자 상호작용 시뮬레이션의 전반적인 과정을 먼저 살펴보고 예제 코드..

이전에 작성한 글 중에 '합성 컴포넌트 패턴과 React Children API 를 활용한 컴포넌트 설계' 라는 글이 있다.그 글에서 Tab.Item 을 변경해보자.const Item: FC = ({ children, index }) => { const { activeTab, setActiveTab } = useContext(TabContext); if (index === undefined) { throw new Error("index is required"); } return ( setActiveTab(index)}> {children} );};이전 글에선 원래 이렇게 내부에서 스타일을 지정하는데 children을 ..

브라우저 처럼 드래그로 이동이 가능한 모달창을 만들어보자.기본 아이디어는 아래와 같다:마우스로 모달창을 클릭한 순간 현재 마우스 위치와 모달의 좌측 상단 모서리와 차이를 저장하고 드래그 중임을 알려주는 flag 상태를 true로 만든다.flag 가 true가 되면, movemove 이벤트 리스너를 등록하고, 움직이는 위치로 위치 상태값을 업데이트 시킨다.현재 마우스 위치와 모달의 좌측 상단 모서리와의 차이가 왜 필요한지는 예를 들면 쉽게 이해된다.만약 모달의 현재 위치가 (100, 100) 이고, 마우스 클릭 위치가 (120, 130) 이라면차이(dragOffset)는 (20, 30) 이 된다.그리고 마우스를 (150, 160) 으로 이동 하면새로운 모달 위치를 dragOffset 을 빼면 얻을 수 있..

공식문서에서는 Decorator 는 Story 을 감싸는 것이라고 설명한다.Decorator 를 사용하면 레이아웃을 잡거나 Story 에서 특정 컨텍스트를 공유하게 하는 것이 가능하다.zustand 전역 상태가 불필요하게 모든 Story가 아닌 특정 story 내에서만 유지되게 해보자.export const Default: Story = { name: "Default", parameters: { withZustand : true },};parameters 에 withZustand 라는 임의의 키를 추가하고 true 값을 설정해줬다.import { useEffect } from "react";import { useStore } from "@/hooks/useStore";impo..

Compound Components 패턴이란? (합성 컴포넌트)여러 컴포넌트를 논리적으로 그룹화하여 관련 컴포넌트들을 함께 사용하는 패턴HTML의 와 관계와 유사React Children API란?React Children API는 컴포넌트의 자식 요소들을 다루기 위한 유틸리티 메서드들의 집합이다.주요 메서드React.Children.map각 자식 요소에 대해 함수를 실행하고 새로운 배열을 반환한다.null이나 undefined는 무시된다.React.Children.forEachmap과 비슷하지만 새로운 배열을 반환하지 않는다.각 자식에 대해 함수 실행만 한다.React.Children.count자식 컴포넌트의 총 개수를 반환한다.null과 undefined도 포함해서 계산한다.React.Childre..

Storybook 은 페이지와 UI 컴포넌트를 독립적으로 테스트 할 수 있는 라이브러리이다. 개발중인 컴포넌트의 모습을 전체 앱을 실행하지 않아도 확인할 수 있다. 디자이너와 개발자, 개발자와 개발자의 협업에 큰 도움이 된다.최근 회사에서 공통으로 사용될 표준 컴포넌트와 유용한 훅스를 개발중인데 이것을 github packages 에 배포하고 컴포넌트는 Storybook과 Chromatic을 통해 배포해서 공유했다.주요 개념StoryStorybook 에서는 Story 라고하는 개념을 사용한다. 이는 컴포넌트의 렌더링된 상태를 캡쳐한 것이다.컴포넌트는 다양한 Props를 가질 수 있다. Props 에 따라 모양이 변하거나 사용법이 달라질 수 있다. 하나의 컴포넌트에 여러 Story가 존재할 수 있고 이것들..