React Redux에서 구성 요소와 컨테이너의 차이점

React Redux에서 구성 요소와 컨테이너의 차이점

---

React Redux에서 컴포넌트와 컨테이너의 차이점은 무엇입니까?

---

ComponentReact API의 일부입니다. Component는 React UI의 일부를 설명하는 클래스 또는 함수입니다.

컨테이너 는 connectredux 저장소에 -ed 되는 React 구성 요소에 대한 비공식적 인 용어입니다 . 컨테이너는 Redux 상태 업데이트 및 dispatch작업을 수신 하며 일반적으로 DOM 요소를 렌더링하지 않습니다. 그들은 표현적인 자식 컴포넌트에 렌더링을 위임 합니다.

자세한 내용 은 Dan Abramov의 프레젠테이션 및 컨테이너 구성 요소 를 읽어보십시오 .

---

데이터 가져 오기 및 표시를 담당하는 구성 요소를 스마트 또는 컨테이너 구성 요소라고합니다. 데이터는 redux, 네트워크 호출 또는 타사 구독에서 가져올 수 있습니다.

Dumb / presentational 컴포넌트는 수신 된 props를 기반으로 뷰를 표시하는 역할을합니다.

여기에 예제가있는 좋은 기사

https://www.cronj.com/blog/difference-container-component-react-js/

---

컴포넌트는 뷰의 일부를 구성하므로 DOM 요소를 렌더링하고 화면에 콘텐츠를 배치해야합니다.

컨테이너는 데이터 정교화에 참여하므로 상태를 수정해야하므로 redux와 "대화"해야합니다. 따라서 연결 (react-redux)이 연결을 만드는 것과 mapStateToProps 및 mapDispatchToProps 함수 를 포함 해야합니다 .

.
.
.
import { connect } from "react-redux";

class myContainer extends Component {
}

function mapStateToProps(state) {
  // You return what it will show up as props of myContainer
  return {
    property: this.state.property
  };
}

function mapDispatchToProps(dispatch) {
  // Whenever property is called, it should be passed to all reducers
  return bindActionCreators({ property: property }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(myContainer);

---

둘 다 구성 요소입니다. 컨테이너는 기능적이므로 자체적으로 html을 렌더링하지 않으며 실제 html을 작성하는 프레젠테이션 구성 요소도 있습니다. 컨테이너의 목적은 상태를 매핑하고 프리젠 테이션 구성 요소의 props에 디스패치하는 것입니다.

추가 읽기 : 링크

---

React, Redux는 독립적 인 라이브러리입니다.

React는 HTML 문서를 만들기위한 프레임 워크를 제공합니다. 구성 요소는 문서의 특정 부분을 나타내는 방식입니다. 그러면 구성 요소와 관련된 메서드가 문서의 특정 부분을 조작 할 수 있습니다.

Redux는 JS 환경에서 데이터를 저장하고 관리하기위한 특정 철학을 규정하는 프레임 워크입니다. 특정 메서드가 정의 된 하나의 큰 JS 개체이며, 최상의 사용 사례는 웹 앱의 상태 관리 형태로 제공됩니다.

React는 모든 데이터가 루트에서 잎으로 내려 가야한다고 규정하기 때문에 모든 소품을 메인으로 구성하고 컴포넌트에서 소품을 정의한 다음 소품을 특정 소품에 자식에게 전달하는 것이 지루합니다. 또한 전체 애플리케이션 상태를 취약하게 만듭니다.

React Redux는 다른 React Component (your Container) 주위에 연결된 구성 요소를 감싸기 만하면 Redux 저장소에 직접 연결하는 깨끗한 솔루션을 제공합니다 . 구현에서 구현 한 이후로 전체 애플리케이션 상태 중 필요한 부분을 이미 정의했습니다. 따라서 connect해당 데이터를 저장소에서 가져 와서 자체적으로 감싸는 구성 요소에 소품으로 전달합니다.

이 간단한 예를 고려하십시오.

 class Person extends Component {
  constructor(props){
   this.name = this.props.name;
   this.type = this.props.type;
  }

  render() {
     return <p> My name is {this.name}. I am a doctor { this.type } </p>
  }
}

 const connect = InnerComponent => { 

   class A extends Component{
     render() {
        return <InnerComponent {...this.props} type="Doctor"/>
     }
   } 
   A.displayName = `Connect(${InnerComponent.displayName})`
   return A
 }

connect함수는 prop을 전달합니다 type.

이렇게하면 연결이 Person 구성 요소의 컨테이너 역할을합니다.

---

React has two main components first is smart component(containers) and second is dumb(presentation component). Containers are very similar to components, the only difference is that containers are aware of application state. If part of your webpage is only used for displaying data (dumb) then make it a component. If you need it to be smart and aware of the state (whenever data changes) in the application then make it a container.

참고URL : https://stackoverflow.com/questions/43414254/difference-between-component-and-container-in-react-redux