map, filter 를 사용해 게시글 목록 보여주기와 삭제기능 구현하기

map

• for 문은 실무에서 잘 안쓴다. 대신 map을 쓴다.

const classmate = ["철수","영희","훈이"]
classmate.map((el) => el + "어린이")
["철수어린이","영희어린이","훈이어린이"]
const classmates = [{name: "철수"},{name: "영희"},{name: "훈이"}]
classmates.map((el) => ({name : `${el.name}`})] // name 자리에 어린이
const classmates = [{name: "철수어린이"},{name: "영희어린이"}...
const classmates = [{name: "철수"},{name: "영희"},{name: "훈이"}]'

• 각 요소에 school 추가하기

classmates.map((el) => ({name: el.name, age : el.age, school: "토끼초등학교"}))
//결과
0: {name: '철수', age: 13, school: '토끼초등학교'}
1: {name: '영희', age: 10, school: '토끼초등학교'}
2: {name: '훈이', age: 11, school: '토끼초등학교'}

• <div> </div>추가하기

const classmates=["철수","영희","훈이"]
const aaa = classmates.map((el) => <div>{el}</div>)
//결과
const aaa = [<div>철수</div>,<div>영희</div>,<div>훈이</div>]

export default function AAA(){
  const aaa= [<div>철수</div>,<div>영희</div>,<div>훈이</div>]
  return <div>{aaa}</div>
}
//결과
<div>
  <div>철수</div>
  <div>영희</div>
  <div>훈이</div>
</div>

Filter

• 11살 이상의 배열만 뜨게하기

const ages = [10, 13, 11]
ages.filter((el) => (el>= 11))

const classmates = [
  {name:"철수", age :10},
  {name:"영희", age :13},
  {name:"훈이", age :11}
]
classmates.filter((el)=> (el.age >= 11))
[
  {name:"영희", age :13},
  {name:"훈이", age :11}
]

• 원하는 키의 배열 가져오기

const classmates =[
	{name: '철수', age: 13, school: '토끼초등학교'}
	{name: '영희', age: 10, school: '다람쥐초등학교'}
	{name: '훈이', age: 11, school: '토끼초등학교'}
]
classmates.filter((el) => (el.school === "토끼초등학교"))
//결과 [
//	{name: '철수', age: 13, school: '토끼초등학교'}
//	{name: '훈이', age: 11, school: '토끼초등학교'}
//]
classmates.filter((el) => (el.age === 11))
//결과 [{name: '훈이', age: 11, school: '토끼초등학교'}]
classmates.filter((el) => (el.name === "영희"))
//결과 [{name: '영희', age: 10, school: '다람쥐초등학교'}]

filter랑 맵 같이쓰는방법

const classmates =[
	{name: '철수', age: 13}
	{name: '영희', age: 10}
	{name: '훈이', age: 11}
]
classmates
	.filter((el) => (el.age >= 11))
	.map((el) => ({ name:el.name, age: el.age, school:"다람쥐초등학교"}))
[
  	{name: '철수', age: 13, school: '토끼초등학교'}
	{name: '훈이', age: 11, school: '토끼초등학교'}
]

prompt

• 비밀번호 입력시 기억해준다.
  

게시글 목록화면 만들기 (데이터 조회까지)

📔 결과물

중요포인트는 주석으로 정리!

💻 container

export default function List() {
  const { data } = useQuery(FETCH_BOARDS); 
  // data에 useQuery 지정해주기

💻 presenter

{props.data?.fetchBoards.map((el, index) => (
            <Row key={el._id}>
              <Column>{index}</Column>
              <Column>{el.title}</Column>
              <Column>{el.writer}</Column>
              <Column>{el.createdAt}</Column>
            </Row>
          ))}
//map 을 사용해서 반복문 만들기
//el을 통해 데이터의 밸류를 불러온다.
//index는 숫자 // 그래서 키값에 index값을 해주면 안된다.

💻 queries

export const FETCH_BOARDS = gql`
  query {
    fetchBoards {
      _id
      writer
      title
      contents
      createdAt
    }
  }
`;
//데이터 조회를 위한 query

• yarn.dev 오류

  1. yarn dev 에 화면이안나온다.
  2. Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
  3. import ListUI from "./List.presenter"; 에는 중괄호를 치면안된다.

게시글 삭제하기

💻 container

import { useQuery, useMutation } from "@apollo/client";
import { DELETE_BOARD } from "./Detail.queries";
export default function Detail() {
  const [deleteBoard] = useMutation(DELETE_BOARD);
  async function onClickDelete(event) {
    await deleteBoard({
      variables: { boardId: event.target.id },
      refetchQueries: [{ query: FETCH_BOARD }],
    });
    return< onClickDelete={onClickDelete}/>
  }
}

📔 container 중요포인트

• Query Mutation(Delete)를 쓰기위한 import

import { useQuery, useMutation } from "@apollo/client";
import { DELETE_BOARD } from "./Detail.queries";

• deleteBoard에 useMutation 지정

const [deleteBoard] = useMutation(DELETE_BOARD);

• 클릭시 삭제 함수 만들기

async function onClickDelete(event) {
    await deleteBoard({
      variables: { boardId: event.target.id },
      refetchQueries: [{ query: FETCH_BOARD }], // 새로고침 query
    });
    return< onClickDelete={onClickDelete}/> //props 보내기
  }

💻 presenter

<ChangeButton
          id={props.data?.fetchBoard._id} //id에 fetchboard에서 데이터 이어주기
          onClick={props.onClickDelete} // 클릭시 삭제 함수

          삭제하기
        </ChangeButton>

💻 queries - mutation(delete)

export const DELETE_BOARD = gql` 
  mutation deleteBoard($boardId: ID!) {
    deleteBoard(boardId: $boardId)
  }
`;

• return() 오류

  1. wrapper 바깥에 ButtonWrapper가 안써진다.
  2. return() 안에는 가장 큰 하나의 꺽쇠가있어야한다