컴포넌트 잘 만들기: 데이터 추상화하기

토스ㅣSLASH 22 - Effective Component 지속 가능한 성장과 컴포넌트 영상을 참고하여 글을 작성하였습니다.

 

제품은 항상 바뀐다.

• 변경사항은 자주 발생한다
• 좋은 제품을 위해서는 변경은 반드시 필요하다
• 변경은 예측 불가능하다

변경에 대응하기

Item이라는 컴포넌트 이름만 보고는 컴포넌트가 어떤 역할을 하는지, 어떻게 보여지는지 알 수 없다.

 

변경에 유연하게 대응하도록 컴포넌트 만들기

컴포넌트?

컴포넌트는 3가지 특징을 갖는다.

1. 컴포넌트는 데이터를 관리한다

컴포넌트는 두가지 데이터를 관리한다.

• 외부에서 주입 받은 데이터
• 내부 데이터(상태)

2. 컴포넌트는 UI를 보여준다.

컴포넌트는 데이터를 어떻게 보여줄 것인지를 결정한다.

3. 컴포넌트는 사용자와 상호작용한다.

 

Headless 기반의 추상화하기: 변하는 것 vs 상대적으로 변하지 않는 것

Headless?
UI를 관심사에서 제외하여 오로지 데이터에만 집중해서 모듈화하는 패턴

Headless는 한가지 문제에만 집중하기 때문에 더 많은 곳에서 사용할 수 있고 변화에 유연하게 대응할 수 있다.

 

데이터 추상화

UI는 디자인에 의존하기 때문에 데이터와 UI는 분리할 필요가 있다. 즉, UI를 관심사에서 제외해 데이터에만 집중한다.

 

캘린더 컴포넌트의 데이터를 추상화해보자.

function Calendar() {
  const { headers, body, view } = useCalendar();
  
  return (
    <Table>
      <Thead>
        <Tr>
          {headers.weekDays.map(({ key, value }) => 
            <Th key={key}>{format(value, 'E', { locale })}</Th>
        </Tr>
        </Thead>
          <TBody>
            {body.value.map(({ key, value: days }) => (
              <Tr key={key}>
              {days.map(({ key, value }) => (
                <Td key={key}{getDate(value)}</Td>
               ))}
              </Tr>
            ))}
          </Tbody>
      </Table>
	)
}

달력을 구성하는데 필요한 데이터를 useCalendar에 위임하였다.

디자인이 다르더라도 useCalendar hooks를 사용할 수 있다.

 

 

실제 프로젝트에서 데이터 추상화하기

현재 프로젝트에서 로그인, 회원가입 컴포넌트를 개발하고 있다.

요구사항

• 사용자가 입력할 때마다 값을 검사하여 에러메시지를 보여준다.
• 모든 값이 유효하면 버튼이 활성화된다.

데이터 추상화

요구사항에 따르면 모든 input은 두가지 데이터를 갖는다.

- value: 사용자가 입력한 값

- error: value를 검사한 결과

 

useInput이라는 커스텀 훅으로 input 데이터를 추상화할 수 있다.

import { useState } from 'react';

export const useInput = () => {
  const [value, setValue] = useState('');
  const [error, setError] = useState(false);

  return { value, setValue, error, setError };
};

 

useInput을 사용하여 로그인 페이지를 구성해보자.

function Login() {
  const username = useInput();
  const password = useInput();

  const inputList = [
    {
      id: 'username',
      label: '아이디',
      valid() {
        return this.value.length >= 5;
      },
      ...username,
    },
    {
      id: 'password',
      label: '비밀번호',
      valid() {
        return this.value.length >= 8;
      },
      ...password,
    },
  ];

  ...

  return (
    <>
      <Heading className="text-2xl font-bold">{PAGE['LOGIN']}</Heading>
      <AuthForm mode="login" inputList={inputList} onSubmit={handleFormSubmit} />
      {isError && <ErrorMessage className="mt-4">{LOGIN_ERROR.LOGIN_FAILED}</ErrorMessage>}
    <>
  );
}

 

Login 컴포넌트는 두가지 문제점을 갖고 있다.

 

문제점

1. 로그인 페이지는 input이 2개 밖에 없는데도 inputList를 파악하기 어렵다.

- 회원가입은 로그인 페이지보다 input이 3개 더 많다. 코드가 훨씬 길어지고 파악하기 어려워질 것이다.

- 점점 길어지는 inputList는 컴포넌트를 파악하기 어렵게 만든다.

 

2. setState가 비동기적으로 동작하기 때문에 valid 메서드가 바로 직전 값을 검사한다.

- valid라는 메서드로 state의 유효성을 검사하고 있다. 

- setState로 값을 변경하면 즉각적으로 state에 반영되지 않는다 (이 부분이 이해가 안가면 이 문서를 참고)

- 따라서, 현재 state 값으로 검사를 하는 것이 아니라 직전의 값을 검사하고 있기 때문에 원하는대로 동작하고 있지 않다.

 

다시 데이터 추상화하기

input에 대해서 다시 생각해보면 

export const useInput = () => {
  const [value, setValue] = useState('');
  const [error, setError] = useState(false);

  const handleInputChange = ({target: { id, value }}: { target: HTMLInputElement; }) => {
    setValue(value);
    setError(!REGEXP[id].test(value));
  };

  return { value, error, handleInputChange };
};

 

결과

UI를 그리는데 필요한 모든 inputList를 useAuthForm에 위임해서 코드의 가독성을 높일 수 있었다.