Day of Nomad

컨테이너 컴포넌트 Container 본문

Develop/React

컨테이너 컴포넌트 Container

DeveloperYong 2018. 6. 26. 16:38





요번에는 우리가 작성한 코드를 확인하고 실제로 사용가능한 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 연결될 필요가 있다는 것을 


 되었죠?


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









Comments