Add to jiwon

README.md

@@ -230,7 +230,6 @@ Some differences from the "normal function" version:
 - `React.FunctionComponent` is explicit about the return type, while the normal function version is implicit (or else needs additional annotation).
 
 - It provides typechecking and autocomplete for static properties like `displayName`, `propTypes`, and `defaultProps`.
-
   - Note that there are some known issues using `defaultProps` with `React.FunctionComponent`. See [this issue for details](https://github.com/typescript-cheatsheets/react/issues/87). We maintain a separate `defaultProps` section you can also look up.
 
 - Before the [React 18 type updates](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/56210), `React.FunctionComponent` provided an implicit definition of `children` (see below), which was heavily debated and is one of the reasons [`React.FC` was removed from the Create React App TypeScript template](https://github.com/facebook/create-react-app/pull/8177).
@@ -352,7 +351,7 @@ Note that for React < 18, the function signature of `useCallback` typed argument
 ```ts
 function useCallback<T extends (...args: any[]) => any>(
   callback: T,
-  deps: DependencyList
+  deps: DependencyList,
 ): T;
 ```
 
@@ -442,7 +441,7 @@ function DelayedEffect(props: { timerMs: number }) {
       setTimeout(() => {
         /* do stuff */
       }, timerMs),
-    [timerMs]
+    [timerMs],
   );
   // bad example! setTimeout implicitly returns a number
   // because the arrow function body isn't wrapped in curly braces
@@ -628,7 +627,7 @@ export function useLoading() {
   };
   return [isLoading, load] as [
     boolean,
-    (aPromise: Promise<any>) => Promise<any>
+    (aPromise: Promise<any>) => Promise<any>,
   ];
 }
 ```
@@ -795,7 +794,7 @@ Here are a few ways in which you can annotate `getDerivedStateFromProps`
 class Comp extends React.Component<Props, State> {
   static getDerivedStateFromProps(
     props: Props,
-    state: State
+    state: State,
   ): Partial<State> | null {
     //
   }
@@ -807,7 +806,7 @@ class Comp extends React.Component<Props, State> {
 ```tsx
 class Comp extends React.Component<
   Props,
-  ReturnType<typeof Comp["getDerivedStateFromProps"]>
+  ReturnType<(typeof Comp)["getDerivedStateFromProps"]>
 > {
   static getDerivedStateFromProps(props: Props) {}
 }
@@ -1265,7 +1264,7 @@ Here are a few ways in which you can annotate `getDerivedStateFromProps`
 class Comp extends React.Component<Props, State> {
   static getDerivedStateFromProps(
     props: Props,
-    state: State
+    state: State,
   ): Partial<State> | null {
     //
   }
@@ -1277,7 +1276,7 @@ class Comp extends React.Component<Props, State> {
 ```tsx
 class Comp extends React.Component<
   Props,
-  ReturnType<typeof Comp["getDerivedStateFromProps"]>
+  ReturnType<(typeof Comp)["getDerivedStateFromProps"]>
 > {
   static getDerivedStateFromProps(props: Props) {}
 }
@@ -1365,10 +1364,10 @@ class App extends React.Component<Props, State> {
 Instead of typing the arguments and return values with `React.FormEvent<>` and `void`, you may alternatively apply types to the event handler itself (_contributed by @TomasHubelbauer_):
 
 ```tsx
-  // typing on LEFT hand side of =
-  onChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
-    this.setState({text: e.currentTarget.value})
-  }
+// typing on LEFT hand side of =
+onChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+  this.setState({ text: e.currentTarget.value });
+};
 ```
 
 <details>
@@ -1545,7 +1544,7 @@ const useCurrentUser = () => {
 
   if (!currentUserContext) {
     throw new Error(
-      "useCurrentUser has to be used within <CurrentUserContext.Provider>"
+      "useCurrentUser has to be used within <CurrentUserContext.Provider>",
     );
   }
 
@@ -1583,7 +1582,7 @@ Another option is to use an empty object as default value and cast it to the exp
 
 ```tsx
 const CurrentUserContext = createContext<CurrentUserContextType>(
-  {} as CurrentUserContextType
+  {} as CurrentUserContextType,
 );
 ```
 
@@ -1690,12 +1689,12 @@ interface Props {
 export const FancyButton = forwardRef(
   (
     props: Props,
-    ref: Ref<HTMLButtonElement> // <-- explicit immutable ref type
+    ref: Ref<HTMLButtonElement>, // <-- explicit immutable ref type
   ) => (
     <button ref={ref} className="MyClassName" type={props.type}>
       {props.children}
     </button>
-  )
+  ),
 );
 ```
 
@@ -1758,7 +1757,7 @@ For true `forwardRef` behavior with generics, extend the module declaration:
 // Redeclare forwardRef to support generics
 declare module "react" {
   function forwardRef<T, P = {}>(
-    render: (props: P, ref: React.Ref<T>) => React.ReactElement | null
+    render: (props: P, ref: React.Ref<T>) => React.ReactElement | null,
   ): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
 }
 
@@ -1772,7 +1771,7 @@ interface ClickableListProps<T> {
 
 function ClickableListInner<T>(
   props: ClickableListProps<T>,
-  ref: ForwardedRef<HTMLUListElement>
+  ref: ForwardedRef<HTMLUListElement>,
 ) {
   return (
     <ul ref={ref}>
@@ -1796,9 +1795,9 @@ If you need both generic support and proper forwardRef behavior with full type i
 ```tsx
 // Add to your type definitions (e.g. in `index.d.ts` file)
 interface ForwardRefWithGenerics extends React.FC<WithForwardRefProps<Option>> {
-  <T extends Option>(props: WithForwardRefProps<T>): ReturnType<
-    React.FC<WithForwardRefProps<T>>
-  >;
+  <T extends Option>(
+    props: WithForwardRefProps<T>,
+  ): ReturnType<React.FC<WithForwardRefProps<T>>>;
 }
 
 export const ClickableListWithForwardRef: ForwardRefWithGenerics =
@@ -2112,7 +2111,7 @@ export enum ButtonSizes {
 
 // usage
 export const PrimaryButton = (
-  props: Props & React.HTMLProps<HTMLButtonElement>
+  props: Props & React.HTMLProps<HTMLButtonElement>,
 ) => <Button size={ButtonSizes.default} {...props} />;
 ```
 
@@ -2188,7 +2187,7 @@ export interface PrimaryButtonProps {
   label: string;
 }
 export const PrimaryButton = (
-  props: PrimaryButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>
+  props: PrimaryButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>,
 ) => {
   // do custom buttony stuff
   return <button {...props}> {props.label} </button>;
@@ -2468,7 +2467,7 @@ const useDarkMode = (
     storageKey = "darkMode",
     storageProvider,
     global,
-  } = {}
+  } = {},
 ) => {
   // ...
   return {
@@ -2512,7 +2511,7 @@ declare module "use-dark-mode" {
    */
   export default function useDarkMode(
     initialState?: boolean,
-    config?: DarkModeConfig
+    config?: DarkModeConfig,
   ): DarkMode;
 }
 ```
@@ -3001,3 +3000,5 @@ It is worth mentioning some resources to help you get started:
 ## Contributors
 
 This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. See [CONTRIBUTORS.md](/CONTRIBUTORS.md) for the full list. Contributions of any kind welcome!
+
+jiwoni