실무용 폴더구조 container & presentation

실무용 폴더구조

프로젝트를 만들때 폴더 구조는 굉장히 중요하다. 실무에서 사용하는 폴더 구조는 여러가지 방법이 존재하는데, 이러한 방법들을 패턴이라고 부른다.

리액트에서 사용하는 유명한 패턴으로는 container / presentational 패턴과 atomic 패턴이 있다. 여기서는 container & presentational 를 먼저 다루겠다.

container / presentational 패턴

container / presentational 패턴 이란, 소스코드를 자바스크립트(기능)와 JSX (UI) 로 나누는 것을 의미한다.

여기서 container는 자바스크립트(기능) 부분이고, presentational은 JSX(UI) 부분을 나타낸다.

위 파일을 2개의 파일로 나누는 방법은 위와 같다.

container component

• 자바스크립트 부분을 담고 있는 컴포넌트
• 기능 동작 로직
• 데이터를 다루는 부분
• redux 와 관련이 있음
• 렌더링 되어야 할 데이터를 props로써 데이터 처리 능력이 없는 컴포넌트인 presenter 로 전달

presentational component

• 화면을 표현하는 부분
• HTML 부분을 담고 있는 컴포넌트를, 줄여서 presenter를 의미
• DOM 마크업과 스타일 담당
• 데이터 처리 능력 없음
• redux와 관련이 없음
• 부모 컴포넌트로부터 받은 props인 데이터와 callback을 사용

containter 와 presenter 는 export와 import를 사용하여 연결한다.

import BoardWriteUI from "./BoardWrite.presenter";

export default function BoardWrite() {
	return <BoardWriteUI/>
}

하지만 import를 한다고 내부에 있는 데이터까지 연결 되는 것은 아니다. 두 컴포넌트간 데이터를 연결하려면, props를 사용해야한다.

// container 
import BoardWriteUI from "./BoardWrite.presenter";

export default function BoardWrite() {
	return ( 
      <BoardWriteUI
        isOpen={isOpen}
      	onCompleteAddressSearch={onCompleteAddressSearch}
 		/>
    );
}


//presenter
export default function BoardWriteUI(props) {
  return (
  		<>
    {props.isOpen && (<Modal visible={true}>
          <DaumPostcode onComplete={props.onCompleteAddressSearch} />
        </Modal>
      )}
    	</>
  )

props를 사용해 부모컴포넌트의 변수 또는 함수를 자식컴포넌트로 전달해 줄 수 있다다.

유지보수와 재사용성을 고려해서 개발되었으며 여기서 리액트의 데이터 흐름은 단방향인 것을 알 수 있다. 즉 자식(presenter)에서 부모(container)로는 데이터를 전달할 수 없다.

출처 및 참고
https://jeffgukang.github.io/react-native-tutorial/docs/state-tutorial/redux-tutorial/04-container-and-presentational/container-and-presentational-kr.html