Conversation
There was a problem hiding this comment.
컴포넌트 분리와 상태 관리 깔끔하게 잘 구현하셨어요! 호버 디자인이나 반응형 디자인 고려하신 디테일 너무 좋습니다 ㅎㅎ useState를 활용한 상태 관리와 조건부 렌더링 처리 정말 잘해주셨어요! 그리고 중앙 정렬로 깔끔한 레이아웃이 인상 깊어요! 그리고 제출하기 이전에 바로 얼리 리턴 처리를 하지 않고,
if (!title || !content) {
alert('제목과 내용을 모두 입력해주세요.');
return;
}이렇게 사용자에게 알려주는 건 UX를 잘 고려해주신 것 같습니다! 굿!!
목업 데이터를 단순히 재현한 게 아니라 직접 state 이용해서 렌더링 시킨 도전 정말 좋아요~!
| "lint": "eslint .", | ||
| "preview": "vite preview" | ||
| }, | ||
| "dependencies": { |
There was a problem hiding this comment.
프로젝트에서 스타일드 컴포넌트를 이용한 것 같은데, package.json 파일에는 항목이 없네요..!
혹시 yarn install styled-components를 실행하셨는지!!
| const Post = ({ post }) => { | ||
| const [comments, setComments] = useState([]); | ||
|
|
||
| const handleAddComment = (newPost) => { | ||
| setComments([...comments, { ...newPost, id: Date.now() }]); | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <div style={{ border: '1px solid #84c4fc', padding: '16px', marginTop: '20px', width : "1080px"}}> | ||
| <h2>{post.title}</h2> | ||
| <p>{post.content}</p> | ||
| </div> | ||
| <CommentList comments = {comments}/> | ||
| <CommentWrite onSave={handleAddComment}/> | ||
| </> | ||
|
|
||
| ); | ||
| }; |
There was a problem hiding this comment.
PR Point 에서 댓글이 새로고침하면 사라진다고 말씀해주셨는데,
간단하게 설명드리자면 댓글 상태가 Post 컴포넌트 내부에만 존재하기 때문인데요!
원리를 생각해보면,
- 메인 화면에서 게시글 클릭 → Post 컴포넌트가 마운트됨
- 댓글 작성 → Post 컴포넌트 내부의 comments 상태에 저장됨
- 목록 버튼 클릭 → Post 컴포넌트가 언마운트됨 (DOM에서 제거됨)
- 다시 같은 게시글 클릭 → Post 컴포넌트가 새로 마운트됨
- useState([])가 다시 실행됨 → comments 상태가 빈 배열로 초기화됨
현재 댓글은 Post 컴포넌트의 로컬 상태 → 컴포넌트가 사라지면 댓글도 사라집니다!
그럼 posts는 왜 안 사라지나요? 라고 물어보실 수도 있을 것 같은데,
posts는 App 컴포넌트(최상위)에 있어서 앱이 실행되는 동안 계속 유지되고
comments는 Post 컴포넌트(하위)에 있어서 Post 컴포넌트가 사라지면 함께 사라지기 때문입니다!
댓글을 유지하려면 댓글 상태를 Post 컴포넌트보다 상위 컴포넌트로 올려야 합니다. 즉, App.jsx에서 댓글을 관리하거나, 각 게시글 객체 안에 댓글 배열을 포함시켜야 해요!
2 participants
✨어떤 과제를 수행했나요?✨
블로그 만들기
프로젝트 기본 세팅
✨어려웠던점, 트러블슈팅✨
코드를 짜다보니까 컴포넌트 계층 구조와 단방향 데이터 바인딩이 어떻게 적용되는지 잘 모르겠습니다. 프로젝트 기본 세팅할 때 husky와 reset css가 적용되어있는지 모르겠습니다
🤔 PR Point
Post 에 댓글 배열을 저장했더니 메인 화면으로 나갔다 들어오니까 댓글이 초기화 되어있는데 아직 해결을 못했어요.