1. 개방-폐쇄 원칙 (Open-Closed Principle, OCP)란?
: "소프트웨어 개체( 클래스, 모듈, 함수 등)는 확장에 대해 열려 있어야 하고, 수정에 대해서는 닫혀 있어야 한다"는 프로그래밍 원칙 ! (!확장성!)
=> 쉽게 말해서, 기존의 코드를 변경하지 않으면서 기능을 추가할 수 있도록 설계해야 한다는 것 !
더보기
* OCP를 사용하지 않았을 때 예시와 문제점 : If-else의 조건문을 많이 사용했을 경우
- 변경, 확장이 될 수록 코드가 복잡해진다.
- 코드를 수정하거나 수정할 위치를 찾는데 오래걸린다.
- 실수로 추가하지 않고 누락하는 부분이 생길 가능성이 있다.
=> 유지보수가 어려워진다.
2. OCP 적용 방법
2-1. 상속 (is - a)
- 문제점 : "깨지기 쉬운 상위클래스 문제"가 발생할 수 있음.
=> 상속은 하위클래스가 상위클래스의 기능과 밀접하기 때문에 상위가 바뀌면 하위의 영향이 매우 크다.
2-2. ** 컴포지션 (has - a) >>추천<<
- 변경(확장)될 것과 변하지 않을 것을 엄격히 구분
- 이 두 모듈이 만나는 지점에 인터페이스를 정의
- 구현에 의존하기보다 정의한 인터페이스에 의존하도록 코드를 작성
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` 값을 추가하여 코드를 확장해나아갈 수 있다 !
'[FrontEnd] 프론트엔드' 카테고리의 다른 글
| [Next.js] SEO란? (2) | 2023.04.28 |
|---|---|
| [Javascript] Higher-Order Function(고차함수)란? (1) | 2023.03.16 |
| [Javascript] 커링(Currying)이란? (0) | 2023.03.16 |
| [React] createContext, useMemo (2) | 2023.03.08 |
| [TypeScript] 타입스크립트란? + (기본 타입) (0) | 2023.03.06 |