45일차 TIL : todolist

학습내용

숙련 주차 내용을 바탕으로 제작한 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}으로 받아온 이후로 해당 이슈가 발생한 것으로 보아 이 부분에서 충돌이 발생한 것으로 추측

• 해결

  1. <Todolist /> 컴포넌트 내에서 filter() 메서드를 사용해 분리 시도
     ➡️ <Contents />와 같은 에러 발생

  2. <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 /> 컴포넌트를 메인 경로로 설정해야 한다.

내일 할 일

• 리덕스 CUD 모듈 완성하기
• 투두리스트/완료리스트 중복코드 제거하기