💻 20240622 SOLID 원칙으로 리액트 훅 작성하기

📌 참조

(번역) SOLID 원칙으로 리액트 훅 작성하기

---

📌 개요

어떻게 하면 최적화 된 컴포넌트 설계를 할 수 있을까, 이 부분에 대해서 매일이 배움의 과정이고 항상 궁금하다. 관련해서, SOLID 객체지향 원칙을 활용하여 리액트에 최적화 된 리액트 훅을 작성할 수 있는 정보를 전달 받아 정리 차원으로 작성하게 되었다.

---

📌 단일 책임 원칙

SRP - Single Responsibility Principle
모듈은 단 하나의 액터만 담당해야 합니다.

설명

• UI(프레젠테이션)를 표시해야 하는 컴포넌트인가요?
  아니면 데이터(로직)를 처리해야 하는 컴포넌트인가요?
• 이 훅은 어떤 단일 유형의 데이터를 처리해야 하나요?
• 이 훅이나 컴포넌트는 어떤 레이어에 속하나요?
  데이터 저장소를 처리하는 건가요? 아니면 UI의 일부일까요?

코드

import { useState } from 'react';
import { getUser, getTodoTasks } from 'somewhere';

// useUser 훅은 더 이상 todo task를 가져오는 작업을 담당하지 않습니다.
const useUser = () => {
  const [user, setUser] = useState();

  useEffect(() => {
    const userInfo = getUser();
    setUser(userInfo);
  }, []);

  return { user };
};

// Todo task를 가져오는 작업은 그 자신의 고유한 훅이 수행합니다.
// 이 훅은 실제로 별도 파일에 있어야 합니다. 하나의 파일에는 하나의 훅만 두세요!
const useTodoTasks = () => {
  const [todoTasks, setTodoTasks] = useState();

  useEffect(() => {
    const tasks = getTodoTasks();
    setTodoTasks(tasks);
  }, []);

  return { todoTasks };
};

---

📌 개방 / 폐쇄 원칙

OCP - Open / Closed Principle
다시 건들지 않을 수 있도록 훅과 컴포넌트를 작성하고,
다른 훅 / 컴포넌트에서는 재사용만 하세요.

설명

1. 훅의 확장성이 높아져 더 자주 재사용할 수 있습니다.
2. 테스트를 다시 작성하는 횟수가 줄어들어 훅이 더 견고해집니다.
3. 이전 코드를 건드리지 않으면 버그를 만들지 않는다는 것입니다.

코드 (사례)

import { useState } from 'react';
import { getUser, updateUser } from 'somewhere';

const useUser = ({ userType }) => {
  const [user, setUser] = useState();

  useEffect(() => {
    const userInfo = getUser();
    setUser(userInfo);
  }, []);

  const updateEmail = newEmail => {
    if (user && userType === 'admin') {
      updateUser({ ...user, email: newEmail });
    } else {
      console.error('Cannot update email');
    }
  };

  return { user, updateEmail };
};

코드 (해결)

import { useState } from 'react';
import { getUser, updateUser } from 'somewhere';

// useUser 훅은 이제 이메일 업데이트 기능 없이
// 사용자만 반환합니다.
const useUser = () => {
  const [user, setUser] = useState();

  useEffect(() => {
    const userInfo = getUser();
    setUser(userInfo);
  }, []);

  return { user };
};

// 새로운 훅인 useAdmin은 useUser 훅을 확장하며,
// 이메일을 업데이트하는 추가 기능을 제공합니다.
const useAdmin = () => {
  const { user } = useUser();

  const updateEmail = newEmail => {
    if (user) {
      updateUser({ ...user, email: newEmail });
    } else {
      console.error('Cannot update email');
    }
  };

  return { user, updateEmail };
};

---

📌 리스코프 치환의 원칙

LSP - Liskov Substitution Principle
훅 / 컴포넌트를 확장하는 모든 훅과 컴포넌트는 props를 받아들여야 합니다.
반환값도 마찬가지입니다.

설명

1. 훅 / 컴포넌트를 확장할 경우, props와 반환값을 유지해야한다.
2. 리액트는 상속이 없기 때문에, 확장시에 같은 패키지에 props,
   반환값 인터페이스를 상속 받아 확장하여 활용하자

코드

import { useState } from 'react';
import {
  getFromLocalStorage,
  saveToLocalStorage,
  getFromRemoteStorage,
} from 'somewhere';

// 리스코프는 훅의 인터페이스(변수 이름)와 일치시키기 위해서
// 데이터 상태 변수의 이름을 localData로 변경했습니다.
const useLocalStorage = ({ onDataSaved }) => {
  const [localData, setLocalData] = useState();

  useEffect(() => {
    const storageData = getFromLocalStorage();
    setLocalData(storageData);
  }, []);

  const saveToStorage = newData => {
    saveToLocalStorage(newData);
    onDataSaved(newData);
  };

  // 이 훅은 이제 "data" 대신 "localData"를 반환합니다.
  return { localData, saveToStorage };
};

// 리스코프는 useLocalStorage의 프롭 인터페이스와 일치시키기 위해
// 이 훅에 onDataSaved 콜백을 추가했습니다,
const useLocalAndRemoteStorage = ({ onDataSaved }) => {
  const [localData, setLocalData] = useState();
  const [remoteData, setRemoteData] = useState();

  useEffect(() => {
    const storageData = getFromLocalStorage();
    setLocalData(storageData);
  }, []);

  useEffect(() => {
    const storageData = getFromRemoteStorage();
    setRemoteData(storageData);
  }, []);

  const saveToStorage = newData => {
    saveToLocalStorage(newData);
    onDataSaved(newData);
  };

  return { localData, remoteData, saveToStorage };
};

---

📌 인터페이스 분리 원칙

ISP - Interface Segregation Principle
사용하지 않는 메서드에 의존하도록 코드를 강제해서는 안 됩니다.

설명

1. 함수와 클래스는 명시적으로 사용하는 인터페이스만 구현해야 한다.
2. 필요한 코드의 존재, 즉 혼란을 피하는 것
3. 잊지 말아야 할 것은 테스트 가능성

코드(사례)

// 대안 1

// 이 인터페이스에는 다음과 같은 문제가 있습니다.
// 속성이 인터페이스의 일부 소비자에게 필수임에도 불구하고
// 선택적 속성이 포함되어 있습니다.
interface Website {
  companyName?: string;
  ownerFirstname?: string;
  ownerFamilyName?: number;
  domain: string;
  type: string;
}

// 대안 2

// 이것은 원래 웹사이트 인터페이스가 사람에 맞게 이름이 바뀐 것입니다.
// 즉, 이전 코드와 테스트를 업데이트해야 했고
// 잠재적으로 몇 가지 버그가 발생할 수 있습니다.
interface PersonWebsite {
  ownerFirstname: string;
  ownerFamilyName: number;
  domain: string;
  type: string;
}

// 회사에서 사용할 수 있는 새로운 인터페이스입니다.
interface CompanyOwnedWebsite {
  companyName: string;
  domain: string;
  type: string;
}

코드(해결)

interface Person {
  firstname: string;
  familyName: string;
  age: number;
}

interface Company {
  companyName: string;
}

interface Website {
  domain: string;
  type: string;
}

---

📌 의존성 역전 원칙

Dependency Inversion Principle, DIP
고수준 모듈은 저수준 모듈로부터 아무것도 가져오지 말아야 하며,
둘 다 추상화에 의존해야 합니다.

설명

1. HOC(Higher Order Component) 활용

코드

const withAuth = (Component) => {
  return (props) => {
    const { user } = useContext(AuthContext)

    if (!user) {
      return <LoginComponent>
    }

    return <Component {...props} user={user} />
  }
}

const Profile = () => { // Profile 컴포넌트... }

// withAuth HOC를 사용하여 Profile 컴포넌트에 user를 삽입합니다.
const ProfileWithAuth = withAuth(Profile)