39일차 프론트엔드 공부 - 파일 나누기

- 프론트엔드 공부 39일차 -

폴더 구조 체계화

 

1. 컨테이너 / 프리젠테이셔널 패턴  -> 이전에 많이 사용한 방식

2. 훅스(함수) 패턴    -> 최신 방식

3. 아토믹 패턴

컨테이너 / 프리젠테이셔널 패턴  

자바스크립트 부분과과 HTML 부분을 2개의 파일로 나누는 방식

 

컨테이너 : 자바스크립트 

프리젠테이셔널 : HTML

 

리액트의 데이터 흐름? 

단방향

부모가 지식에게만 데이터를 줄 수 있다.

 

파일을 서로 연결하는 방법

import를 사용하면 된다.

 

다른 파일로 보내주고 싶은 함수 앞에는 export를 사용해야 한다.

 

(props)

JS에서 작성한 함수를 HTML로 넘겨주기 위한 방법

 

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

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

 

import { useMutation } from "@apollo/client";
import { useState } from "react";
import BoardWriteUI from "./BoardWrite.presenter";
import { CREATE_PRODUCT } from "./BoardWrite.queries";

export default function BoardWrite() {
  const [writer, setWriter] = useState();
  const [title, setTitle] = useState();
  const [contents, setContents] = useState();

  const [createBoard] = useMutation(CREATE_PRODUCT);

  const onClickSubmit = async () => {
    const result = await createBoard({
      variables: {
        // variables는 $와 같은 역할을함
        writer: writer,
        title: title,
        contents: contents,
      },
    });
    console.log(result);
  };

  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}
    />
  );
}

 

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

export const CREATE_PRODUCT = gql`
  mutation createBoard($writer: String, $title: String, $contents: String) {
    createBoard(writer: $writer, title: $title, contents: $contents) {
      _id
      number
      message
    }
  }
`;

 

import { RedInput, BlueButton } from "./BoardWrite.styles";

export default function BoardWriteUI(props) {
  return (
    <div>
      작성자 : <RedInput type="text" onChange={props.bbb}></RedInput>
      제목 : <input type="text" onChange={props.ccc}></input>
      내용 : <input type="text" onChange={props.ddd}></input>
      <BlueButton onClick={props.aaa}>Graphql-API 요청하기</BlueButton>
    </div>
  );
}

import styled from "@emotion/styled";

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

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

 

 

return (

    <BoardWriteUI

      aaa={onClickSubmit}

      bbb={onChangeWriter}

      ccc={onChangeTitle}

      ddd={onChangeContents}

    />

  );

 

함수를 aaa={함수} 형식으로 만든 이유

다른 파일에서 함수를 사용하기 위해서는 prop를 이용해야한다. 위와 같은 코드를 사용하게 되면 해당 함수를 prop에 담게 된다.

 

 return (

    <div>

      작성자 : <RedInput type="text" onChange={props.bbb}></RedInput>

      제목 : <input type="text" onChange={props.ccc}></input>

      내용 : <input type="text" onChange={props.ddd}></input>

      <BlueButton onClick={props.aaa}>Graphql-API 요청하기</BlueButton>

    </div>

  );

다른 파일의 함수를 사용하는 방법.

함수가 작성된 파일에서 prop에 담긴 함수를 이용해야한다.

+

export default function BoardWriteUI(props) {

기존에는 BoardWriteUI() 이렇게 작성하였지만 props를 이용하기 위해서는 BoardWriteUI(props)라고 작성해야 한다.

 

export, export-defalut 차이

export 

한 파일내에서 여러개의 export 사용 가능하다

(원하는 것만 내보낼 수 있다.)

 

ex)

export const Main = gql`

...

`

 

import { Main } from  './Board'

 

 

한 파일내의 모든 export 가져오는 방법

import * as AAA(원하는 값 입력) from  './Board'

 

export-defalut

한 파일에서 한 개의 export-defalut만 사용 가능하다

(원하는 것만 보내지 못한다.)

 

ex)

export defalut function Write(){

...

}

import Write from './Board'

 

한 파일에서는 export , export-defalut 둘 다 사용 가능하다.

import Write, { Main } from './Board'