O: Open/Closed Principle (개방-폐쇄 원칙, OCP)

정의 : 소프트웨어는 확장에는 열려 있어야 하고, 수정에는 닫혀 있어야 한다. 즉, 기능을 확장할 때 기존 코드를 수정하지 않고 새로운 기능을 추가할 수 있어야 한다.

 

즉, 기존 기능의 변경없이 기능을 확장시킬수 있게 만들자가 OCP의 목적입니다.

 

나쁜예시부터..

const menuList = ["메일", "카페", "블로그", "쇼핑", "뉴스"];

<nav>
  <Menu name={menuList[0]} />
  <Menu name={menuList[1]} />
  <Menu name={menuList[2]} />
  <Menu name={menuList[3]} />
  <Menu name={menuList[4]} />
</nav>

menuList가 추가될때 기존 코드에서 Menu라는 컴포넌트를 추가적으로 작성해야합니다..

 

네.. 정말 말도안되는 코드입니다. 설마 이런사람이 있을까 싶지만.. 예시일 뿐입니다.

 

const menuList = ["메일", "카페", "블로그", "쇼핑", "뉴스"];

<nav>
  {menuList.map((menuName) => {
    return <Menu name={menuName} />;
  })}
</nav>

 

위와 같이 작성시 menuList에  값이 추가되더라도 밑의 로직에서 수정되는 부분은 없습니다.

 

---

컴포넌트를 설계할때 변화에 대처하기 편한 구조를 가지는것이 중요하다! 정도로만 생각하면 될 것 같습니다.

 

예시가 좀 구리고.. 너무 극단적일 순 있지만 이런 내용이다 정도로 이해해 주시면 될 것 같습니다.