학습내용
숙련 주차 내용을 바탕으로 제작한 todolist 보완
🔗 Github
<TodolistPages>
컴포넌트 제작
홈 화면에서 투두리스트 클릭시 <TodolistPages>
로 이동
상세페이지에 해당 투두리스트 데이터 불러오기
<Route path="/:id" element={<TodolistPages />} />
로 라우팅 처리시 id:인덱싱 객체를 자동 생성한다. 이 객체 정보를 활용해서 리스트에 해당하는 내용만을 상세페이지로 불러온다.
const TodolistPages = () => {
const list = useSelector((state) => state.manageTodo.initialList);
const i = Object.values(useParams());
return (
<Content>
<Todolist>
<Id>ID: {list[i].id.slice(0, 8)}</Id>
<Date>{list[i]["date"]}</Date>
<Todo>{list[i]["todo"]}</Todo>
</Todolist>
</Content>
);
};
useParams()
를 사용해서 :id
값을 파라미터로 가져오는데 객체 형태의 데이터를 가져오기 때문에 Object.values
로 value를 추출해서 인덱싱으로 활용했다.
투두리스트/완료리스트 필터링 실패
에러
<Contents /
컴포넌트에서 isDone
을 기준으로 투두리스트/완료리스트로 분리를 시도했으나 분리가 되지 않고 전체리스트가 두 번씩 반복되는 이슈 발생
원인
<Home />
컴포넌트에서 렌더링 할 때 <Contents />
컴포넌트를 직접 불러오지 않고 {children}
으로 받아온 이후로 해당 이슈가 발생한 것으로 보아 이 부분에서 충돌이 발생한 것으로 추측
해결
<Todolist />
컴포넌트 내에서 filter()
메서드를 사용해 분리 시도
➡️ <Contents />
와 같은 에러 발생
<Todolist />
컴포넌트에서 투두리스트와 완료리스트를 따로 작성해서 조건문으로 충족하는 데이터만 가져옴
➡️ 분리 자체는 성공했으나 중복 코드가 많기 때문에 근본적인 해결책이 필요함
<Home>
컴포넌트 이중 렌더링
에러
페이지 경로가 /
일때 <Home>
컴포넌트가 이중으로 렌더링 되는 이슈 발생
원인
const Router = () => {
return (
<BrowserRouter>
<Home>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/:id" element={<TodolistPages />} />
</Routes>
</Home>
</BrowserRouter>
);
};
라우팅 과정에서 <Home />
컴포넌트로 전체 컴포넌트를 감싸주고 그 안에서 /
경로에 또 다시 <Home />
컴포넌트롤 할당했기 때문
해결
<Route path="/" element={<Contents />} />
로 변경
<Home />
이 모든 컴포넌트를 모아주는 메인 페이지 같은 역할이기 때문에 당연히 기본 경로에 해당된다고 생각해서 발생한 이슈다. 메인 페이지는 맞으나 내용이 변경되는 부분은 <Contents />
와 <TodolistPAges />
컴포넌트이므로 모든 리스트를 조회하는 <Contents />
컴포넌트를 메인 경로로 설정해야 한다.
오늘은 완성이 되시겠군요!!! ㅎㅎ