์์์ API๋ก ๋ฐ์ดํฐ๋ฅผ ์์ฒญ์ ์ฒ๋ฆฌํ๊ฑฐ๋ state ๋ณ์๋ก ๊ฐ์ ์ ๋ ฅ์ ๋ฐ๋ผ ๊ฐ์ด ๋ณํ๋ ๋ฑ ๊ธฐ๋ณธ์ ์ธ HTML(JSX)์ CSS์ ๋ํด ๋ค์ํ ์คํฌ๋ฆฝํธ ์์ฑ์ ๋ฐฐ์ ๋ค.
ํ์ง๋ง ์ฌ์ดํธ ํ๋๊ฐ ์์ฑ์ด ๋๊ณ ๋ ํ์ ์ฝ๋๋ฅผ ์์ ํ๊ฑฐ๋ ์ถ๊ฐ๋ก ๊ธฐ๋ฅ์ ๋ถ์ฌํ๋ ค๋ฉด ํ ํ์ผ์ ์ฌ๋ฌ ์ฝ๋๋ฅผ ํจ๊ป ์ ๋ ฅํ๋ ๋ฐฉ์์ ๊ธฐ์กด ์ฝ๋๋ฅผ ์ฐพ๊ธฐ์ํด ์๊ฐ์ ๊ฝค ๋ญ๋นํด์ผํ ๊ฒ์ด๋ค.
๊ทธ๋์ ํ์ผ์ js, css, html ์ด๋ ๊ฒ ๋๋ ์ ์์ฑํ๋ฏ์ด ๋ฆฌ์กํธ์์ ๋ํ์ ์ผ๋ก ํ์ผ์ ๊ด๋ฆฌํ๋ ํจํด์ด container - presentation ๋ฐฉ์์ด๋ค.
์ฝ๊ฒ ๋งํด, Container ํ์ผ์ ๊ธฐ๋ฅ ๊ตฌํ์ ๊ดํ ๋ณ์ ๋ฑ์ ์คํฌ๋ฆฝํธ๋ฅผ ์์ฑํ๊ณ ,
Presentation ํ์ผ์ UI์ ๊ดํ ์ฝ๋๋ฅผ ์์ฑํ๋ค.
ํ์ผ์ ๋ถ๋ฆฌํ๊ณ import, export๋ก ํ์ผ๋ผ๋ฆฌ ์ฐ๊ฒฐ์ ํด์ฃผ์์ง๋ง ํ์ผ ๋ด๋ถ์์๋ ์ ์ธ๋ ๋ณ์๋ ํจ์์ ๋ํด ๊ธฐ๋ฅ์ ๊ตฌํํ ์ฝ๋๊ฐ ์๋ค๊ณ ํ๋จํ๊ธฐ๋๋ฌธ์ PROPS ๋ก Component๋ผ๋ฆฌ ์ฐ๊ฒฐํด์ค์ผํ๋ค.
๊ฐ๋จํ ์ฝ๋๋ก ๋ณด์๋ฉด,
//**์ค์ ๋ก ์น์ฃผ์์ ๋ณด์ฌ์ง๋ ํ์ด์ง = index.js
import BoardWrite from "../../src/components/units/board/write/BoardWrite.container"
export default function graphqlMutationArgsInput(){
return(
<BoardWrite />
)
}
์ค์ ์น์์ ๋ณด์ฌ์ง๋ indexํ์ผ์ css๋ ๊ธฐํ ๊ธฐ๋ฅ๋ค์ด ํฉ์ณ์ง ํ์ผ(container.js)์ ์ฐ๊ฒฐํด์ฃผ๊ณ ,
//BoardWrite.container.js
import { useMutation } from '@apollo/client'
import { useState } from 'react'
import BoardWriteUI from './BoardWrite.presenter'
import { CREATE_BOARD } from './BoardWrite.queries'
export default function BoardWrite(){
const [myWriter,setMyWriter] = useState("")
const [aaa,setAaa] = useState("")
const [qqq] = useMutation(CREATE_BOARD)
const zzz = async () =>{
const result = await qqq({
variables : {
writer : myWriter ,title :myTitle,contents :myContents
}
})
setAaa(result.data.createBoard.message)
}
const onChangeMyWriter = (event) =>{
setMyWriter(event.target.value)
}
return(
<BoardWriteUI //presenterํ์ผ๊ณผ ์ฐ๊ฒฐ์ ์ํด..
bbb={aaa}
ccc={zzz}
ddd={onChangeMyWriter}
/>
)
}
์น์ฌ์ดํธ ๋์์ ์ํด ํ์ํ ๊ธฐ๋ฅ์ด๋ presenter.js์ ๋ด๊ธด UI๋ฅผ ์ฐ๊ฒฐํด์ฃผ๊ณ javaScript๋ฅผ ์์ฑํ๋ค.
//BoardWrite.presenter.js
import * as AAA from './BoardWrite.styles'
export default function BoardWriteUI(props){
return(
<>
์์ฑ์ : <AAA.MyInput type ="text" onChange={props.ddd}/><br />
์ ๋ชฉ : <AAA.MyInput type="text"/><br />
๋ด์ฉ : <AAA.MyInput type="text"/><br />
<AAA.MyButton onClick={props.ccc}>Graphql-API ์์ฒญํ๊ธฐ</AAA.MyButton>
<div>{props.bbb}</div>
//ํค,๊ฐ ํ์์ผ๋ก props.ํจ์๋ช
์ ์ ์ด์ ์ฐ๊ฒฐ
</>
)
}
BoardWriteUI ํ์ด์ง ์ปดํฌ๋ํธ์ PROPS๋ฅผ ์ฐ๊ฒฐํด์ฃผ๋ฉด
ํจ์๋ ๋ณ์๊ฐ {prop.~}( => ํค,๊ฐ ํํ )๋ก ๊ด๋ จ ๋ฐ์ดํฐ๋ค์ด ํ๊ทธ์ ์
๋ ฅ๋๋ค.
๐ง Tip !
๋์ผํ ์ปดํฌ๋ํธ๋ฅผ ์ฌ๋ฌ ํ์ด์ง๋ก ์ฐ๊ฒฐํด์ค๋ ๊ฐ๊ธฐ ๋ค๋ฅธ ์ ๋ณด๋ฅผ ์ ๋ ฅํด์ค์ผํ๋ค๋ฉด prop๋ฅผ ํตํด ์กฐ๊ฑด๋ฌธ์ ๋ฃ์ด ํ์ด์ง๋ง๋ค ๋ค๋ฅธ ๋ฐ์ดํฐ๋ฅผ ํ์ถํด์ค ์ ์๋ค.<h1>{props.isEdit ? "์์ ํ๊ธฐ" : "๋ฑ๋กํ๊ธฐ"}</h1>
๋์ผ๋ก,
props ํ์ฉ์ ๋ํ ์ดํด์ ํ
์ดํฐ๋ฅผ ๋๋ ์ ๊ด๋ฆฌํ๋ ๋ฒ์ ์ง์์ ์ผ๋ก ์ตํ ํ์๊ฐ ์๊ฒ ๋ค.