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

소프트웨어 엔티티(클래스, 모듈, 함수 등)는 확장에는 개방적이어야 하지만, 수정에는 폐쇄적이어야 한다.

즉 다시 건들지 않을 수 있도록 Hook과 컴포넌트를 작성하고, 다른 Hook과 컴포넌트에서는 재사용만 해야한다.

위 Hook은 user를 가져와 반환한다. 관리자는 이메일을 업데이트할 수 있고 일반 유저는 이메일 업데이트를 할 수 없다. 그러나 위 코드는 유지보수하기에 용이한 코드는 아니다.

이처럼 일반 유저와 관리자의 코드를 분리했다. 이 경우 만약 일반 유저에 문제가 생겼을때 관리자 코드를 건드리지 않고 일반 유저에 대한 문제만 해결할 수 있다. 또한 새로운 user 유형이 추가되거나 useAdmin HOok이 업데이트되면 useUser를 건드릴 필요가 없어진다. 즉, 새로운 유저 유형을 추가할 때 일반 유저에게 실수로 버그를 전송할 필요가 없어진다.

React에서 OCP를 사용하는 이유는 무엇일까?

너무 많은 컴포넌트 분할에는 많은 렌더링 비용이 들어간다. 그러나 위의 예시에서는 Hook이 최소한으로 사용되었고, 그다지 많은 일을 실행하지 않았다.
추가 Hook이 필요하고 구현하는 데 시간이 더 걸릴 수 있지만, 확장성이 높아져 더 자주 재사용할 수 있다. 또한 테스트를 다시 작성하는 횟수가 줄어들어 Hook이 더 견고해진다. 그리고 가장 중요한 것은 이전 코드를 건드리지 않으면 버그를 만들지 않는다는 것이다.