refactor: React에서 제공하는 타입 import 시, 구조 분해 할당

JECT-Study · Dec 19, 2024 · d082326 · d082326
1 parent b6769d8
commit d082326
Show file tree

Hide file tree

Showing 10 changed files with 22 additions and 22 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,6 @@
 import type { Metadata } from 'next';
 import localFont from 'next/font/local';
-import React from 'react';
+import { ReactNode } from 'react';
 
 import '../styles/globals.css';
 
@@ -24,7 +24,7 @@ export const metadata: Metadata = {
 export default function RootLayout({
   children,
 }: Readonly<{
-  children: React.ReactNode;
+  children: ReactNode;
 }>) {
   return (
     <html lang='ko'>

diff --git a/src/components/Button/CategoryButton.tsx b/src/components/Button/CategoryButton.tsx
@@ -1,8 +1,8 @@
 import { CategoryButtonProps } from '@/types';
 
-import React from 'react';
+import { FC } from 'react';
 
-const CategoryButton: React.FC<CategoryButtonProps> = ({
+const CategoryButton: FC<CategoryButtonProps> = ({
   backgroundColor = 'bg-gray-800',
   textColor = 'text-gray-300',
   textSize,

diff --git a/src/components/Button/FollowButton.tsx b/src/components/Button/FollowButton.tsx
@@ -1,12 +1,12 @@
 'use client';
 
-import React, { useState } from 'react';
+import { FC, useState } from 'react';
 
 import { FollowButtonProps } from '@/types/buttons/FollowButtonProps';
 
 import Icon from '../Icon/Icon';
 
-const FollowButton: React.FC<FollowButtonProps> = ({
+const FollowButton: FC<FollowButtonProps> = ({
   backgroundColor = 'bg-gray-900',
   textColor = 'text-white',
   textSize = 'button-s',

diff --git a/src/components/Button/SquareButtonL.tsx b/src/components/Button/SquareButtonL.tsx
@@ -1,8 +1,8 @@
 import { SquareButtonLProps } from '@/types';
 
-import React from 'react';
+import { FC } from 'react';
 
-const SquareButtonL: React.FC<SquareButtonLProps> = ({
+const SquareButtonL: FC<SquareButtonLProps> = ({
   backgroundColor = 'bg-gray-800',
   textColor = 'text-white',
   textSize,

diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
@@ -1,17 +1,17 @@
-import React from 'react';
+import { ComponentType, FC } from 'react';
 
 import { IconProps } from '@/types';
 
 import iconSizes from './iconSizes';
 import { iconsNames } from './iconsNames';
 
-const Icon: React.FC<IconProps> = ({
+const Icon: FC<IconProps> = ({
   name,
   size = 'm',
   className = '',
   onClick,
 }: IconProps) => {
-  const Component = iconsNames[name] as React.ComponentType<{
+  const Component = iconsNames[name] as ComponentType<{
     className?: string;
     onClick?: () => void;
   }>;

diff --git a/src/components/Icon/icons/Close.tsx b/src/components/Icon/icons/Close.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import { FC } from 'react';
 
-const Close: React.FC<{ className?: string; onClick?: () => void }> = ({
+const Close: FC<{ className?: string; onClick?: () => void }> = ({
   className,
   onClick,
 }) => {

diff --git a/src/components/Icon/icons/Menu.tsx b/src/components/Icon/icons/Menu.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import { FC } from 'react';
 
-const Menu: React.FC<{ className?: string; onClick?: () => void }> = ({
+const Menu: FC<{ className?: string; onClick?: () => void }> = ({
   className,
   onClick,
 }) => {

diff --git a/src/components/Icon/iconsNames.ts b/src/components/Icon/iconsNames.ts
@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC } from 'react';
 
 import AlertCircle from './icons/AlertCircle';
 import AlternateShare from './icons/AlternateShare';
@@ -39,7 +39,7 @@ import UploadShare from './icons/UploadShare';
 
 export const iconsNames: Record<
   string,
-  React.FC<{ className?: string; onClick?: () => void }>
+  FC<{ className?: string; onClick?: () => void }>
 > = {
   AlertCircle,
   AlternateShare,

diff --git a/src/components/Layout/AppShell.tsx b/src/components/Layout/AppShell.tsx
@@ -6,9 +6,9 @@ import Navbar from '@/components/Navbar';
 import { NextUIProvider } from '@nextui-org/react';
 import { ThemeProvider as NextThemesProvider } from 'next-themes';
 
-import React from 'react';
+import { ReactNode } from 'react';
 
-const AppShell = ({ children }: { children: React.ReactNode }) => {
+const AppShell = ({ children }: { children: ReactNode }) => {
   return (
     <>
       <NextUIProvider>

diff --git a/src/types/buttons/BaseButtonProps.ts b/src/types/buttons/BaseButtonProps.ts
@@ -1,17 +1,17 @@
-import React from 'react';
+import { ReactNode } from 'react';
 
 export interface BaseButtonProps {
   backgroundColor: string;
   textColor: string;
   textSize: string;
-  children: React.ReactNode;
+  children: ReactNode;
 
   onClick?: () => void;
   ariaLabel?: string;
   disabled?: boolean;
   loading?: boolean;
 
-  icon?: React.ReactNode;
+  icon?: ReactNode;
   iconPosition?: 'left' | 'right';
 
   type?: 'button' | 'submit' | 'reset';