[React] 리액트 디자인 패턴에 대한 고찰

컴포넌트란?
재사용이 가능한 독립적인 모듈 단위

 

 

보통 컴포넌트를 말할 때 독립적이다. 재사용이 가능하다. 라고 말하지만

 

사실 그건 이상적인 컴포넌트의 모습일 뿐,  현실은 그렇게 간단하지 않습니다.

 

완벽하게 독립적인 컴포넌트는 무엇일까요?

 

아래의 Counter 컴포넌트를 봅시다.

 

 

사실 저는 이게 이상적인 컴포넌트의 모습이라고 생각합니다.

 

외부의 간섭 없이, 자기가 가지고 있는 것들로 할 일을 모두 수행합니다.

 

따라서 아래와 같이 정말로 레고를 조립하듯 간단하게 사용할 수 있습니다.

 

---

하지만 독립성이 컴포넌트가 추구해야할 모든 것은 아닙니다.

 

독립성은 확장성과 반비례하는데, 이는 재사용성과도 관련이 있습니다.

 

확장할 수 없다면 재사용할 수도 없기 때문에,

 

재사용이 가능한 독립적인 단위라는 설명은 사실 상반되는 두 특성을 한데 모아놓은 것입니다.

 

숫자가 1이 아니라 2씩 증가/감소하는 컴포넌트가 필요해졌다고 생각해봅시다.

 

위의 Counter를 재사용(확장)할 수 있을까요?

 

절대로 불가능합니다.

 

컴포넌트를 사용해야 하는 입장에서, 이 순간 Counter는 가치를 완전히 잃어버립니다.

 

이게 우리가 독립성과 확장성 사이에서 적절히 타협해야 하는 이유입니다.

 

그리고 디자인 패턴은 그 사이에 존재하는 여러 타협점들이고,

 

개발자는 각각의 상황을 고려해 가장 알맞은 디자인 패턴을 골라 사용할 수 있어야 합니다.

---

당연한 말이지만 디자인 패턴은 여러 종류가 있을 뿐 정답은 없습니다.

 

인터넷 상에 제시된 수많은 디자인 패턴을 보고 적용해보는 것은 좋지만,

 

디자인 패턴이라고 해서 어떤 형식화된 틀에 얽매여서는 안됩니다.

 

간단하게 서로 다른 두 패턴을 소개해보겠습니다.

 

Presentational and Container Component Pattern

이름 그대로 보여주기용 컴포넌트와 그 컴포넌트를 감싸는 컨테이너 컴포넌트에 대한 패턴입니다.

 

아까 봤었던 예제를 다시 가져와 이 패턴을 적용해봅시다.

 

 

기존의 코드는 위와 같았습니다.

 

패턴을 적용해본 코드는 아래와 같습니다.

 

 

하나의 컴포넌트가 두 부분으로 나누어졌습니다.

 

사용은 이렇게 할 수 있습니다.

 

 

Custom Hook Pattern

커스텀 훅을 이용한 패턴입니다.

 

 

코드만 보면 앞서 소개했던 패턴과 꽤 비슷하다는 느낌을 받을 수 있습니다.

 

하지만 사용시 컴포넌트 내부에서 사용되는 값들에 접근할 수 있다는 점이 매우 다릅니다.

 

---

생각해보세요.

 

두 패턴들 중 어떤 것이 더 나은지, 무엇을 써야할지 고민이 되시나요?

 

그런 생각은 좋지 않습니다.

 

두 패턴이 추구하는 방향은 완전히 다릅니다.

 

Presentational and Container Component 패턴은 사실 확장성에 대해 크게 바꾼 게 없습니다.

 

사용자는 맨 처음 예시처럼

이렇게 쓰든지

 

Presentational and Container Component 패턴에서처럼

이렇게 쓰든지 확장할 여지가 없습니다.

 

단지 디자인과 기능을 구분함으로써 가독성을 높이고 개발하기 편하게 도와준 것 뿐입니다.

 

반면 custom hook 패턴에서는 아래처럼 사용자에게 확장할 수 있는 가능성을 열어줍니다.

 

 

패턴에 얽매여 무엇을 쓸지 고민하지 마세요.

 

패턴을 구성하는 요소를 파악하고 그게 어떤 부분을 다루는지 안다면 두 패턴을 동시에 쓰는 것도 충분히 가능합니다.

 

다른 여러 패턴에 대해서는 아래 링크를 참조하세요. 정리가 잘 되어 있습니다.

 

https://velog.io/@holim0/React-Design-Pattern

React Design Pattern 🎨

https://velog.io/@dnr6054/%EC%9C%A0%EC%9A%A9%ED%95%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%8C%A8%ED%84%B4-5%EA%B0%80%EC%A7%80

유용한 리액트 패턴 5가지