SOLID : 인터페이스 분리

인터페이스 분리는 다음과 같이 정의합니다.

Clients should not be forced to implement any methods they don't use

즉, 클라이언트(자녀)가 말하는 것과 같습니다.

😩😩 For what I need to implement this one??? I don't need it

이 고객(아이)의 민원을 하루빨리 막아야 합니다!!

👎 잘못된 코드

동물 인터페이스 설정
그런 다음 Dog 클래스와 Fish 클래스를 만듭니다.

interface IAnimal {
  fly: () => void
  run: () => void
  swim: () => void
}

class Dog implements IAnimal {
  // 😩😩😩 For what I need to implement it....
  fly() {
    null
  }
  run() {
    console.log('running!!!!')
  }
  swim() {
    console.log('swim!!! not so fast though')
  }
}

class Fish implements IAnimal {
  fly() {
    console.log('fly... a little?')
  }
  // 😩😩😩 For what I need to implement it....
  run() {
    null
  }
  swim() {
    console.log('swim!! soooooooo fast!!!!!!!!!!')
  }
}

이 코드에서 볼 수 있듯이 클래스는 For what I need to implement it...
개가 날지 않으니 물고기가 뛰지 않는다!!

👍 좋은 코드

// ⭐ divide interface !
interface IAnimalFly {
  fly: () => void
}

interface IAnimalRun {
  run: () => void
}

interface IAnimalSwim {
  swim: () => void
}

class Dog implements IAnimalRun, IAnimalSwim{
  run() {
    console.log('dos runs !!')
  }
  swim() {
    console.log('dos swims, not so fast though')
  }
  // ⭐ Dog doesn't need to implement fly()
}

class Fish implements IAnimalFly, IAnimalSwim {
  fly() {
    console.log('fish fies... a little?')
  }
  swim() {
    console.log('fish swims so fast !!!!!')
  }
  // Fish doesn't need to implement run()
}

인터페이스를 나누어 주셔서 감사합니다. Dog and Fish는 마침내 전혀 불평하지 않습니다 ↓

For what I need to implement this one??? I don't need it

기사 Liskof 대체품의 Btw도 인터페이스를 나누는 것이 중요한 핵심이었습니다.
인터페이스의 아키텍처는 SOLID 원칙에서 중요하다고 생각합니다.

💎 프론트엔드 엔지니어용

프론트엔드 엔지니어를 위한 인터페이스 분리에 대한 좋은 샘플을 찾았으니 보여드릴께요

👎 잘못된 코드

Diary 앱이 있는데, 처음에는 type Diary를 설정한 다음 updateDiaryTitle 기능을 만듭니다.

export type Diary = {
  id: string;
  title: string;
  content: string;
  createdAt: Date;
  updatedAt: Date;
};

const updateDiaryTitle = async (
  // ⭐ here get Diary object
  diary: Diary,
  updateTitle: (props: {id: string, title: string}) => Promise<void>
): Promise<void> => {
  // fetch data from server
  await updateTitle({ id: task.id, title: task.title });
};

지금은 문제가 있습니다. 누군가 이렇게 변경하면Diary type

type Diary = {
  id: string;
  diaryInfo: {
    // ⭐ title is inside diaryInfo now !!
    title: string;
    details: string;
  },
  createdAt: Date;
  updatedAt: Date;
};

그것 때문에 오류가 발생합니다

const updateDiaryTitle = async (
  diary: Diary,
  updateTitle: (props: {id: string, title: string}) => Promise<void>
): Promise<void> => {
  await updateTitle({ id: task.id, title: task.title });
  // => 🔥🔥🔥 Property 'title' does not exist on type 'Diary'.
};

updateDiaryTitle 를 수정해야 하지만 Diary 유형에 의존해서는 안 됩니다. 좋은 코드는 다음과 같습니다.

👍 좋은 코드

const updateDiaryTitle = async (
  // ⭐⭐⭐ get "id" and "diary" directly
  diary: {id: string, diary: string},
  updateTitle: (props: {id: string, title: string}) => Promise<void>
): Promise<void> => {
  await updateTitle({ id: diary.id, title: diary.title });
};

id 및 diary를 직접 가져오면 updateDiaryTitle 함수에서 어떤 속성을 사용해야 하는지 명확하게 알 수 있습니다.

그런 다음 updateDiaryTitle 를 구현하거나 수정할 때 Diary 유형에 대해 전혀 신경 쓸 필요가 없습니다.

React.js 또는 Vue.js에서 props를 자식에게 전달하는 것을 확실히 보았고 보게 될 것입니다 😀 언젠가는 이 원칙을 효과적으로 사용하기를 바랍니다 👍


심판
https://kanoe.dev/blog/interface-segregation-principle/

japanese blog