[UI Component] Design Patterns - Container/Presentational

Container/Presentational

- 비즈니스 로직으로부터 뷰를 분리하여 관심사 분리를 강제함

 

- Container Component

  - Presentational 컴포넌트에게 데이터 전달

  - 화면에 아무것도 렌더링하지 않음 (스타일 시트 포함 X)

- Presentational Component

  - props를 통해 데이터를 받음

  - 받은 데이터를 화면에 표현 (스타일 시트 포함), 데이터는 건드리지 않음

 

- Container/Presentational 패턴은 React Hooks로 대체 가능

- Container 컴포넌트 없이도 stateless 컴포넌트 쉽게 만들 수 있음

- useState, useEffect 이용해서 데이터 fetch 하는 커스텀 훅 별도 생성

 

- 장점

  - 관심사 분리

  - Presentational은 다양한 목적으로 재사용 가능, 테스트 쉬움

- 단점

  - 훅을 활용하면 클래스형 컴포넌트를 사용하지 않고도 함수형으로 쉽게 만들 수 있음

  - 훅 사용해서 이 패턴 사용할 수 있지만 너무 작은 규모에서는 오버엔지니어링이 될 수 있음

 

- 예시

// DogImagesContainer.js

export default class DogImagesContainer extends React.Component {
  constructor() {
    super();
    this.state = {
      dogs: []
    };
  }

  componentDidMount() {
    fetch("https://dog.ceo/api/breed/labrador/images/random/6")
      .then(res => res.json())
      .then(({ message }) => this.setState({ dogs: message }));
  }

  render() {
    return <DogImages dogs={this.state.dogs} />;
  }
}

 

// DogImages.js

export default function DogImages({ dogs }) {
  return dogs.map((dog, i) => <img src={dog} key={i} alt="Dog" />);
}

 

// 훅을 사용한 방법

// useDogImages.js
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
}

// DogImages.js
export default function DogImages() {
  const dogs = useDogImages();

  return dogs.map((dog, i) => <img src={dog} key={i} alt="Dog" />);
}

 

- 활용

---

[UI Component] Design Patterns - Container/Presentational