feat: ref 추가

.eslintrc.js

@@ -1,3 +1,7 @@
+const { resolve } = require('node:path');
+
+const project = resolve(process.cwd(), 'tsconfig.json');
+
 /** @type {import("eslint").Linter.Config} */
 module.exports = {
 	root: true,
@@ -74,7 +78,6 @@ module.exports = {
 				pathGroupsExcludedImportTypes: ['type'],
 			},
 		],
-		// 'import/no-relative-parent-imports': 'error',
 	},
 	ignorePatterns: [
 		// Ignore dotfiles
@@ -89,7 +92,6 @@ module.exports = {
 		},
 	],
 	parserOptions: {
-		project: './tsconfig.json',
-		tsconfigRootDir: __dirname,
+		project: true,
 	},
 };

package.json

@@ -55,10 +55,11 @@
         "eslint": "^8.53.0",
         "eslint-config-prettier": "^9.1.0",
         "eslint-config-turbo": "^2.0.0",
+        "eslint-import-resolver-typescript": "^3.6.1",
         "eslint-plugin-import": "^2.29.1",
+        "eslint-plugin-prettier": "^5.1.3",
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-refresh": "^0.4.4",
-        "eslint-plugin-prettier": "^5.1.3",
         "typescript": "^5.2.2",
         "vite": "^5.0.0",
         "vite-plugin-dts": "^3.6.3"

src/components/Markdownarea/Markdownarea.tsx

@@ -1,42 +1,43 @@
 import type { MarkdownareaPropsProviderProps } from './contexts/props/types';
 
-import { memo } from 'react';
+import { forwardRef } from 'react';
 
 import { MarkdownareaHistoryProvider } from './contexts/history';
 import {
 	MarkdownareaKeymapProvider,
 	useMarkdownareaKeymapContext,
 } from './contexts/keymap';
-import { MarkdownareaPropsProvider } from './contexts/props';
+import {
+	MarkdownareaPropsProvider,
+	useMarkdownareaPropsContext,
+} from './contexts/props';
 import {
 	MarkdownareaValueProvider,
 	useMarkdownareaValueContext,
 } from './contexts/value';
 
-function MarkdownareaComponent() {
-	const { markdownareaRef } = useMarkdownareaValueContext();
+const MarkdownareaComponent = forwardRef<HTMLTextAreaElement>((_, ref) => {
+	const { ...props } = useMarkdownareaPropsContext();
 	const { onChange } = useMarkdownareaValueContext();
 	const { onKeyDown } = useMarkdownareaKeymapContext();
 
 	return (
 		<textarea
-			ref={markdownareaRef}
+			ref={ref}
 			autoComplete="off"
 			spellCheck="false"
 			onKeyDown={onKeyDown}
 			onChange={onChange}
+			{...props}
 		/>
 	);
-}
+});
+MarkdownareaComponent.displayName = 'MarkdownareaComponent';
 
-const MemoizedMarkdownareaComponent = memo(MarkdownareaComponent);
-
-export default function Markdownarea({
-	value,
-	onChange,
-	onKeyDown,
-	...props
-}: MarkdownareaPropsProviderProps) {
+const Markdownarea = forwardRef<
+	HTMLTextAreaElement,
+	MarkdownareaPropsProviderProps
+>(({ value, onChange, onKeyDown, ...props }, ref) => {
 	return (
 		<MarkdownareaPropsProvider
 			value={value}
@@ -47,10 +48,13 @@ export default function Markdownarea({
 			<MarkdownareaHistoryProvider>
 				<MarkdownareaValueProvider>
 					<MarkdownareaKeymapProvider>
-						<MemoizedMarkdownareaComponent />
+						<MarkdownareaComponent ref={ref} />
 					</MarkdownareaKeymapProvider>
 				</MarkdownareaValueProvider>
 			</MarkdownareaHistoryProvider>
 		</MarkdownareaPropsProvider>
 	);
-}
+});
+Markdownarea.displayName = 'Markdownarea';
+
+export default Markdownarea;

src/components/Markdownarea/contexts/value/context.tsx

@@ -1,14 +1,13 @@
 import type { MarkdownareaValueContextValue } from './types';
 import type { PropsWithChildren } from 'react';
 
-import { createContext, useContext, useMemo, useRef, useEffect } from 'react';
+import { createContext, useContext, useMemo } from 'react';
 
 import { useMarkdownareaHistoryContext } from '@/components/Markdownarea/contexts/history';
 import { useMarkdownareaPropsContext } from '@/components/Markdownarea/contexts/props';
 import { reorderOli } from '@/utils/markdown';
 
 const MarkdownareaValueContext = createContext<MarkdownareaValueContextValue>({
-	markdownareaRef: { current: null },
 	onChange: () => {},
 });
 
@@ -17,8 +16,7 @@ export const useMarkdownareaValueContext = () => {
 };
 
 export function MarkdownareaValueProvider({ children }: PropsWithChildren) {
-	const markdownareaRef = useRef<HTMLTextAreaElement>(null);
-	const { value, onChangeInherit } = useMarkdownareaPropsContext();
+	const { onChangeInherit } = useMarkdownareaPropsContext();
 	const { recordHistory } = useMarkdownareaHistoryContext();
 
 	const onChange: MarkdownareaValueContextValue['onChange'] = (e) => {
@@ -44,14 +42,8 @@ export function MarkdownareaValueProvider({ children }: PropsWithChildren) {
 	};
 
 	const contextValue = useMemo(() => {
-		return { markdownareaRef, onChange };
-	}, [markdownareaRef.current, onChange]);
-
-	useEffect(() => {
-		if (markdownareaRef.current) {
-			markdownareaRef.current.value = value;
-		}
-	}, [value]);
+		return { onChange };
+	}, [onChange]);
 
 	return (
 		<MarkdownareaValueContext.Provider value={contextValue}>

src/components/Markdownarea/contexts/value/types.ts

@@ -1,4 +1,4 @@
-import type { ComponentProps, RefObject } from 'react';
+import type { ComponentProps } from 'react';
 
 export interface ChangeValueParam {
 	/** 새롭게 적용할 value [=e.currentTarget.value] */
@@ -14,6 +14,5 @@ export interface ChangeValue {
 }
 
 export interface MarkdownareaValueContextValue {
-	markdownareaRef: RefObject<HTMLTextAreaElement>;
 	onChange: ComponentProps<'textarea'>['onChange'];
 }

tsconfig.json

@@ -23,5 +23,9 @@
         "incremental": false,
         "noUncheckedIndexedAccess": true,
     },
-    "include": ["src", "./index.ts"],
+    "include": [
+        "src",
+        "**/*.ts",
+        "**/*.tsx",
+    ],
 }