[WIP]📘stories 내 render 함수가 React 컴포넌트가 아닌 일반 함수로 인식되어 useState 훅 호출이 금지되어 발생하는 오류

TextField.stories.tsx

import type { Meta, StoryObj } from '@storybook/react';
import React, { useState } from 'react';

import Image from '../../../public/icons/Image';
import TextField from './TextField';

const meta: Meta<typeof TextField> = {
  title: 'Components/TextField',
  component: TextField,
  tags: ['autodocs'],
  argTypes: {
    size: {
      control: { type: 'select' },
      options: ['sm', 'md', 'lg'],
    },
    radius: {
      control: { type: 'select' },
      options: ['none', 'sm', 'md', 'lg'],
    },
    variant: {
      control: { type: 'select' },
      options: ['outline', 'filled'],
    },
    disabled: {
      control: { type: 'boolean' },
    },
  },
};

export default meta;
type Story = StoryObj<typeof TextField>;

export const Default: Story = {
  render: args => {
    const [value, setValue] = useState('');

    return <TextField {...args} value={value} onChange={e => setValue(e.target.value)} />;
  },
  args: {
    placeholder: 'Enter text...',
    size: 'md',
    radius: 'md',
    variant: 'outline',
    icon: <Image src="file.svg" alt="img" />,
    disabled: false,
  },
};

 

error

34:31  Error: React Hook "useState" is called in function "render" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".  react-hooks/rules-of-hooks

 

ESLint react-hooks/rules-of-hooks 규칙에 의해 Storybook 스토리 내 render 함수가 React 컴포넌트가 아닌 일반 함수로 인식되어 useState 훅 호출이 금지되어 발생하는 오류입니다.

---

큰 구조 변경 없이 오류를 피하는 간단한 방법

render 함수에서 바로 훅을 호출하지 말고, 훅을 사용하는 컴포넌트를 함수 선언문으로 따로 만들어서 render에서 호출하는 방식입니다.

import React, { useState } from 'react';

function ControlledTextField(args: typeof TextField extends React.ComponentType<infer P> ? P : never) {
  const [value, setValue] = useState('');
  return <TextField {...args} value={value} onChange={e => setValue(e.target.value)} />;
}

export const Default: Story = {
  render: args => <ControlledTextField {...args} />,
  args: {
    placeholder: 'Enter text...',
    size: 'md',
    radius: 'md',
    variant: 'outline',
    icon: <Image src="file.svg" alt="img" />,
    disabled: false,
  },
};

 

---

SearchInput.stories.tsx

export const Default: Story = {
  render: args => {
    const [value, setValue] = useState('');

    return (
      <SearchInput
        {...args}
        value={value}
        onChange={e => setValue(e.target.value)}
        onSubmit={e => {
          e.preventDefault();
          console.log('Submit:', value);
        }}
      />
    );
  },
  args: {
    placeholder: '검색하세요',
    size: 'md',
  },
};

 

수정

function ControlledSearchInput(
  args: typeof SearchInput extends React.ComponentType<infer P> ? P : never
) {
  const [value, setValue] = useState('');

  return (
    <SearchInput
      {...args}
      value={value}
      onChange={e => setValue(e.target.value)}
      onSubmit={e => {
        e.preventDefault();
        console.log('Submit:', value);
      }}
    />
  );
}

export const Default: Story = {
  render: args => <ControlledSearchInput {...args} />,
  args: {
    placeholder: '검색하세요',
    size: 'md',
  },
};