[React] OCP(Open Closed Principle)이란?

1. 개방-폐쇄 원칙 (Open-Closed Principle, OCP)란?

:  "소프트웨어 개체( 클래스, 모듈, 함수 등)는 확장에 대해 열려 있어야 하고, 수정에 대해서는 닫혀 있어야 한다"는 프로그래밍 원칙 ! (!확장성!)

=> 쉽게 말해서, 기존의 코드를 변경하지 않으면서 기능을 추가할 수 있도록 설계해야 한다는 것 ! 

 

* OCP를 사용하지 않았을 때 예시와 문제점 :  If-else의 조건문을 많이 사용했을 경우

• 변경, 확장이 될 수록 코드가 복잡해진다.
• 코드를 수정하거나 수정할 위치를 찾는데 오래걸린다.
• 실수로 추가하지 않고 누락하는 부분이 생길 가능성이 있다.

     => 유지보수가 어려워진다.

 

2. OCP 적용 방법

2-1. 상속 (is - a)

•  문제점 : "깨지기 쉬운 상위클래스 문제"가 발생할 수 있음. 

         => 상속은 하위클래스가 상위클래스의 기능과 밀접하기 때문에 상위가 바뀌면 하위의 영향이 매우 크다.

2-2.  ** 컴포지션 (has - a)  >>추천<<

1. 변경(확장)될 것과 변하지 않을 것을 엄격히 구분
2. 이 두 모듈이 만나는 지점에 인터페이스를 정의
3. 구현에 의존하기보다 정의한 인터페이스에 의존하도록 코드를 작성

 

 

3. example 

// bad!
function Greeting(props) {
  if (props.name === 'John') {
    return <h1>Hello John!</h1>;
  } else if (props.name === 'Jane') {
    return <h1>Hello Jane!</h1>;
  } else {
    return <h1>Hello Stranger!</h1>;
  }
}


// good!
function Greeting(props) {
  return <h1>Hello {props.greeting}!</h1>;
}

function JohnGreeting(props) {
  return <Greeting greeting="John" />;
}

function JaneGreeting(props) {
  return <Greeting greeting="Jane" />;
}

function StrangerGreeting(props) {
  return <Greeting greeting="Stranger" />;
}

위와 같이 `Greeting`컴포넌트의 코드를 변경하지 않고 새로운 `name` 값을 추가하여 코드를 확장해나아갈 수 있다 !