SOLID : 개방 폐쇄 원리, 간단하게 설명

개방 폐쇄 원칙은 다음과 같이 정의합니다.

Software elements (classes, modules, function...) should be open for extension, but closed for modification

😦? ← 지금 이렇게 반응한다면 이 글을 계속 읽어주세요👍

👎 잘못된 코드

이것은 각 국가에서 "좋은 아침"이라고 말하는 방법을 찾을 수 있는 초소형 응용 프로그램입니다.

class Country {
  name: string
  constructor(name: string) {
    this.name = name
  }
}

const greetingList = (countries: Country[]) => {
  countries.forEach(country => {
    switch (country.name) {
      case 'poland':
        console.log('dzien dobry')
        break
      case 'japan':
        console.log('ohayo')
        break
      case 'usa':
        console.log('good morning')
        break
      default:
        console.log('* no data *')
        break
    }
  })
}

const countries: Country[] = [
  new Country('poland'),
  new Country('japan'),
  new Country('usa')
]

greetingList(countries)
// dzien dobry
// ohayo
// good morning

😅 어떻게 나쁜 코드가 될 수 있습니까??

음, 지금 "스페인"을 추가하려면 다음과 같이 코드를 수정해야 합니다.

const greetingList = (countries: Country[]) => {
  countries.forEach(country => {
    switch (country.name) {
      case 'poland':
        console.log('dzien dobry')
        break
      case 'japan':
        console.log('ohayo')
        break
      case 'usa':
        console.log('good morning')
        break
      // 👇 add this code "spain", this is key code!
      case 'spain':
        console.log('buenos dias')
        break
      default:
        console.log('* no data *')
        break
    }
  })
}

const countries: Country[] = [
  new Country('poland'),
  new Country('japan'),
  new Country('usa')
  // 👇 add this code "spain"
  new Country('spain')
]

이것은 greetingList()가 닫혀 있어야 하고 우리는 그것이 열려 있기를 원하지 않기 때문에 정확히 반 개폐 원칙입니다.
즉, 추가/확장할 때 수정greetingList()하면 안 됩니다.
누군가는 코드를 수정하면서 실수를 하기도 합니다.

👍 좋은 코드

그래서 우리는 어떻게 코드를 작성합니까 ??

// create interface
interface ICountry{
  greeting(): string
}

// create each country class
class Poland implements ICountry {
  greeting = () => 'dzien dobry'
}

class Japan implements ICountry {
  greeting = () => 'ohayo'
}

class Usa implements ICountry {
  greeting = () => 'good morning'
}

const greetingList = (countries: ICountry[]) => {
  for (let i = 0; i < countries.length; i++) {
    console.log(countries[i].greeting())
  }
}

const countries: ICountry[] = [
  new Poland(),
  new Japan(),
  new Usa()
]

greetingList(countries)

좋은 코드의 중요한 부분은 ICountry 인터페이스에 의존하는 각 국가 클래스를 만드는 것입니다.
그런 다음 "스페인"을 추가하면 그대로 ↓

// create interface
interface ICountry{
  greeting(): string
}

// create each country class
class Poland implements ICountry {
  greeting = () => 'dzien dobry'
}

class Japan implements ICountry {
  greeting = () => 'ohayo'
}

class Usa implements ICountry {
  greeting = () => 'good morning'
}

// 👇 add just "Spain class"
class Spain implements ICountry {
  greeting = () => 'Buenos dias'
}

// ⭐ Don't need to modify this function! 
// ⭐ It means greetingList is closed, but for extension, it is opened
const greetingList = (countries: ICountry[]) => {
  for (let i = 0; i < countries.length; i++) {
    console.log(countries[i].greeting())
  }
}

const countries: ICountry[] = [
  new Poland(),
  new Japan(),
  new Usa(),
  new Spain()
]

greetingList(countries)

이제 보시다시피 스페인 수업을 추가하십시오. 수정greetingList()할 필요가 없으므로 국가를 추가할 때 실수하지 않을 수 있습니다 👍

(추가) 💎 React.js

클린 코드로 작성했지만 열린 원칙 문제도 해결했습니다 😎


어떤 사람들은 오픈-클로즈드 원칙이 다소 과장되었다고 말합니다. 나쁜 코드보다 코드를 더 복잡하게 만들기 때문입니다.
사실 나도 그렇게 생각하는데 상황에 따라 다르다.

그러나 나는 당신이 그것을 사용할 것인지 아닌지를 제외하고 이 지식을 아는 것이 중요하다고 확신합니다.
그리고 직접 코드를 구현하는 것이 좋습니다.

사요나라👋