디자인 패턴 (4) Container 패턴

본 글은 하단의 링크의 글들을 공부하며 필사한 글임.

Container/Presentational Pattern?

• 리액트에서 관심사의 분리를 강제하는 방법으로 해당 패턴을 사용해, 비즈니스 로직과 뷰를 분리해낼 수 있다.

 

관심사 분리를 위해 두 컴포넌트로 분리한다.

1.  Presentational Components : 데이터가 어떻게 사용자한테 보여질 지에 대해 다루는 컴포넌트(렌더링)
- 뷰의 역할

2. Container Components : 어떤 데이터가 보여질지를 다루는 컴포넌트
- 비즈니스 로직의 역할

 

Presentational Components

Presentational Component의 경우 props를 통해 데이터를 받으며 받은 데이터를 화면에 표현하는 것이 목적이며 데이터를 건드리지 않는 특징이 있다.

Ex) 여러 사진의 url을 props로 받아 화면에 해당 url에 맞는 이미지를 화면에 그리는 함수형 컴포넌트

Container 컴포넌트로부터 데이터를 받는다.

 

Container Components

Container Component의 경우 presentational 컴포넌트에 데이터를 전달하는 것이 주 기능이며, 해당 컴포넌트 자체는 화면에 아무것도 렌더링 하지 않는다.

Ex)  위의 예시에 해당하는 컴포넌트에 사진 url목록은 전달하는 container 컴포넌트

외부 API로부터 데이터를 받아와 Presentational Component에 전달하도록 한다.

따라서 두 컴포넌트를 통해 비즈니스로직과 뷰를 분리해 구현이 가능하다.

---

Hooks

Container/Presentational 패턴은 React Hooks로 대체 가능하다
내가 따로 들은 Next강의에서도 비슷하 활용한 적이 있는 방안이다.이를 통해 stateless 컴포넌트를 만들 수 있다.

export default function useDogImages() {
  const [dogs, setDogs] = useState([])

  useEffect(() => {
    fetch('https://dog.ceo/api/breed/labrador/images/random/6')
      .then(res => res.json())
      .then(({ message }) => setDogs(message))
  }, [])

  return dogs
}

다음과 같이 기존 Container 컴포넌트 역할을 하는 hooks를 작성해 Container 컴포넌트에서 바로 사용하면 된다.

해당 Hook을 통해 마찬가지로 비즈니스 로직과 뷰를 분리할 수 있다.

---

장점

1.  관심사의 분리를 구현 가능.

2. Presentational 컴포넌트는 데이터 변경 없이 화면에 출력할 수 있어 앱의 여러 곳에서 재사용할 수 있음

3. Presentational 컴포넌트는 앱의 비즈니스 로직을 수정하지 않으므로 코드베이스에 대한 이해가 깊지 않은 개발자더라도 쉽게 수정이 가능

4. 2번의 장점으로 디자인 요구사항에 따라 수정 시 전체에 반영이 된다.

단점

1.  훅을 사용하더라도 이 패턴을 사용할 수는 있지만 너무 작은 규모의 앱에서는 오버엔지니어링 일 수 있다.

2. hooks 없이 사용시 클래스형 컴포넌트를 사용해야함.

https://patterns-dev-kr.github.io/design-patterns/container-presentational-pattern/

Container/Presentational 패턴