Presentation & container 패턴

Presentation & Container 패턴

컴포넌트에서 로직과 프리젠테이션을 분리하여 조금 더 관리하기 쉽고 재사용하기 용이하게 만드는 패턴

Presentation 

UI에 표시할 요소를 만드는 부분이라고 보면 된다(render). 사용자가 직접 보고 조작하는 컴포넌트.

UI가 정의되는 곳이며, 컨테이너에서 props를 통해 데이터를 전달받는다.

주요 기능은 전달받은 데이터를 화면에 렌더링하는 것이며, 이를 위한 스타일 시트를 포함한다.

Container

컴포넌트의 로직에 관한 대부분의 것들을 다루며 API 호출, state 관리, 데이터 조작, 이벤트 처리 작업 등을 한다.

활용

Presentation & container 패턴을 적용하지 않은 코드

function SearchForm() {
	// state
    const [searchKey, setSearcKey] = useState();

	// 메서드들
    function onChange(event) {
        setSearcKey(event.target.value);
    }

    function onSubmit(event) {
        event.preventDefault();
        console.log(searchKey);
    }

	// UI 렌더링을 위한 JSX
    return (
        <form onSubmit={onSubmit}>
            <label>제목</label>
            <input type="text" value={searchKey} onChange={onChange} name="searchKey"/>
            <button type="submit">검색</button>
        </form>
    );
}

export default SearchForm;

↓ Presentation & container 패턴을 적용한 코드

// 프레젠테이션 컴포넌트(SearchFormView.jsx)
function SearchFormView({ searchKey, onChange, onSubmit }) {
	// UI 렌더링을 위한 JSX
    return (
        <form onSubmit={onSubmit}>
            <label>제목</label>
            <input type="text" value={searchKey} onChange={onChange} name="searchKey"/>
            <button type="submit">검색</button>
        </form>
    );
}

export default SearchFormView;

프레젠테이션 컴포넌트는 컨테이너 컴포넌트에서 props로 받은 데이터로 렌더링에 필요한 코드만 작성

// 컨테이너 컴포넌트 (SearchFormContainer.jsx)
function SearchFormContainer() {
	// state
    const [searchKey, setSearcKey] = useState();

	// 메서드들
    function onChange(event) {
        setSearcKey(event.target.value);
    }

    function onSubmit(event) {
        event.preventDefault();
        console.log(searchKey);
    }

    return (
        <SearchFormView
            searchKey={searchKey}
            onChange={onChange}
            onSubmit={onSubmit}
        />
    );
}

export default SearchFormContainer;

컨테이너 컨포넌트는 stats와 메서드를 정의하여 프레젠테이션 컴포넌트에게 props로 넘겨주고, 렌더링과 관련된 코드는 작성하지 않음

참고

https://dev-district.tistory.com/37