컨테이너 컴포넌트 Container

요번에는 우리가 작성한 코드를 확인하고 실제로 사용가능한 state를 만들어 보겠습니다.

이를 리액트 안에 booklist 컴포넌트를 생성하면서 시작하겠습니다.

이 컴포넌트의 목적은 책 리스트를 랜더링하는 것입니다.

// src/components/book-list.js

import React, { Component } from 'react';

export default class BookList extends Component {

renderList() {

return this.props.books.map((book) => {

return (

<li key={book.title} className="list-group-item">{book.title}</li>

)

});

}

render() {

return (

<ul classNmae="list-group col-sm-4">

{this.renderLikst()}

</ul>

)

}

}

6줄 : 책 리스트를  this,props 로 연결합니다. 해당배열에 map함수를 사용합니다.

8줄 : className은 보기 좋게 만드는 부트스트랩 부분입니다.

 해당 키는 유니크한 값이어야 하게  책 제목을 사용했습니다.

16줄 : 이 리스트를 render list라는 분리된 함수로 만들겠습니다.

          JSX안에 별도로 함수를 호출해도 괜찮습니다. 

이제 우리가 해야할 것은 어플리케이션  state와 연결하는 것입니다.

이는 this.props.books를 통해 이루어집니다.

리액트 뷰와 리덕스 state를 합쳐주는 것입니다.

여기에 두 리덕스와 리액트 라이브러리는 분리되어있는데요.

이 둘간에는 본질적인 연결고리가 없습니다.

이것을 해결해주는 라이브러리가 react-redux 죠!!

Compoent를 Container로 사용하기.

컨테이너는 리액트 컴포넌트로서, 리덕스에 의해 관리되는 state에

직접적인 연결이 가능합니다.

왼쪽 편에는 리덕스, 오른쪽 편에는 리액트

중간에는 새로운 라이브러리인 리액트-리덕스를 가집니다.

이는 두 분리된 라이브러리를 연결하는 브릿지인 셈이죠.

이 브릿지를 이용할 수 있을 때는 리액트 컴포넌트에서 state를 주입할 때인데요.

이 데이터를 컴포넌트로 주입시키는 것을 컨테이너라 부르죠. 

containers라 부르는 다른 디렉토리를 만들겠습니다.

이제 book-list.js 를 잘라내기 해서 containers 디렉토리에 붙여넣기 하겠습니다.

// src/containers/book-list.js

import React, { Component } from 'react';

export default class BookList extends Component {

renderList() {

return this.props.books.map((book) => {

return (

<li key={book.title} className="list-group-item">{book.title}</li>

)

});

}

render() {

return (

<ul classNmae="list-group col-sm-4">

{this.renderLikst()}

</ul>

)

}

}

단지 이곳으로 파일을 옮긴것 뿐입니다.

첫번재 컨테이너가 생성되었습니다.

컨테이너는 리덕스에 의해 만들어지는 스테이트를 직접 접하는 컴포넌트라는 것을 기억하세요.

다이어그램을 보면, 어플리케이션 모델이 있습니다.  

질문은 어떤 컴포넌트가 컨테이너를 반환하느냐 입니다.

일반적으로 가장 상위의 컴포넌트가 부분적인 state로 컨테이너 역할을 하게됩니다.

첫번째 답은 전체 앱이 state를 관리한다고 볼수 있습니다.

전체 app이 책 리스트를 관리하고, app이 현재 활성 책을 알 필요가 있습니다.

(여기서 app은 app.js 컴포넌트입니다.)

이에 대한 제 답은,  app이 책 리스트를 관리하지 않는 것처럼 보인다는 것입니다.

오직 booklist가 하는것 같아 보입니다.

BookDetail은 활성 책이 변하는 것을 관찰합니다.

반면에 App은 책 리스트를 관찰하지 않고, 현재 선택한 책도 마찬가지입니다.

이 App이 오직 하는 일은 Booklist와 BookDetail을 페이지에 랜더링 하라는 내용이죠.

이제 BookList와 여기의 BookDetail가 컨테이너가 되거나 컴포넌트, 리덕스와 직접 연결된 컴포넌트가 되야하죠.

반면에 App은 DOM 컴포넌트나 일반적인 컴포넌트여야 합니다.

이 안에는 리덕스와 연계된 어떤 데이터도 다루어서는 안됩니다.

이것이 실제 앱이라면, 쉽게 다가가기 위해서, 여기 컨테이너를 만들고,

다른 모든 것들은 props를 가지고요. 컴포넌트를 state에 따라 리렌더링 할수 있겠죠.

여기서즌 오직 이 컴포넌트들 중에 컨테이너를 생성해서, 부분적인 state 를 관찰합니다.

그래서 여기에 state를 나눠서 BookList가 책 리스트를 가지고 BookDetail이 활성화된 책을 가질것입니다.

주의할점 한가지 더!

state의 특정 부분을 이용하는 최상위 부모 컴포넌트만이 리덕스에 연결되어야 합니다.

다시 App은 활성화된 책을 다루지 않으며, 오직 BookDetail만이 다룹니다.

만약 BookList가 다른 자식 컴포넌트로 BookList와 연결될 필요가 있다면, 

이 자식 컴포넌트와 스테이트가 연결되길 원하지 않을 겁니다.

오직 상위에 있는 BookList에서만 말이죠.

그러면 이 BookList는 책들의 state와 연결될 필요가 있다는 것을 알

게 되었죠?

이제 리액트-리덕스 라이브러리를 사용해서 리덕스와 연결해보겠습니다.