개발일지 13일차

issue1: key 값 인식 오류

key={reply.id}를 추가했는데 이런 오류가 생겼다.

알아보니, 쪽지 모달창을 ReplyComponent에 연결하던 중 return 값을 <></>을 묶어줬더니, key={reply.id}를 인식하지 못하는 것이었다.

 

즉 React에서 리스트를 렌더링할 때 각 요소에 key prop을 제공해야한다는 규칙 위반인 것이다.

<></>를 제거했더니 오류가 해결되었다.

return (
  <div key={reply.id} className="reply" ref={el => (dropDownRefs.current[reply.id] = el)}>
	내용
  </div>
);

---

issue2: 컴포넌트 scss 적용 오류

아래와 같이 scss를 적용시켰는데 다른 곳에서는 멀쩡하게 적용되던 것이 ReplyComponent에서만 적용인 안된다.

.modal-background {
    position: fixed;
    top:0; left: 0; bottom: 0; right: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 100;
    font-family: 'Pretendard-Regular', sans-serif;
}

 

원인은