react 에서 container를 어떨 떄 사용하는건가요?

박상철·2019년 1월 31일
0

만약 어떤 컴퍼넌트에서 redux의 state를 불러오고 싶으면 무조건 해당 컴퍼넌트를 감싸는 컨테이너를 만들어야 하는건가요?

아니면 꼭 redux를 연계하지 않더라도 클래스 문법을 통해 메서드나 스테이트를 사용하고 싶으면 컨테이너를 만드나요?

물론 프로젝트 구조에 정답은 없다는 건 알고 있습니다.

그래도 밸로펄트님의 깃헙 보일라플레이트를 기준으로 공부하고 있는 입장에서, 어떤 기준으로 사용하시는건지 궁금합니다.

혹시 함수형 컴퍼넌트 단위에서 state (react state 또는 redux state)에 효율적으로 접근할 수 있는 방법이 있을까요?

profile
안녕하세요

2개의 댓글

comment-user-thumbnail
2019년 1월 31일

리덕스 스토어(state)와 리액트 컴포넌트의 연결은 connect() 라는 함수로 하는 거구요.

컨테이너 컴포넌트와 일반 컴포넌트를 분리하는 이유는 코드를 재사용하기 위함입니다.

예를 들어보면 블로그를 만든다고 했을 때, 카테고리 목록을 보여주고 클릭하면 그 카테고리로 이동하는 기능을 만든다고 해봅시다.

스토어 -> 카테고리 메뉴 컴포넌트

카테고리 메뉴 컴포넌트가 하는 일은 다음과 같습니다.

  1. 어떤 데이터가 필요한가? 카테고리 목록을 스토어에서 가져옵니다.
  2. 데이터로 무엇을 하는가? 카테고리를 출력하고 링크를 적용합니다.

이 상태에서 카테고리를 '삭제'하는 기능을 만드려고하면

스토어 -> 카테고리 관리 컴포넌트

카테고리 관리 컴포넌트가 하는 일은 다음과 같습니다.

  1. 어떤 데이터가 필요한가? 카테고리 목록을 스토어에서 가져옵니다.
  2. 데이터로 무엇을 하는가? 카테고리를 출력하고 삭제 버튼을 붙입니다.

이러면 카테고리 메뉴 컴포넌트, 카테고리 삭제 컴포넌트에 1번 기능을 하는 똑같은 코드가 2번 들어가게됩니다.
매번 카테고리 데이터가 필요할 때마다 같은 코드를 중복해서 만들게되고, 카테고리 데이터를 가져오는 로직이 바뀌게되면 여러군데에 흩어진 코드를 따로따로 수정해야합니다.

그래서 컨테이터 컴포넌트를 도입해서 1번 기능을 완전히 위임합니다.

스토어 -> 카테고리 컨테이너 컴포넌트 -> 카테고리 메뉴 컴포넌트 / 카테고리 삭제 컴포넌트

1개의 답글