I: Interface Segregation Principle(인터페이스 분리 원칙, ISP)

 

정의 : 특정 클라이언트에 맞는 인터페이스만 구현해야 한다. 즉, 불필요한 메서드를 포함한 큰 인터페이스 대신, 작은 인터페이스 여러개로 분리해야 한다.

리엑트 기준으로 본다면 불필요한 Props를 넘기지 않고 필요한 Props를 정의하는 것으로 보면 될 것 같습니다.

 

예시 : 리액트 컴포넌트에서 필요 없는 props를 받지 않도록 필요한 props만 정의하기

 

ISP 위반 예시

하나의 컴포넌트에서 모든 기능을 처리하기 위해, ViewUser 와 EditUser 모드를 모두 저리하는 코드를  작

 

function UserInfo({ user, onEdit, onSave }) {
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
      <button onClick={onEdit}>Edit</button>
      <button onClick={onSave}>Save</button>
    </div>
  );
}

 

ISP 적용 예시

// 보기 전용 컴포넌트
function UserInfo({ user, onEdit }) {
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
      <button onClick={onEdit}>Edit</button>
    </div>
  );
}

// 수정 전용 컴포넌트
function EditUser({ user, onSave }) {
  const [name, setName] = useState(user.name);
  const [email, setEmail] = useState(user.email);

  return (
    <div>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <input value={email} onChange={(e) => setEmail(e.target.value)} />
      <button onClick={() => onSave({ name, email })}>Save</button>
    </div>
  );
}

 

이렇게 만들면 UserInfo는 보기기능만 EditUser는 수정기능만 담당하게 되며 필요한 Props만 받게 됩니다.

 

ISP 적용의 장점

• 책임 분리: UserInfo 와 EditUser는 각자 자신이 해야 할 일만 담당해서 책임이 명확해집니다.
• 불필요한 의존성 제거: UserInfo 는 onSave 같은 불필요한 props를 받지 않고, EditUser는 onEdit 같은 props가 필요 없음.
• 확장성: 나중에 새로운 역할이나 모드가 추가될 경우, 기존 컴포넌트를 건드리지 않고 새로운 컴포넌트를 추가할 수 있어.