이 글에선 단순한 리액트 폼 컴포넌트와 Context API, Jotai, React Hook Form 을 사용한 컴포넌트를 비교하며 re-render 비용이 적은 폼 컴포넌트를 만들어 봅니다.

목차​

• Introduction
• 단순한(naive) 폼 컴포넌트
• 개선된 컴포넌트 1. Context API
• 개선된 컴포넌트 2. Jotai
• 개선된 컴포넌트 3. React Hook Form

Introduction​

React 를 사용하는 FE 개발자라면, 상태의 변화에 따라 불필요하게 일어나는 컴포넌트의 re-render 를 방지하려 노력해 본 경험이 있을 것입니다.

실제로 해당 컴포넌트가 갖고 있는 상태가 변해 필수적으로 업데이트를 해줘야 하는 component 가 있는 반면, 설계 상의 이유로 UI 가 변하지 않음에도 불필요한 re-render 가 일어나는 경우도 있기 때문입니다.

흔히들 폼을 만들면서 후자와 같은 상황을 마주쳤을텐데요. 폼 요소가 적을 땐 큰 문제가 되지 않지만, 복잡한 폼이나 규모가 큰 웹 애플리케이션을 구현해야 할 경우엔 다양한 이유로 최적화를 고려할 필요가 있습니다.

이번 글에선 re-render 가 일어나는 이유와 이를 해결할 수 있는 다양한 방식을 설명하고, 폼 요소들의 re-render 를 줄임으로써 앱의 성능을 향상시킬 수 있는 방법을 알아봅니다.

단순한(naive) 폼 컴포넌트​

사용자에게 email 과 password 를 받는 아래와 같은 폼을 예시로 들어볼까요? 한번 값을 입력해보세요!

(re-render 되는 컴포넌트가 하이라이팅 되도록 하였습니다.)

import React, { useState } from 'react';

import Form from '../components/Form';
import Input from '../components/Input';

type FormState = {
  email: string;
  password: string;
};

export default function BasicForm() {
  const [formState, setFormState] = useState<FormState>({
    email: '',
    password: '',
  });

  return (
    <Form
      onSubmit={(event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault();

        console.debug(formState);
      }}
    >
      <h1>Basic Form</h1>

      <Input
        type="text"
        placeholder="email"
        value={formState.email}
        onChange={(event) => {
          setFormState((prevState) => ({
            ...prevState,
            email: event.target.value,
          }));
        }}
      />

      <Input
        type="password"
        placeholder="password"
        value={formState.password}
        onChange={(event) => {
          setFormState((prevState) => ({
            ...prevState,
            password: event.target.value,
          }));
        }}
      />

      <button type="submit">Submit</button>
    </Form>
  );
}

입력란에 값을 입력해보면, 이메일만 값을 입력했는데 비밀번호란, 폼 전체가 re-render 됩니다.

사용자가 <Input type=’email’ /> 인 요소에 값을 입력하면 setFormState 를 호출하고, 아래와 같은 일이 일어납니다.

<Form />

• formState 가 업데이트됩니다. state 가 변경되었으므로 re-render 됩니다.

<Input type='email’ >

• 부모 컴포넌트인 <Form /> 이 re-render 되므로, 함께 re-render 됩니다.

<Input type=’password’ >

• 부모 컴포넌트인 <Form /> 이 re-render 되므로, 함께 re-render 됩니다.

의문점​

생각해보면, email 필드를 타이핑 할 때는 password 필드의 값은 그대로이므로 굳이 re-render 가 일어날 필요가 없습니다. password 필드의 re-render 를 일으키지 않을 좋은 방법이 없을까요?

개선된 컴포넌트 1. Context API​

위 폼을 Context API 를 사용해서 아래와 같이 개선하였습니다.

타이핑을 해보면, 아까와는 달리 한 필드가 다른 필드의 re-render 를 일으키지 않습니다.

import { FieldProvider } from './context/field';
import { FormProvider } from './context/form';
import EmailInput from './EmailInput';

import PasswordInput from './PasswordInput';

export default function BasicFormWithContext() {
  return (
    <FormProvider>
      <h1>Basic Form With Context</h1>

      <FieldProvider name="email">
        <EmailInput />
      </FieldProvider>

      <FieldProvider name="password">
        <PasswordInput />
      </FieldProvider>

      <button type="submit">Submit</button>
    </FormProvider>
  );
}

import React, { createContext, useContext, useState } from 'react';
import Form from '../../components/Form';

export type FormState = {
  email: string;
  password: string;
};

const FormStateContext = createContext<FormState | null>(null);
const SetFormStateContext = createContext<React.Dispatch<React.SetStateAction<FormState>> | null>(null);

export function FormProvider({ children }: { children: React.ReactNode }) {
  const [state, setState] = useState<FormState>({
    email: '',
    password: '',
  });

  return (
    <FormStateContext.Provider value={state}>
      <SetFormStateContext.Provider value={setState}>
        <Form
          onSubmit={(event) => {
            event.preventDefault();
            console.debug(state);
          }}
        >
          {children}
        </Form>
      </SetFormStateContext.Provider>
    </FormStateContext.Provider>
  );
}

export function useFormStateContext() {
  const context = useContext(FormStateContext);

  if (context == null) {
    throw new Error(`Cannot find <FormStateContext.Provider>`);
  }

  return context;
}

export function useSetFormStateContext() {
  const context = useContext(SetFormStateContext);

  if (context == null) {
    throw new Error(`Cannot find <SetFormStateContext.Provider>`);
  }

  return context;
}

import React, { createContext, useContext } from 'react';
import { FormState, useFormStateContext, useSetFormStateContext } from './form';

const FieldValueContext = createContext<string | null>(null);

export function FieldProvider({ name, children }: { name: keyof FormState; children: React.ReactNode }) {
  const formState = useFormStateContext();

  return <FieldValueContext.Provider value={formState[name]}>{children}</FieldValueContext.Provider>;
}

export function useFieldContext() {
  const fieldValue = useContext(FieldValueContext);
  const setFieldValue = useSetFormStateContext();

  if (fieldValue == null) {
    throw new Error(`Cannot find <FieldValueContext.Provider>`);
  }

  return [fieldValue, setFieldValue] as const;
}

import Input from '../components/Input';
import { useFieldContext } from './context/field';

export default function EmailInput() {
  const [value, setValue] = useFieldContext();

  return (
    <Input
      type="text"
      placeholder="email"
      value={value}
      onChange={(event) => {
        setValue((prevState) => ({
          ...prevState,
          email: event.target.value,
        }));
      }}
    />
  );
}

import Input from '../components/Input';
import { useFieldContext } from './context/field';

export default function PasswordInput() {
  const [value, setValue] = useFieldContext();

  return (
    <Input
      type="password"
      placeholder="password"
      value={value}
      onChange={(event) => {
        setValue((prevState) => ({
          ...prevState,
          password: event.target.value,
        }));
      }}
    />
  );
}

개선 포인트 1. Context API 로 렌더링 범위 줄이기​

Context API 를 사용하면 Provider 의 value 가 변경될 때, 이를 사용하는 컴포넌트가 re-render 가 됩니다.

이 점을 활용해서 email 과 password 의 state 를 분리하여 Provider 를 만들면, email value 가 업데이트 될 땐 password value 를 Context 로 사용하는 컴포넌트는 re-render 가 되지 않을 것 같습니다!

함께 코드로 볼까요?

FormProvider​

export function FormProvider({ children }: { children: React.ReactNode }) {
  const [state, setState] = useState<FormState>({
    email: '',
    password: '',
  });

  return (
    <FormStateContext.Provider value={state}>
      <SetFormStateContext.Provider value={setState}>
        <Form
          onSubmit={(event) => {
            event.preventDefault();
            console.debug(state);
          }}
        >
          {children}
        </Form>
      </SetFormStateContext.Provider>
    </FormStateContext.Provider>
  );
}

최상단에 위치할 FormProvider 입니다.

주목해야 할 점은, FormStateContext 와 SetFormStateContext 가 분리되어 있다는 점입니다. 왜 굳이 분리해서 Provider 를 만들었을까요?

<Context.Provider value={{ state, setState }}> 처럼 함께 넘긴다고 생각해볼까요.

email 필드가 업데이트 될 때 password 필드는 값이 바뀌지 않지만, 업데이트는 해야하므로 setState 가 필요합니다. 이를 state 와 함께 value 에 넘기면 state 가 업데이트 될 때마다 reference 가 변경되게 됩니다.

즉, setState 만 필요함에도 re-render 를 일으키게 됩니다.

FieldProvider​

export function FieldProvider({ name, children }: { name: keyof FormState; children: React.ReactNode }) {
  const formState = useFormStateContext();

  return <FieldValueContext.Provider value={formState[name]}>{children}</FieldValueContext.Provider>;
}

// context/form.tsx
function useFormStateContext() {
  const context = useContext(FormStateContext);

  if (context == null) {
    throw new Error(`Cannot find <FormStateContext.Provider>`);
  }

  return context;
}

이제 context/field.tsx 의 FieldProvider 를 보겠습니다.

FieldProvider 는 FormProvider 에서 useContext 로 FormStateContext.Provider 를 통해 주입해주는 값을 가져옵니다.

이 중, Provider 로 제공할 값을 name prop 으로 인덱싱하여 FieldValueContext.Provider 로 주입하면 FieldValueContext 를 구독하는 쪽에선 name prop 과 관련 없는 요소는 업데이트 되도 re-render 가 일어나지 않을 것입니다!

PasswordInput​

import Input from '../components/Input';
import { useFieldContext } from './context/field';

export default function PasswordInput() {
  const [value, setValue] = useFieldContext();

  return (
    <Input
      type="password"
      placeholder="password"
      value={value}
      onChange={(event) => {
        setValue((prevState) => ({
          ...prevState,
          password: event.target.value,
        }));
      }}
    />
  );
}

// context/field.tsx
export function useFieldContext() {
  const fieldValue = useContext(FieldValueContext);
  const setFieldValue = useSetFormStateContext();

  if (fieldValue == null) {
    throw new Error(`Cannot find <FieldValueContext.Provider>`);
  }

  return [fieldValue, setFieldValue] as const;
}

PasswordInput 은 FieldValueContext 를 통해 fieldValue 를 얻고, SetFormStateContext 을 통해 주입된 setFieldValue 를 얻습니다.

개선 포인트 2. children 을 prop 으로 받아 렌더링 범위 줄이기​

Context API 를 사용하더라도 부모 컴포넌트가 re-render 된다면 하위 컴포넌트는 re-render 됩니다.

이는 children prop 으로 해결할 수 있습니다.

export function FormProvider({ children }: { children: React.ReactNode }) {
  const [state, setState] = useState<FormState>({
    email: '',
    password: '',
  });

  return (
    <FormStateContext.Provider value={state}>
      <SetFormStateContext.Provider value={setState}>
        <Form
          onSubmit={(event) => {
            event.preventDefault();
            console.debug(state);
          }}
        >
          {children}
        </Form>
      </SetFormStateContext.Provider>
    </FormStateContext.Provider>
  );
}

FormProvider 나 FieldProvider 는 children 으로 ReactNode 를 받고 있는데요.

FormProvider 가 state 가 변경될 때마다 re-render 되더라도 prop 에는 영향을 끼치지 않기 때문에, children prop 으로 넘겨받은 ReactNode 는 re-render 를 일으키지 않습니다.

의문점​

생각해보면, <Form> 도 굳이 re-render 를 일으킬 필요가 없지 않을까요? 입력할 때마다 폼 컴포넌트 UI 가 바뀐 건 아니니깐 말이예요.

<Form> 도 re-render 를 일으키지 않을 방법이 있을까요?

개선된 컴포넌트 2. Jotai​

위 폼을 Jotai 를 사용하여 개선하였습니다. (recoil 을 사용해도 괜찮습니다.)

타이핑을 해보면, 아까와는 달리 <Form> 이 re-render 되지 않습니다.

import { FormProvider } from './context/form';

import EmailInput from './EmailInput';
import PasswordInput from './PasswordInput';

export default function JotaiForm() {
  return (
    <FormProvider>
      <h1>Jotai Form</h1>

      <EmailInput />

      <PasswordInput />

      <button type="submit">Submit</button>
    </FormProvider>
  );
}

import { atom, PrimitiveAtom, useAtom } from 'jotai';
import { useAtomCallback } from 'jotai/utils';
import React, { createContext, useCallback, useContext, useMemo } from 'react';
import Form from '../../components/Form';

type FormState = {
  email: PrimitiveAtom<string>;
  password: PrimitiveAtom<string>;
};

const FormStateContext = createContext<FormState | null>(null);

export function FormProvider({ children }: { children: React.ReactNode }) {
  const formState = useMemo(() => ({ email: atom(''), password: atom('') }), []);

  const payloadAtom = useMemo(() => {
    return atom((get) => {
      return Object.fromEntries(
        Object.entries(formState).map(([key, value]) => {
          return [key, get(value)];
        }),
      );
    });
  }, [formState]);

  const handleSubmit = useAtomCallback(
    useCallback(
      (get, _, event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault();

        const payload = get(payloadAtom);

        console.debug(payload);
      },
      [payloadAtom],
    ),
  );

  return (
    <FormStateContext.Provider value={formState}>
      <Form onSubmit={handleSubmit}>{children}</Form>
    </FormStateContext.Provider>
  );
}

export function useFormFieldState(name: keyof FormState) {
  const context = useContext(FormStateContext);

  if (context == null) {
    throw new Error(`Cannot find <FormStateContext.Provider>`);
  }

  return useAtom(context[name]);
}

import Input from '../components/Input';
import { useFormFieldState } from './context/form';

export default function EmailInput() {
  const [value, setFormState] = useFormFieldState('email');

  return (
    <Input
      type="text"
      placeholder="email"
      value={value}
      onChange={(event) => {
        setFormState(event.target.value);
      }}
    />
  );
}

import Input from '../components/Input';
import { useFormFieldState } from './context/form';

export default function PasswordInput() {
  const [value, setFormState] = useFormFieldState('password');

  return (
    <Input
      type="password"
      placeholder="password"
      value={value}
      onChange={(event) => {
        setFormState(event.target.value);
      }}
    />
  );
}

이 글은 Jotai 에 대한 자세한 설명은 하지 않을 것이지만, 원활한 이해를 위해 가벼운 설명을 하자면 아래와 같습니다.

• atom function 을 호출하여 state 를 얻을 수 있는 atom 을 생성할 수 있습니다.
• atom 은 state 가 update 되더라도 re-render 를 일으키지 않습니다.
• useAtom(atom), useAtomValue(atom) 같은 훅을 사용하면, state 를 얻을 수 있으며 해당 훅을 호출한 컴포넌트는 re-render 됩니다.

개선 포인트 1. Context API + Jotai​

이전과 동일하게 Context API 를 사용하고, value 로 jotai atom 을 주입할 것입니다.

export function FormProvider({ children }: { children: React.ReactNode }) {
  const formState = { email: atom(''), password: atom('') };

  const payloadAtom = useMemo(() => {
    return atom((get) => {
      return Object.fromEntries(
        Object.entries(formState).map(([key, value]) => {
          return [key, get(value)];
        }),
      );
    });
  }, [formState]);

  return (
    <FormStateContext.Provider value={formState}>
      <Form onSubmit={handleSubmit}>{children}</Form>
    </FormStateContext.Provider>
  );
}

formState 에서 각 필드마다 atom 을 생성해줍니다. 해당 atom 들은 각 필드에서 Context 를 통해 넘겨 받아 각자의 atom 을 업데이트 할 것입니다.

payloadAtom 은 derived atom 입니다. formState 에서 property value 로 갖고 있는 atom 들을 기반으로 만들어진 atom 이며, 각 필드에서 atom 을 업데이트 하면 payloadAtom 과 매핑된 state 도 업데이트 됩니다. 그러나, re-render 를 일으키지 않습니다.

또한, payloadAtom 이 오로지 formState 의 atom 으로부터 update 될 수 있도록 하기 위해 write function 이 없는 read-only atom 으로 만듭니다.

import Input from '../components/Input';
import { useFormFieldState } from './context/form';

export default function PasswordInput() {
  const [value, setFormState] = useFormFieldState('password');

  return (
    <Input
      type="password"
      placeholder="password"
      value={value}
      onChange={(event) => {
        setFormState(event.target.value);
      }}
    />
  );
}

// context/form.tsx

export function useFormFieldState(name: keyof FormState) {
  const context = useContext(FormStateContext);

  if (context == null) {
    throw new Error(`Cannot find <FormStateContext.Provider>`);
  }

  return useAtom(context[name]);
}

각 Form 필드 컴포넌트는 useContext 를 호출하여 formState 를 얻고, 이를 name 으로 인덱싱하여 자신이 업데이트 해야 할 atom 을 얻습니다. 그리고 이를 useAtom 을 호출하여 값과 업데이트 함수를 얻습니다.

개선 포인트 2. useAtomCallback​

위와 같이 작성한들, submit 을 위해 useAtom(payloadAtom) 을 호출하면 payloadAtom 이 매핑된 상태가 업데이트 될 때마다 FormProvider 는 re-render 가 될 것이고, Form 태그는 부모인 FormProvider 에 의해 re-render 를 일으킬 것입니다.

이 점은 useAtomCallback 을 사용하여 해결할 수 있습니다.

useAtomCallback 은 callback 함수를 받아 해당 함수가 atom 을 구독하지 않고 상태를 asynchronous 하게 읽을 수 있습니다.

// ...
const handleSubmit = useAtomCallback(
  useCallback(
    (get, _, event: React.FormEvent<HTMLFormElement>) => {
      event.preventDefault();

      const payload = get(payloadAtom);

      console.debug(payload);
    },
    [payloadAtom],
  ),
);

// ...

위와 같이 작성하면, payloadAtom 이 업데이트 되어도 이를 구독하지 않으므로 re-render 를 일으키지 않으며 동시에 payloadAtom 값으로 다루어 절차를 처리할 수 있는 함수를 작성할 수 있습니다.

개선된 컴포넌트 3. React Hook Form​

위 폼을 Uncontrolled Component 로 작성할 수도 있습니다!

Uncontrolled Component 는 form data 를 리액트 컴포넌트에서 다루는 것이 아닌, DOM 에 내장된 데이터를 이용해 다루게 됩니다.

Uncontrolled Component 를 그냥 useRef 등으로 사용하기엔 여러 부차적인 작업들이 필요해서, React Hook Form 이라는 라이브러리의 도움을 받아 작성해보도록 하겠습니다.

import { Controller, useForm } from 'react-hook-form';
import Form from '../components/Form';
import Input from '../components/Input';

export default function RHFForm() {
  const { control, handleSubmit } = useForm();

  return (
    <Form onSubmit={handleSubmit(console.debug)}>
      <h1>RHF Form</h1>

      <Controller
        control={control}
        defaultValue=""
        name="email"
        render={({ field }) => <Input type="text" placeholder="email" value={field.value} onChange={field.onChange} />}
      />

      <Controller
        control={control}
        defaultValue=""
        name="password"
        render={({ field }) => (
          <Input type="password" placeholder="password" value={field.value} onChange={field.onChange} />
        )}
      />

      <button type="submit">Submit</button>
    </Form>
  );
}

React Hook Form 은 폼 요소들을 Uncontrolled Component 로 구성할 수 있으며, 폼을 위한 다양한 유틸 요소들을 제공해줍니다.

<Input /> 은 Controlled Component 이므로, 이를 핸들링하기 위해 React Hook Form 에서 제공해주는 Controller 를 사용합니다.

이후 handleSubmit 을 활용해 submit 이벤트에 대응할 수 있습니다.

정리​

사실 React 는 이미 Virtual DOM 과 같은 내장 기술을 활용해 최적화를 하고 있으므로, 소규모 앱에선 이를 크게 신경 쓸 필요는 없다고 생각합니다.

그러나 잦은 re-render 로 인한 유저 반응성 저해나 Side Effect 로 고민을 하고 계신다면, 언급한 다양한 기술을 활용해 이를 해소 할 수 있다고 생각합니다.

시작​

재사용성이 높은 컴포넌트는 생산성을 극대화 시켜주며, 중복된 코드를 줄여주고 일관성 있는 뷰를 만드는데 큰 도움이 됩니다.

예를 들어, 프로젝트 내에 잘 정의된 Design System 이 존재한다면 뷰는 디자인 시스템에 정의된 컴포넌트들을 import 하며 빠르게 구현하고, 개발자는 핵심 기능을 위한 로직에 집중할 수 있습니다.

그러나, 이런 컴포넌트를 만들기 위해선 많은 고민이 필요합니다.

컴포넌트가 재사용성이 높아질수록 수요가 많아지기에 여러 사용성에 유연하게 대처할 수 있어야 합니다. 그렇기 때문에 재사용하기 쉬운 컴포넌트는 추상성이 높으며 일반적으로 아래와 같은 특징을 지닙니다.

React 로 개발하며 재사용성이 높은 컴포넌트들이 위와 같은 특징을 지닌다는 점은 간접적으로 느낄 수 있지만, 이를 어떻게 코드로 녹여내야 할 지에 대해선 여러 경험과 고민이 필요합니다.

이번 글에선 제가 경험했던 내용을 바탕으로 어떻게 재사용성이 높은 컴포넌트를 만들 수 있는지 타입스크립트를 곁들인 여러 예시를 들어 설명해보도록 하겠습니다.

추상적인 이벤트 핸들러를 prop 으로 넘기기​

다들 React 를 처음 다룰 때 아래와 같은 코드를 작성한 경험이 있을 겁니다.

type Props = {
  name: string;
  value: string;
  setFormValues?: React.Dispatch<React.SetStateAction<Form>>;
};

export default function Field({ name, value, setFormValues }: Props) {
  return (
    <input
      name={name}
      value={value}
      onChange={(event) => {
        setFormValues?.((values) => ({
          ...values,
          [name]: event.target.value,
        }));
      }}
    />
  );
}

export default function Form() {
  const [formValues, setFormValues] = useState<Form>({
    id: '',
    email: '',
  });

  return (
    <form>
      <Field name="id" value={formValues.id} setFormValues={setFormValues} />
      <Field name="email" value={formValues.email} setFormValues={setFormValues} />
    </form>
  );
}

이 Field 컴포넌트는 잘 동작하지만, 다음과 같은 면에서 어색하게 느껴집니다.

• Field 는 Form 이란 문맥과 관련이 없는 컴포넌트입니다. 그러나, 현재는 setFormValues 때문에 Form 이란 문맥과 강하게 결합되어 있습니다.
• 이 때문에 만약 Field 컴포넌트의 change 이벤트를 구독하기 위해선 setFormValues 가 필요합니다. formValues 상태를 사용하지 않는 컴포넌트에선 Field 컴포넌트와 유사한 UI 를 가졌음에도 사용할 수 없습니다.

아래와 같이 작성해보면 어떨까요?

type Props = {
  name: string;
  value: string;
  onChange?: React.ChangeEventHandler<HTMLInputElement>;
  // 또는 onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
};

export default function Field({ name, value, onChange }: Props) {
  return (
    <input
      name={name}
      value={value}
      onChange={(event) => {
        onChange?.(event);
      }}
    />
  );
}

export default function Form() {
  const [formValues, setFormValues] = useState<Form>({
    id: '',
    email: '',
  });

  return (
    <form>
      <Field
        name="id"
        value={formValues.id}
        onChange={(event) => {
          setFormValues((prevValues) => ({
            ...prevValues,
            id: event.target.value,
          }));
        }}
      />
      <Field
        name="email"
        value={formValues.email}
        onChange={(event) => {
          setFormValues((prevValues) => ({
            ...prevValues,
            email: event.target.value,
          }));
        }}
      />
    </form>
  );
}

전자와 달리 onChange 라는 콜백 함수를 인자로 받고 있습니다.

이젠 Field 컴포넌트는 Form 의 존재를 몰라도 되고, Field 컴포넌트를 사용하는 측에서 change 이벤트를 구독해야 할 필요가 생긴 경우 onChange 함수를 prop 으로 넘겨주면 됩니다.

Wrapping 컴포넌트의 props 확장하기​

대부분의 컴포넌트는 아래 두 가지 케이스에 속합니다.

• DOM Element 를 Wrapping 한 컴포넌트
• 이미 존재하는 컴포넌트를 Wrapping 한 컴포넌트

각 상황을 타입스크립트와 함께 살펴보겠습니다.

DOM Element 를 Wrapping 한 컴포넌트​

@types/react 는 이런 경우 사용하기 좋은 타입을 미리 정의해두었습니다.

바로 HTMLAttributes 와 ~~~Element 입니다.

예를 들어, <button> 이란 DOM Element 를 Wrapping 한다고 해봅시다.

Button 컴포넌트는 이미 HTMLAttributes<HTMLButtonElement> 에 정의된 다양한 타입이 있습니다. 따라서, 다음과 같이 타이핑을 할 수 있습니다.

type Props = React.HTMLAttributes<HTMLButtonElement>;

export default function Button(props: Props) {
  return <button {...props} />;
}

위 코드는 기존에 <button> 태그가 하는 역할을 완벽히 동일하게 수행합니다.

이번엔 Button 컴포넌트가 커스텀 한 shadow prop 을 받는다고 가정해봅시다. 이런 경우, 다음과 같이 타입을 정의할 수 있습니다.

type Props = React.HTMLAttributes<HTMLButtonElement> & CustomProps;

type CustomProps = {
  shadow?: boolean;
};

export default function Button({ shadow, ...props }: Props) {
  return <button {...props} style={shadow ? { filter: 'drop-shadow(5px 5px 10px #000)' } : {}} />;
}

이 또한 문제 없이 잘 동작합니다.

그러나, 만약 CustomProps 내부에 React.HTMLAttributes 와 중복되는 property key 가 있으면 얘기가 조금 달라집니다. 이는 다음 섹션에서 얘기해보겠습니다.

이미 존재하는 컴포넌트를 Wrapping 한 컴포넌트​

앞선 섹션과 마찬가지로, @types/react 는 이런 경우에도 사용하기 좋은 타입을 미리 정의해두었습니다.

ComponentProps, ComponentPropsWithoutRef, ComponentPropsWithRef 가 그 주인공입니다.

앞선 <Button> 컴포넌트를 Wrapping 하는 <WrappedButton> 컴포넌트를 만들어봅시다.

type Props = React.ComponentPropsWithoutRef<typeof Button>;

function WrappedButton(props: Props) {
  return <Button {...props} />;
}

위 컴포넌트도 기존의 <Button> 컴포넌트가 하는 역할을 완벽히 동일하게 수행합니다!

여기서 <WrappedButton> 의 onClick 이벤트 핸들러가 기존과 다른 인자를 받는다고 가정해봅시다.

React 의 onClick 함수는 React.MouseEvent<T> 타입의 이벤트를 받아 void 를 반환하는 함수입니다. 이 함수를 string 을 받아 void 를 받도록 수정해보죠. 아까와 비슷하게 다음과 같이 수정하면 되지 않을까요?

type Props = React.ComponentPropsWithoutRef<typeof Button> & {
  onClick: (data: string) => void;
};

function WrappedButton(props: Props) {
  return <Button {...props} />;
}

수정 후 인자의 타입을 보면, 뭔가 이상합니다.

onClick 의 data 가 string 으로 추론되어야 할 것 같은데, string | React.MouseEvent<HTMLButtonElement, MouseEvent> 로 추론됩니다!

이는 & (intersection) 의 성질 때문인데요. 함수와 함수를 intersection 하는 경우, 더 좁은 타입으로 만드는 것이 불가능하므로 overload 하게 되는 것입니다.

이를 해소하기 위해선 아래와 같이 Omit 연산자를 사용해 기존 타입에서 제거를 한 후, intersection 해주어야 합니다.

- type Props = React.ComponentPropsWithoutRef<typeof Button> & {
+ type Props = Omit<React.ComponentPropsWithoutRef<typeof Button>, "onClick"> & {
    onClick: (data: string) => void;
  };

function WrappedButton(props: Props) {
  return <Button {...props} />;
}

ReactNode 를 prop 으로 받기​

children prop 을 사용하기​

다음과 같은 요구조건이 있다고 가정 해보겠습니다.

• Main, Project 페이지를 구현해야 합니다.
• 각 페이지들은 공통적으로 Header, Footer 를 사용합니다.

아마 아래와 같은 구조의 컴포넌트가 만들어질 것입니다.

export default function MainPage() {
  return (
    <Background>
      <Header />

      {/* Main Page Logic */}

      <Footer />
    </Background>
  );
}

export default function ProjectPage() {
  return (
    <Background>
      <Header />

      {/* Project Page Logic */}

      <Footer />
    </Background>
  );
}

Background, Header, Footer 컴포넌트가 공통적으로 사용되고 있습니다. 이를 하나로 묶어주는 Layout 이란 컴포넌트로 추상화 할 수 있습니다.

type Props = {
  children?: React.ReactNode;
};

export default function Layout({ children }: Props) {
  return (
    <Background>
      <Header />

      {children}

      <Footer />
    </Background>
  );
}

export default function MainPage() {
  return <Layout>{/* Main Page Logic */}</Layout>;
}

export default function ProjectPage() {
  return <Layout>{/* Project Page Logic */}</Layout>;
}

// JSX.Element
namespace JSX {
  interface Element extends React.ReactElement<any, any> {}
  // ...
}

// ReactElement
interface ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>> {
  type: T;
  props: P;
  key: Key | null;
}

// ReactNode
type ReactText = string | number;
type ReactChild = ReactElement | ReactText;
type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;

children prop 만 ReactNode 를 받을 수 있는 것은 아니다​

Layout 컴포넌트를 조금 더 추상화시켜 보겠습니다.

만약, 디자이너가 Project 페이지에선 500px 이상 스크롤 할 시에 배경색이 변하도록 요청했다고 가정해봅시다.

다음과 같이 수정할 수 있어 보입니다.

type Props = {
  shouldChangeHeaderBgColor: boolean;
  children?: React.ReactNode;
};

export default function Layout({ shouldChangeHeaderBgColor, children }: Props) {
  return (
    <Background>
      <Header style={shouldChangeHeaderBgColor ? { backgroundColor: 'red' } : {}} />
      {children}
      <Footer />
    </Background>
  );
}

export default function ProjectPage() {
  const { isPassed } = useScrollMonitor({ y: 500 });

  return <Layout shouldChangeHeaderBgColor={isPassed}>{/* Project Page Logic */}</Layout>;
}

갑자기 또 요구조건이 변경되었다고 해봅시다.

디자이너분께서 특정 좌표를 넘어가면 Header 가 보이지 않도록 부탁하였습니다. 같은 방식으로 또 새로운 props 를 추가하여 해결할 수도 있겠습니다만, 점점 prop 네이밍, 분기 로직이 복잡해집니다.

그리고 이상함이 느껴지지 않나요? 새로운 요구조건은 Header 와 관련이 있는데, Layout 컴포넌트에 새로운 prop 을 추가해주어야 합니다. 수정은 Header 컴포넌트에 해야 하는데, Layout 컴포넌트를 수정해야 합니다!

이렇게 된 이유는 현재 Layout 이 담당하는 역할 때문입니다. Layout 의 관심사는 공통 요소의 배치 뿐이어야 하는데, 지금은 이와 동시에 Header 와 관련한 기능도 관심사로 두고 있습니다.

Layout 의 재사용성을 높이려면 Header 관심사를 분리해줘야 합니다. 어떻게 해야 할까요?

Header 또한 ReactNode 를 값으로 받는 prop 으로 받으면 문제가 해결됩니다!

type Props = {
  header?: React.ReactNode;
  children?: React.ReactNode;
};

export default function Layout({ header, children }: Props) {
  return (
    <Background>
      {header}

      {children}

      <Footer />
    </Background>
  );
}

export default function Header(props: HTMLAttributes<HTMLDivElement>) {
  return <div {...props}>{children}</div>;
}

export default function ProjectPage() {
  const { isPassed: passed500 } = useScrollMonitor({ y: 500 });
  const { isPassed: passed1000 } = useScrollMonitor({ y: 1000 });

  return (
    <Layout header={passed1000 ? null : <Header style={passed500 ? { backgroundColor: 'red' } : {}} />}>
      {/* Project Page Logic */}
    </Layout>
  );
}

Layout 에서 Header 의 역할을 분리함으로써, 이젠 Header 와 관련한 요구사항은 Header 에서 수정할 수 있게 되었습니다.

Render Props​

Render Props 는 ReactNode 를 반환하는 함수를 prop 으로 받는 테크닉입니다. Render Props 에 대한 자세한 정보는 React 공식 문서에서 확인할 수 있고, 해당 문서에선 Render Props 가 다음 두 가지 특징을 가진다는 점을 소개하고 넘어가려 합니다.

• Render Props 를 사용하면 여러 컴포넌트 간의 공통 관심사(횡단 관심사) 를 분리할 수 있습니다.
• Render Props 라고 해서 prop 의 이름이 render 여야 하는 것은 아닙니다. 어떤 이름이든 간에, 인자를 받아 ReactNode 를 반환하는 함수를 prop 으로 받으면 Render Props 입니다.

앞서 소개하듯, Render Props 의 가장 큰 장점은 여러 컴포넌트가 비슷한 관심사를 공유하게 될 경우 이를 분리할 수 있다는 점입니다.

말로는 이해하기 어려우니, 제가 이전에 만든 Render Props 관련 컴포넌트를 보며 설명하도록 하겠습니다.

type Props<T> = Omit<React.HTMLAttributes<HTMLDivElement>, keyof OwnProps<T>> & OwnProps<T>;

type OwnProps<T> = {
  items: T[];
  label?: React.ReactNode;
  children?: (item: T) => React.ReactNode;
} & GridStyleProps;

export default function Grid<T>({ items, label, children, className, ...props }: Props<T>) {
  return (
    <>
      {label}
      <Container className={className} {...props}>
        {items.map((item) => children?.(item))}
      </Container>
    </>
  );
}

import { css } from '@emotion/react';
import styled from '@emotion/styled';

import { Device } from 'common/contexts/device';
import { useDeviceContext } from 'common/hooks';

type Props<T> = Omit<React.HTMLAttributes<HTMLDivElement>, keyof OwnProps<T>> & OwnProps<T>;

type OwnProps<T> = {
  items: T[];
  label?: React.ReactNode;
  children?: (item: T) => React.ReactNode;
} & GridStyleProps;

type GridStyleProps = {
  columns: { mobile: number; desktop: number };
  rows?: { mobile: number; desktop: number };
  gap?: { mobile: string; desktop: string };
};

export default function Grid<T>({ items, label, children, className, ...props }: Props<T>) {
  const device = useDeviceContext();

  return (
    <>
      {label}
      <Container className={className} {...props} device={device}>
        {items.map((item) => children?.(item))}
      </Container>
    </>
  );
}

const Container = styled.div<GridStyleProps & { device: Device }>`
  display: grid;

  ${({ columns, rows, gap, device }) =>
    device === 'mobile'
      ? css`
          grid-template-columns: repeat(${columns.mobile}, 1fr);
          grid-template-rows: ${rows == null ? 'none' : `repeat(${rows.mobile}, 1fr)`};

          ${gap != null && { gap: gap?.mobile }};
        `
      : css`
          grid-template-columns: repeat(${columns.desktop}, 1fr);
          grid-template-rows: ${rows == null ? 'none' : `repeat(${rows.desktop}, 1fr)`};

          ${gap != null && { gap: gap?.desktop }};
        `}
`;