이전 글에서 살펴본 바와 같이, React를 사용할 땐 src 폴더를 생성하여 메인 pages index.js와 container, presenter, style 파일을 분리하여 관리할 수 있다.

이렇게 네 개의 파일로 분리하여 관리하다 보면 메인 pages에서 container로, container에서 presenter로 데이터를 던져줘야하는 경우가 생긴다.

import export 처럼 데이터도 특정 파일에서 특정 파일로 보내주는 연결고리가 필요하다.

1. props

1) props란?

props란 위에서 언급한 바와 같이 파일에서 파일로 (컴포넌트에서 컴포넌트로) 데이터를 연결해주는 연결고리라고 할 수 있다.
여기서 주의할 점은 데이터는 반드시 부모 페이지 -> 자식 페이지 방향으로 전달되어야 한다.
부모 페이지에서 props로 데이터를 넘겨줄 땐 해당 데이터를 객체로 묶어서 전달해준다.

2) container에서 presenter로 데이터 넘겨주기

container.js

container에서 presenter로 props를 통해 onChange 함수들과 onClick 함수를 넘겨주고 있다.

import { useMutation } from '@apollo/client'
import { useState } from 'react'
import BoardWriteUI from './BoardWrite.presenter'
import { CREATE_BOARD } from './BoardWrite.quries'

export default function BoardWrite() {

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

    const [createBoard] = useMutation(CREATE_BOARD)


    const onClickGraphqlApi = async() => {
        const result = await createBoard({
            variables: {
                writer,
                title,
                contents
            }
        })
    }

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

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

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

    return (
        <BoardWriteUI 
            onClickGraphqlApi={onClickGraphqlApi}
            onChangeWriter={onChangeWriter}
            onChangeTitle={onChangeTitle}
            onChangeContents={onChangeContents}
        >
        </BoardWriteUI>
    )
}

presenter.js

container에서 받아온 props를 BoardWriteUI 매개변수에 넣어주고, return 부분에 props.~ 으로 데이터를 넣어주면 container의 데이터를 presenter로 가져올 수 있다.

import { RedInput } from "./BoardWrite.styles"

export default function BoardWriteUI (props) {

    return (
        <>
            작성자: <RedInput type="text" onChange={props.onChangeWriter}></RedInput><br></br>
            제목: <input type="text" onChange={props.onChangeTitle}></input><br></br>
            내용: <input type="text" onChange={props.onChangeContents}></input><br></br>
            <button onClick={props.onClickGraphqlApi}>GraphQl-API 요쳥하기!</button>
        </>
    )
}

2. state

위에서 container -> presenter 데이터 넘겨주기를 props를 통해 하는 과정을 살펴볼 수 있었다.
그 과정에서 container.js 파일 안에 아래와 같은 코드를 볼 수 있었다.

import {useState} from 'react'

export default function BoardWrite() {
	const [writer, setWriter] = useState("")
    const [title, setTitle] = useState("")
    const [contents, setContents] = useState("")
    
    const onChangeWriter = (event) => {
        setWriter(event.target.value)
    }

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

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

1) state란?

state란 React 컴포넌트 안에서 데이터를 담아주는 공간이다.
즉, 컴포넌트에서 사용하는 변수인데 props가 컴포넌트에서 컴포넌트로 데이터를 넘겨주기 위한 상자라면 state는 하나의 컴포넌트 안에서 데이터를 담아주는 상자라고 생각하면 된다.

state를 사용할 때 쓰는 Reack Hooks에는 useState와 setState가 있다.

React Hooks란?
함수형 컴포넌트에서 클래스형 컴포넌트와 같이 다양한 기능을 사용하도록 하기 위한React 도구
즉, 함수형 컴포넌트만으로는 클래스형 컴포넌트 기능을 따라갈 수 없어 React가 함수형 컴포넌트를 위해 만들어둔 도구

useState는 변수를 만들어주고 setState는 변수를 바꿔준다.
(나도 이 개념이 아직 100% 완벽하진 않지만 let과 비슷한 느낌이라고 생각하면 될 것 같다..!)

2) state에 데이터 담기

writer, title, contents를 onChange에서 사용하기 위해 useState를 활용하여 변수를 만들어줬다!
const [변수명, 변수 바꾸는 기능] = useState(변수)

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

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 GraphqlMutationPage() {

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

    const [createBoard] = useMutation(CREATE_BOARD)


    const onClickGraphqlApi = async() => {
        const result = await createBoard({
            variables: {
                writer: writer,
                title: title,
                contents: contents
            }
        })
        console.log(result)
        console.log(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 (
        <>
            작성자: <input type="text" onChange={onChangeWriter}></input><br></br>
            제목: <input type="text" onChange={onChangeTitle}></input><br></br>
            내용: <input type="text" onChange={onChangeContents}></input><br></br>
            <button onClick={onClickGraphqlApi}>GraphQl-API 요쳥하기!</button>
        </>
    )
}