리액트에서 사용하는 컨테이너 패턴을 소개해보려고 한다. 여러가지 패턴이 있지만 내가 배워서 쓰고 있는건 container - presentational 패턴이다.
Container 와 Presenter
하나의 소스 코드를 나눠서 작성하는 방식으로 logic(js) 부분의 파일을 container, JSX(ui) 부분의 파일을 presenter 라고 한다.
presenter 를 container 로 import 하여 사용하는데, 이때 container 를 부모 컴포넌트, presenter 를 자식 컴포넌트라고 한다.
즉, import 해서 불러오는 파일을 부모, import 당하여 불려가는 파일을 자식이라고 보면 된다.
// Container
import BoardWriteUI from "./BoardWrite.presenter"
export default function BoarWirte() {
return (
<BoardWriterUI> //
)
}여기서 import 해오는 BoardWriteUI 가 presenter 부분이다
// Presenter
export default function BoardWriteUI(){
return(
<Wrapper>
<Title>제목입니다</Title>
<Contents>내용입니다</Contents>
<Button onClick={onClickSubmit}>제출하기</Button>
</Wrapper>
)
}
이걸로 끝난다면 정말정말 좋겠지만 우리가 고려해야할 부분은 변수와 함수이다. js 부분과 jsx를 분리해 버렸으니 함수에 대한 정의는 container에 있지만 함수의 트리거가 되는 인풋이나 버튼은 jsx에 존재하기 때문이다. 이렇게 부모에서 자식으로 변수 또는 함수를 넘겨주는 것을 props 라고 부른다.
