props와 폴더구조

degull·2023년 5월 26일

Container / presenter

Container : 자바스크립트(기능)
Presentational : JSX(UI)
한개의 파일에 정렬했던 코드를 2개의 파일로 나눠 폴더를 정렬한다.

파일을 2개로 나눠도 실행시에는 pages에서 하나로 합쳐져서 실행되어야 하기 때문에 부모 컴포넌트(presenter)에서 자식 컴포넌트(container)를 불러와야한다.

_app.js

import '../styles/globals.css';
import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';

function MyApp({ Component, pageProps }) {
  const client = new ApolloClient({
    uri: 'http://practice.codebootcamp.co.kr/graphql',
    cache: new InMemoryCache(),
  });

  return (
    <ApolloProvider client={client}>
      <Component {...pageProps} />
    </ApolloProvider>
  );
}

export default MyApp;

🔥🔥🔥 실행은 항상 _app.js에서 실행된다..

graphql-mutation-input

import BoardWrite from "@/src/components/units/board/write/BoardWrite.container";

export default function GraphqlMutationPage(){

   return (
      <BoardWrite />
   );


};

BoardWrite.presenter

import React from 'react';

export default function BoardWriteUI(props){

   //javascript 영역


// HTML 영역
   return (
      <>
         작성자 : <input type='text' onChange={props.bbb}></input>
         제목 : <input type='text' onChange={props.ccc}></input>
         내용 : <input type='text' onChange={props.ddd}></input>
         <button onClick={props.aaa}>GRAPHQL-API(동기)요청하기</button> 
      </>
   );
};

BoardWrite.container

import React from 'react';

import { useState } from 'react';
import {gql, useMutation} from '@apollo/client'

import BoardWriteUI from './BoardWrite.presenter';

const CREATE_BOARD = gql`
  mutation createBoard($writer: String, $title: String, $contents:String ){   #변수의 타입 적는 곳
   createBoard(writer:$writer, title:$title, contents :$contents){            # 실제 우리가 전달할 변수 적는 곳
      _id
      number
      message
   }
  } 
`
export default function BoardWrite(){


   const [writer, setWriter] = useState("")
   const [title, setTitle] = useState("")
   const [contents, setContents] = useState("")

   const [나의함수] = useMutation(CREATE_BOARD)

   const onClickSubmit = async () =>{
      const result = await 나의함수({
         variables:{ //variables : 이게 $역할
            writer: writer,
            title: title,
            contents : contents
         }
      })
      console.log(result)
      alert(result.data.createBoard.message)
   }

   const onChangeWriter = (event) =>{
      setWriter( event.target.value )
   }

   const onChangeTitle = (event) =>{
      setTitle( event.target.value )
   }

   const onChangeContents = (event) =>{
      setContents( event.target.value )
   }
}

   return (
      <BoardWriteUI
         aaa={onClickSubmit}
         bbb={onChangeWriter}
         ccc={onChangeTitle}
         ddd={onChangeContents} 
      />
   );