45일차 TIL : todolist

변시윤·2022년 12월 14일
0

내일배움캠프 4기

목록 보기
46/131

학습내용

숙련 주차 내용을 바탕으로 제작한 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 모듈 완성하기
  • 투두리스트/완료리스트 중복코드 제거하기
profile
개그우먼(개발을 그은성으로 하는 우먼)

1개의 댓글

comment-user-thumbnail
2022년 12월 15일

오늘은 완성이 되시겠군요!!! ㅎㅎ

답글 달기