[React] js에서 map으로 순회할 때 렌더링이 되지 않는 경우

이번엔 에러는 아니지만, 원하는대로 프로그램이 돌아가지 않는 현상이다.

일기장 프로그램을 만들기 위해 아래와 같은 임시데이터를 만들었다고 하자.

const dummyList = [
  {
    id: 1,
    author: 'author1',
    content: 'content1',
    emotion: '5',
    created_date: new Date().getTime(),
  },
  {
    id: 2,
    author: 'author2',
    content: 'content2',
    emotion: '4',
    created_date: new Date().getTime(),
  },
  {
    id: 3,
    author: 'author3',
    content: 'content3',
    emotion: '3',
    created_date: new Date().getTime(),
  },
];

이 데이터들을 브라우저에 띄워보도록

부모컴포넌트에서 위 데이터를 props로 넘겨주고, 자식컴포넌트에서 map으로 순회하여 출력하도록 하자. 

??

분명 더미 데이터들을 전달해주었으며,

vsc에서의 빨간 박스를 통해 authors들을 출력해주려 하는 모습을 알 수 있다.

 

그러나, 크롬창에서의 빨간 박스에선 vsc 10번째 라인의 일기 개수만 출력되고,

그 아래 11~18번째 라인에 해당되는 authors들은 전혀 출력이 되지 않는 모습이다.

즉, map이 제대로 순회를 하지 않고 있는 모습이다.

 

3개의 일기가 있다고 하는 것으로 보아 props는 잘 전달된 것을 확인할 수 있다.

---

그럼 한번 return문 바깥에서 map 순회를 돌려볼까?

코드에서 5~7번째 라인에서 map으로 diaryList를 순회하여 일기장 작성자 author를 출력하도록 하였고,

8번째 줄에서 diaryList 자체를 console.log찍었을 때의 결과로 봐선 props는 문제없이 넘어갔다.

즉, 리턴문 바깥에서 map 순회는 문제없이 돌아간다.

 

13~20번째 라인에 해당하는

return문의 map 순회가 제대로 작동되지 않는다는 것.

에러는 뜨지 않지만, 렌더링이 전혀 되지 않고 있다.

 

이유가 무엇일까?

---

문제가 되는 코드

(해결방법을 바로 보고 싶으면 밑으로 쭉 내리시면 됩니다)

App.tsx

import React from 'react';
import './App.css';
import DiaryEditor from './DiaryEditor';
import DiaryList from './DiaryList';

export interface DiaryProps {
  id: number;
  author: string;
  content: string;
  emotion: string;
  created_date: number;
}
const dummyList = [
  {
    id: 1,
    author: 'author1',
    content: 'content1',
    emotion: '5',
    created_date: new Date().getTime(),
  },
  {
    id: 2,
    author: 'author2',
    content: 'content2',
    emotion: '4',
    created_date: new Date().getTime(),
  },
  {
    id: 3,
    author: 'author3',
    content: 'content3',
    emotion: '3',
    created_date: new Date().getTime(),
  },
];

const App = () => {
  return (
    <div className="App">
      <h1>안녕하세용</h1>
      <DiaryEditor />
      <DiaryList {...dummyList} />
    </div>
  );
};

export default App;

DiaryList 자식컴포넌트를 통해 더미데이터들을 출력해주기 위함이다.

typescript이므로 인터페이스로 props 타입을 지정해주어 그 타입에 맞게 dummy Data들을 만들어주었다.

 

DiaryList.tsx

import React from 'react';
import { DiaryProps } from './App';

const DiaryList = (diaryList: DiaryProps[]) => {
  Object.values(diaryList).map((v, idx) => {
    console.log(v.author);
  });
  console.log(diaryList);
  return (
    <div className="DiaryList">
      <h2>일기 리스트</h2>
      <h4>{Object.keys(diaryList).length}개의 일기가 있습니다.</h4>
      <div>
        {Object.values(diaryList).map((v, idx) => {
          <div>
            <p>{idx + 1}번 일기</p>
            <div>작성자: {v.author}</div>
          </div>;
        })}
      </div>
    </div>
  );
};

export default DiaryList;

props로는 DiaryProps 타입의 일기가 총 3개이기 때문에 DiaryProps[] 형태로 타입을 지정해주었다.

이후에 map으로 순회하여 브라우저에 표현해주려 하였다.

---

문제점 및 해결방법

typescript 문제가 아닌 js 실수였는데,

map으로 리턴할 때 

중괄호로 쓰면 return을 생략할 수 없고,

소괄호로 쓰면 return 생략이 가능한데,

 

맨날 자주 쓰던 습관대로 중괄호를 쓰고 tsx (jsx) html 태그를 쓰고 리턴을 붙이지 않아서 발생한 문제였다.

따라서 아래와 같이 수정해주었다.

{Object.values(diaryList).map((v, index) => (
  <div key={index}>
    <p>{index + 1}번 일기</p>
    <div>작성자: {v.author}</div>
  </div>
))}

잘 된다.

 

prettier가 잡아주는 줄 알았는데,

(), {} 둘 다 가능하기 때문에 잡아주지 않나보다.

 

참고: https://www.inflearn.com/questions/10218

map 리턴에 따라 에러가나던데 질문드립니다 - 인프런 | 질문 & 답변

 

(비밀댓글로 작성해주신 분께서 정말 많이 도와주셨다. 다시 한 번 감사드립니다!)

---

오늘만 타입스크립트로 발생한 에러가 도대체 몇개째인지 모르겠다.

힘든 만큼 얻는게 많길 기원한다 ㅠㅠ