React Pattern

๊ถŒ์ง€ํ˜„ยท2022๋…„ 1์›” 19์ผ
0
post-thumbnail

๐Ÿ›  ๋ฆฌ์•กํŠธ์—์„œ ์ˆ˜๋งŽ์€ ์ฝ”๋“œ๋ฅผ ๊ด€๋ฆฌํ•˜๋ ค๋ฉด ...

์•ž์„œ์„œ 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๋ฅผ ์ž‘์„ฑํ•œ๋‹ค.

โญ๏ธ ์ด์ œ ์ž‘์„ฑํ•œ ํ•จ์ˆ˜/๋ณ€์ˆ˜์™€ UI๋ฅผ ์—ฐ๊ฒฐ์„ ์œ„ํ•ด PROPS๋ฅผ ์จ์ค€๋‹ค.

//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 ํ™œ์šฉ์— ๋Œ€ํ•œ ์ดํ•ด์™€ ํ…Œ์ดํ„ฐ๋ฅผ ๋‚˜๋ˆ ์„œ ๊ด€๋ฆฌํ•˜๋Š” ๋ฒ•์„ ์ง€์†์ ์œผ๋กœ ์ตํž ํ•„์š”๊ฐ€ ์žˆ๊ฒ ๋‹ค.

profile
FE ๊ฐœ๋ฐœ์ž ์„ฑ์žฅ ๊ธฐ๋ก ๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป

0๊ฐœ์˜ ๋Œ“๊ธ€