감정일기장 다이어리 필터 적용할때 컨텍스트를 Home에서 가져오는 특별한 이유가 궁금합니다.
1
4 câu hỏi đã được viết
import { DiaryStateContext } from '../App';
import {useContext} from "react";
const filterDiary = (pivotDate, diary) => {
const start = new Date(pivotDate.getFullYear(), pivotDate.getMonth(),1,0,0,0).getTime();
const end = new Date(pivotDate.getFullYear(),pivotDate.getMonth()+1,0,23,59,59).getTime();
return diary.filter((item) => item.createdDate >= start && item.createdDate<=end);
}
const DiaryList = ({pivotDate}) => {
const data = useContext(DiaryStateContext);
const filterDates = filterDiary(pivotDate,data);
return <div className = "DiaryList">
<div className="menu_bar">
<select>
<option value={"latest"}>최신순</option>
<option value={"oldest"}>오래된 순</option>
</select>
<Button text={"새 일기 쓰기"} type={"POSITIVE"}/>
</div>
<div className="list_wrapper">
{
filterDates.map((item) => <DiaryItem key={item.id} {...item}/>)
}
</div>
</div>
}저는 이런식으로 DiaryList에서 컨텍스트를 가져와서 DiaryItem에게 넘겼는데요 Home에서 가져와서 넘기는 방식이랑 제 방식이랑 차이점이 있을까요? 특별히 Home에서 해야하는 이유가 있는지 아니면 상관없는지 궁금합니다.
Câu trả lời 1
0
안녕하세요, 인프런 AI 인턴입니다. ereum999님, DiaryList에서 DiaryStateContext를 직접 가져오는 방식도 동작에는 문제가 없습니다. DiaryList가 DiaryStateContext.Provider의 하위 컴포넌트라면 어디서든 useContext로 상태를 읽을 수 있습니다.
다만 강의에서는 보통 다음과 같은 역할 분리를 위해 Home에서 컨텍스트를 가져옵니다.
Home: 전체 일기 데이터를 가져오고, 현재 월에 해당하는 데이터로 필터링
DiaryList: 전달받은 일기 목록을 정렬하고 화면에 출력
DiaryItem: 일기 한 항목을 표시
따라서 아래처럼 Home에서 필터링한 결과를 DiaryList에 props로 전달하는 구조가 컴포넌트의 역할을 분리하기에 더 좋습니다.
// Home.jsx
const data = useContext(DiaryStateContext);
const filterDates = filterDiary(pivotDate, data);
return <DiaryList data={filterDates} />;
// DiaryList.jsx
const DiaryList = ({ data }) => {
return (
<div className="list_wrapper">
{data.map((item) => (
<DiaryItem key={item.id} {...item} />
))}
</div>
);
};
반대로 질문자님처럼 DiaryList에서 직접 컨텍스트를 사용하는 방식은 코드가 짧아지는 장점이 있지만, DiaryList가 전역 상태와 특정 컨텍스트에 의존하게 됩니다. 그러면 나중에 다른 일기 목록 데이터를 사용하거나, 테스트하거나, 재사용할 때 props를 받는 방식보다 유연성이 떨어질 수 있습니다.
즉, 반드시 Home에서 가져와야 하는 특별한 규칙은 없습니다. 두 방식 모두 가능하지만, 부모 컴포넌트에서 데이터를 준비하고 자식 컴포넌트는 전달받은 데이터를 화면에 표시하도록 구성하는 방식이 일반적으로 더 명확합니다.
관련해서 Home에서 월별 데이터를 계산하고 DiaryList로 전달하는 구조는 아래 질문을 참고해 보세요.
해당 질문에서도 Home에서 getMonthlyData 함수를 이용해 월별 데이터를 필터링한 뒤 DiaryList에 전달하는 구조를 사용하고 있습니다. 참고로 날짜 필터링 시에는 자바스크립트에서 a <= b <= c와 같은 연속 비교가 동작하지 않으므로, 다음처럼 각각 비교해야 합니다.
start <= item.createdDate && item.createdDate <= end
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
Editor Component의 최적화 불가능 이슈
0
67
2
useCallback ⊂ useMemo
0
58
2
라이브러리 설치 질문
0
70
2
linter 질문
0
80
2
감정일기장 vercel 배포 후 새로 고침 시 404페이지가 뜨는 이유
0
71
2
Sort 메서드 관련 아티클
0
69
2
4.1) React.js를 소개합니다 강의를 듣고 궁금한 점이 생겼습니다.
0
65
2
html, body에 적용하는 css 스타일 질문입니다.
0
69
2
eslint.config.js 설정 질문입니다.
0
122
2
존재하지 않는 일기 url입력 시 alert이 두 번 떠요
0
77
1
교재(3쇄)와 강의 내용 문의
0
86
2
12.13) 하단 여백 스타일링 관련 질문 드립니다.
0
108
2
에러 질문드립니다
0
136
2
VSCode 설정 문의
0
167
2
PPT 코드 관련 질문
0
82
2
useEffect와 lifecycle문의
0
103
2
프론트엔드 학습 수준 문의
0
118
2
리액트 챕터별 코드에서 eslint 설정파일이 없어요
0
126
2
데이터 로딩중 화면만 계속 나와요!!
0
119
2
퍼블리셔일경우 어느정도 수준까지 강의를 들어야할까요
0
153
2
이후의 커리큘럼 문의
0
166
2
실슬환경 설정에서 save후 console.log 부분이 새로고침이 안되는현상입니다.
0
144
2
최적화 관련 질문있습니다 (useMemo 등)
0
157
3
프로바이더 컴포넌트의 위치는 어떤 기준인가요?
1
138
3