프로젝트 과정3

Detail page

• header + main + footer

header

• Go Back + Edit Feedback

main

• Suggestion Item → Component
• Comments Container

Comments Container

• h4 + CommentList + (RepliesList) (+ NewReplyForm)

• CommentItem, ReplyItem
  • mobile : CommentHeader + content
  • desktop : CommentHeader + content → margin
• CommentHeader : (icon + name + btn)

footer

• Add Comment Form

NewCommentForm

• h4 + form

• form

  • textarea
  • left char + btn

Folder

📂 component
├── 📂 comments
|   ├── 📄 CommentsContainer
|   ├── 📄 NewCommentForm
|   ├── 📄 CommentHeader
|   ├── 📄 CommentList
|   └── 📄 CommentItem
└── 📂 replies
    ├── 📄 NewReplyForm
    ├── 📄 RepliesList
    └── 📄 RepliesItem
└── 📂 ui
    └── 📂 buttons
        └── 📄 EditBtn

문제 및 해결방안

1. fetch로 데이터를 불렀지만 setState에는 저장이 안되는 문제가 발생했다.

-> State는 비동기로 작동하므로 순서를 정해줘야 한다. 그래서 프로미스 안에 loading state를 넣어주니 잘 작동했다. -> (12-26 수정) 나중에 찾아보니 fetch를 비동기에서 동기로 작성해야 했다. async/await를 이용하는 방법도 있었다.