Container, Presenter

COntainer Presenter 패턴은 쉽게말해서 구조와 기능을 다른 컴포넌트로 분리해서 작성하는 구조이다.

컨테이너에서는 기능, 즉 API요청, Error, state 등의 기능과 관련된 것들이 소스로 들어가고 이것들을 props로 Presenter로 넘겨줘서 presenter 에서 똑같은 변수를 똑같은 기능으로 사용하게 만드는 것이다.

예시이다.

// Presenter
export default function ExamplePresenter() {
  return(
    <div>
      <input type='text' onChange={props.onChangeText}/>
    </div>
  )
}
                                          

import ExamplePresenter from './example';
import { useState } from "react";

export default function ExampleContainer(){
  	
  	const [name, setName] = useState("")
  
  	const onChangeText = (event) => {
      setName(event.target.value)
    }
	return(
    	<ExamplePresneter
          onChangeText={onChangeText}
          >
    )
}

Presenter는 Container의 함수를 props로 받아서 동일한 기능을 사용하게 하는 것이다.

이 방식의 장점은 데이터 처리의 과정과 눈으로볼수있는 UI 부부분을 분리해서 볼 수 있다는 것이다.

데이터처리의 과정에서 문제가 생기면 Container를 유지보수 하면되고, UI쪽에 문제가 생긴다면 Presenter 쪽으로가서 문제를 해결하면 된다는 것이다.