[7일차-2] 과제 복습.

과제 복기

작성자, 내용 등을 입력하여 버튼을 눌렀을 시 다음 화면에 해당 값들이 적용되야함. 주소는 해당 게시물의 ID가 나와야 함.
작성자, 제목, 타이틀 3가지 및 ID 주소 반영하기 과제.
**css는 수업 첫날 한거라 미숙함. 나중에 수정할 예정.

이렇게 나와야한다.

---

첫 페이지에서 필요한 기능

1. 데이터 묶기 - react -> state
2. 통신 전송 - apollp -> mutation
   ->async/await, try/catch 사용.
3. 페이지 이동 - next -> router
4. emotion -> *기존에 작성한게 있고 현재 우선 순위 고려하여 생략.

---

작업 순서.

1. state, mutation, router 기능 불러오기.

import {useMutatiom, gql} from '@apollo/client'
import {useState} from 'react'
import {useRouter} from 'next/router'

2. 전체 함수 작성.

export default function(){

  return(
  <>
   //컨텐츠는 길어서 생략.
  </>
  )
}

3. gql 데이터 확인하기. 작성해야 하므로 mutation 조회.
   
   

4. gql 내용 할당.

const DRAGONBALL = gql`
mutation ZZZ ($writer:String, $password: String, $title: String!, $contents:String! ){
  createBoard(
  	createBoardInput:
  	{
   	writer:$writer
    	password:$password
    	title:$title
    	contents:$contents
    })
  	{
      _id
      writer
      title
      contents
      
    }}

`

5. 입력값 데이터 묶어야 하므로 state 선언.

const [kakarot, UseKakarot] = useState(
	writer:""
  	password:""
  	title:""
	content:""
)

6. 클릭 시 적용되는 mutation 선언.()안에 gql 할당한 변수 넣기.

const buruma = useMutation(DRAGONBALL)

7. 페이지 이동 위한 router 선언.

const router = useRouter()

8. input란에 입력되는 값 감지하는 onChangeInput 함수 선언.**위에서 선언한 state활용하기!
   개념 파악 위해 스프레드 사용 안함.

function onChangeInput(event){
  const begita = {
    writer: kakarot.writer,
    password:kakarot.password,
    title: kakarot.title,
    contents: kakarot.content
  },[event.target.name]:event.target.value
}
//이부분 미흡하므로 여러번 작성해보자.

스프레드 사용하면

function onChangeInput(event){
  const begita = {...kakarot,
  [event.target.name]:event.target.value}
	setKakarot(begita)
//입력한 값을 state사용한 setKakarot 적용.

9. 클릭 시 함수 onClickPost 함수 선언.
   클릭 시 통신 기능 사용되므로 async/await(뮤테이션 될 떄까지 기다려), try/catch(성공 실패 여부 확인) 활용.

async function onClickPost(){
	try{
      const result = await buruma({
    	variables:{
            writer: kakarot.writer,
            password:kakarot.password,
            title: kakarot.title,
            contents: kakarot.content
          }        
     	})
      alert("성공")//이건 없어도됨
      console.log(kakarot.id)
      //안에 뭐가 들어가있는지 확인. 경로 확인을 위함.
      router.push(`/board/${result.data.createBoard._id}`)
      //반드시 먼저 경로 확인해보기.
     }catch(error){
     alert(error.message)
     }
}
//이부분 미흡하므로 여러번 작성해보자.

---

첫페이지는 여기까지.