빈 화면이 보이는 오류 (map사용)

해결된 질문

작성

리액트 section11 수업을 공부하고 있는데요

map( ) 사용하면서 콘솔과 네트워크 오류가 없음에도 빈 화면이 나옵니다. 링크 경로가 다른 것도 아니고.. 분명 강의 보고 따라했을 때는 화면이 보였는데 지금 다시 해보니 화면이 보이지 않네요 ㅠㅠ 이유가 있을까요?

콘솔에서 에러가 안보였는데 뒤늦게 뜬? 내용은 이와 같습니다.

원인과 해결방법이 있을까요? 아무리 찾아봐도 해결방법을 찾지 못해 여쭤봅니다.

Uncaught Error: Attempting to use a disconnected port object

?? 이건 또 잘 나오는거 보면 map을 잘못 쓴건가 싶기도 합니다 ㅠㅠ

pages/app.js

import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client";
// 아폴로 클라이언트 가져오기

export default function App({ Component, pageProps }) {

  const client = new ApolloClient({
    uri: "http://practice.codebootcamp.co.kr/graphql",
    cache: new InMemoryCache(),
    // 컴퓨터의 메모리에다가 백엔드에서 받아온 데이터 임시로 저장하기
  }) // GraphQL 세팅

  return (
    <ApolloProvider client={client}>
      <div>여긴 헤더</div>
      <Component {...pageProps}/>
      <div>여긴 푸터</div>
    </ApolloProvider>
  )
}

pages/index.js

import Head from "next/head";
import React from "react";

export default function Home() {
  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <div>rmfrjfljslf</div>
    </>
  );
}

map-boards/index.js

import { useQuery, gql } from "@apollo/client"

const FETCH_BOARDS = gql`
query {
    fetchBoards{
        number
        writer
        title
        contents
    }
}
`

export default function MapBoardsDeletePage(){

    const {data} = useQuery(FETCH_BOARDS);

    return(
        <div>
            {data?.fetchBoards.map(el => {
                <div>
                    <span>
                        <input type="checkbox"/>
                    </span>
                    <div>번호: {el.number}</div>
                    <div>작성자: {el.writer}</div>
                    <div>제목: {el.title}</div>
                    <div>내용: {el.contents}</div>
                </div>
            })}
            <div>??</div>
        </div>
    )
}

답변 1

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

지은님, map-boards/index.js 파일에서 map() 함수를 사용하여 데이터를 렌더링하시려는 부분에 문제가 있는 것 같습니다. map() 함수 내에서 JSX를 반환할 때 return 문을 사용하지 않아서 화면에 아무것도 표시되지 않는 문제가 발생한 것으로 보입니다.

map() 함수 내에서 화살표 함수를 사용하실 때는 중괄호 {} 대신 소괄호 ()를 사용하시거나, 중괄호를 사용하실 경우 return 문을 명시적으로 작성해 주셔야 합니다.

수정된 코드는 다음과 같습니다:

export default function MapBoardsDeletePage(){

    const {data} = useQuery(FETCH_BOARDS);

    return(
        <div>
            {data?.fetchBoards.map(el => (
                <div key={el.number}> {/* 각 요소를 구분할 수 있는 고유 key 값을 추가하는 것이 좋습니다. */}
                    <span>
                        <input type="checkbox"/>
                    </span>
                    <div>번호: {el.number}</div>
                    <div>작성자: {el.writer}</div>
                    <div>제목: {el.title}</div>
                    <div>내용: {el.contents}</div>
                </div>
            ))}
            <div>??</div>
        </div>
    )
}

위와 같이 수정하신 후 다시 실행해 보세요. 각 요소를 고유하게 식별할 수 있도록 반복되는 요소에 key 속성을 추가하는 것을 잊지 마세요. 다음과 같은 작은 실수가 발생할 수 있으니 코드를 작성하실 때 주의하시면 좋을 것 같습니다.

융융

질문자

감사합니다. 해결 했습니다!

인프런 커뮤니티 질문&답변

빈 화면이 보이는 오류 (map사용)