[ 19 ] 폴더구조 나누기 실습 : container-presenter 패턴

 

 

Container - Presenter 패턴

컴포넌트에서 JS 부분과 JSX 부분을 각각의 파일로 나눠서 관리한다.

 

 

주의사항 

이렇게 JS 와 JSX를 각각의 파일로 분리하고 import 해서 사용하게 되면 JS에서 정의한 변수나 함수를 JSX 안에서는 사용할 수 없게 된다. 각각의 파일( 컴포넌트 ) 는 독립적인 실행 컨텍스트를 가지므로, 한쪽에서 변수와 함수를 정의해도 다른쪽에서는 사용할 수 없다.

 

해결방법

 Container 컴포넌트에서 props 로 데이터를 Presneter 컴포넌트에 전달해주면 된다.  리액트는 단방향의 데이터 흐름을 갖고 있다. 따라서 반대로 Presenter 컴포넌트에서 Container 컴포넌트로 props를 전달해 주는것은 불가능하다.

 

emotion Css의 적용방법 

유닛 컴포넌트에 파일을 만들어서 관리한다.

import styled from "@emotion/styled";

const RedInput = styled.input`
  border-color: red;
`;

const BlueButton = styled.button`
  background-color: blue;
`;

export { RedInput, BlueButton };

 

presenter 컴포넌트에 import 해서 사용한다.

 

import 꿀팁 

위의 import 처럼 CSS Style 에서 2가지의 요소만 import 하면 상관없지만 만약 import 해야 하는게 100개, 1000개라면?

모든 export를 한번에 import 해서 사용하면 편하다

import * as S from "./BoardWrite.styles"

// S.BlueButton
// S.RedInput

graphQL 쿼리의 적용방법 

마찬가지로 유닛 컴포넌트에 파일을 만들어서 관리한다.

import { gql } from "@apollo/client";

export const 나의그래프큐엘세팅 = gql`
  mutation createBoard($writer: String, $title: String, $contents: String) {
    createBoard(writer: $writer, title: $title, contents: $contents) {
      _id
      number
      message
    }
  }
`;

 

container 컴포넌트에 imoprt 해서 사용한다.