[240215] SOLID 원칙 react 프로젝트에 어떻게 적용할 수 있을까?

SOLID 원칙 react 프로젝트에 어떻게 적용할 수 있을까?

Frontend Masters: Solid Principles in React / React Native

• 소프트웨어 설계의 다섯 가지 중요한 규칙 그룹
• 이해하기 쉽고 유연하게 유지하는데 도움이 된다.
• solid 원칙을 react 에 적용할 수 있는 예시 읽고 학습함

S - Single Responsibility

• 단일 책임 원칙 (SRP)
• 클래스는 명확하게 정의 된 단일 목적을 수행해야하며 빈번한 변경의 필요성을 줄여야 한다.

O - Open-Closed

• 개방/폐쇄 원칙(OCP)
• 확장을 위해 열려있지만 수정을 위해 닫혀있음
• 이미 작동하는 방식을 변경하지 않고도 구성 요소에 새로운 기능을 추가할 수 있으면서 구성 요소를 생성하고 구현한 후에는 불가피한 경우를 제외하고 소스 코드를 직접 조작하는 것을 피해야한다.

L - Liskov Substitution

• 리스코프 대체 원리 (LSP)
• 슈퍼클래스의 객체는 서브클래스의 객체로 대체 가능해야합니다.

• 특정 클래스의 하위 클래스가 기능을 손상시키지 않고 상위 클래스를 대체할 수 있어야한다.

I - interface Segregation

• 인터페이스 분리 원칙 (ISP)
• components should not depend on props they don’t use.
• 사용되지 않는 props 는 넣지 말자

// Bad Code
const ListItem = ({ item }) => {
  return (
    <View>
      <Image source= />
      <Text>{item.title}</Text>
      <Text>{item.description}</Text>
    </View>
  )
}

// Good Code
const ListItem = ({ image, title, description }) => {
  return (
    <View>
      <Image source= />
      <Text>{title}</Text>
      <Text>{description}</Text>
    </View>
  )
}

D - Dependency Inversion

• 의존성 역전 원리 (DIP)
• 상위 수준 모듈은 하위 수준 모듈에서 어떤 것도 가져와서는 안된다. 둘 다 추상화에 의존 해야한다.
• 추상화는 세부사항에 의존해서는 안된다. 세부사항(구체적인 구현)은 추상화에 따라 달라집니다.