TIL_221213_ ❓❗✅☑️🍀 React 숙련 과제1

정윤숙·2022년 12월 13일
0

TIL

목록 보기
44/192
post-thumbnail

내일배움캠프 4기 스파르타코딩 React B반

📒 오늘의 공부

1. React 숙련 강의 마무리

어제 복습도 하면서 강의 다시 듣고 실습을 혼자서 해 본다고 시간을 많이 쏟아서 다른 걸 못 했다. 오늘은 답지를 보며 실습 마무리하고 남은 강의(router-dom)듣고 숙련 강의는 끝!

Redux Todo List 실습 마무리 한 건 어제자 TIL에 다시 정리했다.

react-router-dom

  • SPA 기반 React project 안에서 여러 페이지 구현 가능

  • yarn add react-router-dom

  • Router 설정

    • Router.js - 각 페이지들을 import
      -> 1개의 URL = Route
    • App.js - Router import
      -> 최상위 component인 app.js를 통해 router.js를 거치도록 하는 것

  • Router Hook

    • useNavigate
      -> dispatch처럼 import, 생성 후 url 입력
    onClick={() => {
      navigate("/works");
    }}
    • useLocation
      -> import, 생성
      -> console.log("location :>> ", location);
      페이지 안에서 조건부 렌더링에 사용
      -> <div>{`현재 페이지 : ${location.pathname.slice(1)}`}</div>
      slice(1) = "/works"에서 '/'를 자른 것

  • Link

    • <a/> 대신 쓰는 API
    • <a/>를 쓰면 브라우저가 새로고침 되면서 components가 렌더링되고 useState등의 메모리가 초기화
    • <Link to="/contact"> ""안에 url 넣기
    • 페이지를 이동 시킬 때 구현 방식에 따라 useNavigate / Link 활용

  • Layout Component

    • 모든 페이지에 동일한 Header, Footer를 주고 싶을 때
      -> Layout component에서 children을 props로 받아 Header, Footer, page 합성
      function Layout({ children }) {
return (
  <div>
    <Header />
    <div style={{...layoutStyles}}>
      {children}
    </div>
    <Footer />
  </div>
);
}
      -> router.js에서 Layout component로 <Routes>를 감싸주기

  • Dynamic Route(동적 라우팅)

    • Dynamic Route를 설정 = :id
    • useParams
      -> 각 컴포넌트에서 :id 조회할 수 있는 Hook
    • 'Main페이지'에서 사진(게시물 등)을 누르면 'Item페이지(상세 페이지)'로 이동하기
    1. Item component 생성
    2. router.js에 추가
      <Route path="main/:id" element={<item/>} />
      -> :id - 동적인 값을 받겠는 뜻
    3. Main.jsx에서 Link 설정
      -> <Link to={/main/${item.id}}>
    4. Item.jsx에서 useParams 사용
      function Item() {
const param = useParams();
const item = data.find(
  (item) => item.id === parseInt(param.id));
return <div>{item.todo}</div>;
}

2. React 숙련 과제

  • List Up

    • Create, Update, Delete Todo / Read Todos, Todo
    • todos 데이터는 리덕스를 사용해서 전역으로 상태 관리
    • todos 모듈은 Ducks 패턴
    • ✅ 상세보기 클릭하면 Todo의 상세 페이지로 이동
    • ✅ 상세 페이지
      (Todo의 ID, Todo의 제목, Todo의 내용, 이전으로 버튼)
    • ✅ 이전으로 버튼 클릭 - 리스트 화면으로 돌아가기
    • ✅ input에 값이 있는 상태에서 상세페이지로 이동하는 경우, input의 value가 초기화
    • ✅ styled-components로 변경
    • ✅ todos.length 사용해서 id 생성 시 발생할 수 있는 문제점에 대해 고민

  • 진행 과정

    • 'Redux_TodoList' repository 만들고 'React_ToDoList_Again'을 clone 해서 시작
    • 기본 설정
      -> Redux, styled-components, router-dom 설치
      -> 폴더, 파일 생성 및 수정
    • Redux_todoList 실습한 것, router 수업 코드 참고

❓❗

  • 페이지 연결부터 시도
    • pathname을 읽어 오는데서 오류 발생
      -> App.js에서 Router를 import할 때 경로가 잘못 되어 있었음
      -> import Router from "./shared/Router" 으로 해야 하는데
      import { Router } from "react-router-dom";으로 했음
      -> 경로 잘 설정하니 페이지 연결 잘 됨!

❓

  • 상세페이지 연결 시도

    • Todo.jsx(상세 페이지)에 정적 데이터를 넣고 TodoList.jsx에 버튼을 만들어 서로 연결 잘 되는 것 확인
      -> Todo.jsx에는 useState 쓸 수 없음
    • return <div>{todo.content}</div>;에서 타이틀도 함께 가져오고 싶은데
      {(todo.title, todo.content)}하면 content만 보임
      -> 상세 페이지 html, css 수정 필요

    -> 페이지의 데이터 = 모듈의 initialState인 것 이용해보기

  • Link사용해서 redux로 만든 todoList 연결하기

    • 선택한 todo의 아이디값이 주소로 들어감
    • 상세페이지(Todo.jsx)에서도 globalTodo를 가져왔더니 오류

  • props로 globalTodo를 가져오는 게 아니라 useSelector로 값을 다시 가져오니 해결

  • 팀원이랑 상세 페이지 코드가 모두 똑같은데 왜 안될까?

    • 상세페이지로 넘어가서 param.id와 일치하는 데이터를 가져오는 게 안 됨

❗

  • 그냥 뒤로가서 다시 누르면 잘 되는 거였는데 상세페이지에서 계속 새로고침을 해서 그런 거였다.

    • 상세 페이지 연결 성공!
    • 상세 페이지에서 홈으로 가는 버튼도 한 번에 성공!

  • Redux 쓰기

    • modules 폴더에서 추가,삭제,변경을 각 컴포넌트로 만들어도 될 것 같은데 그러면 reducer 안에서 switch만으로 바꿔도 되는 부분을 파일을 나눠서 중복코드가 생기게 될 것 같음
      -> 일단 한 파일에서 다 만들기

❓❗

  • AddForm.jsx component 만든 후에 기존 AddTodo+ CSS파일까지 삭제하기
    -> AddForm.jsx으로 연결했는데 추가하기 누르면 데이터가 안 들어감
    -> 모듈에서 switch문으로 return을 했더니 데이터가 잘 들어감! 추가하기는 구현 완료!

❓❗

  • TodoContainer.jsx 만들고 기존 TodoBox+CSS 삭제하기

-> 코드 중복 피하려고 입문 과제 때 이렇게 한 건데 계속 'isDone'이 정의되지 않았다는 오류가 뜸
-> toDo.isDone === toDo.isDone 으로 수정하면 isDone이 true, false에 상관없이 'working'과 'done'에 각각 모든 데이터가 나타난다.

  • props를 써서 구현 리스트 분리해서 불러오기 성공!

    • 원장님 강의 대로 todo list를 불러오려고 했는데 props를 안 쓰고 하려다 보니 계속 엉망진창ㅎ
    • "모든 state가 전역으로 관리되는 것은 아니다"
      -> 배웠는데 잊고 있었다.. props = state라고 하셨던 매니저님 말씀도 떠오르고ㅎ
    • props를 쓰면 안 된다고 생각하고 있었다.

❓

-> 삭제 버튼을 누르면 해당 카드는 삭제 안 되고 밑에 '삭제하기, 완료 버튼'이 하나 더 생김
-> reducer 안에서 return 값을 다르게 해야 할 것 같은데 감이 안 잡힌다.

  • state.filter is not a function 오류

  • 이렇게 수정하니 삭제하기 버튼 눌러도 오류는 안 나는데 아무런 반응이 없다. filter부분을 더 수정해야 할 것 같은데!

  • console.log엔 삭제하기 버튼 눌렀을 때 해당 데이터가 삭제된 배열만 반환이 되는데 화면엔 반영이 안 되고 삭제하기 버튼 누를 때마다 배열이 생성 된다.

❗

  • 팀원이 알려준 방식대로 dispatch로 아예 걸러진 값을 보내주기

  • 성공!!!

    • todo:[action.payload]에서 중괄호가 있을 땐 삭제하기 누르면 전체가 삭제 됐는데 중괄호를 빼니 완전 잘 된다!!!
    • 괄호 하나하나도 왜 저기 있는 건지 의미 파악하기..!

  • 상태 변경(완료, 취소) 버튼도 delete 버튼처럼 구현 성공!

🍀

튜터님 조언

  • 삭제하기 할 때 삭제가 안 되고 버튼들만 추가되는 문제

    • 입문 과제 때 썼던 코드에서 그냥 setTodo대신 dispatch만 띡 붙인다고 되는 것이 아님
    • TodoContainer.jsx - 삭제하기 버튼 눌렀을 때 dispatch로 넘겨줄 것은 삭제할 그 id인데 이미 filter로 걸러진 list를 넘기려고 해서 문제
      -> dispatch로 넘겨줄 것은 payload(id값)이고 Reducer에서 그 id를 제외한 리스트를 filter로 걸러서 반환하기!!

  • console 잘 쓰기

    • todoList.js모듈 - 삭제하기(Action Creator)에서
      return 전에 console.log(payload) 하면 id값이 잘 찍힘. 이걸 활용해보기
    • 이벤트가 발생할 때 거슬러 올라가서 실행 되는 곳마다 console로 값 확인하기!

  • chatGPT

  • stack overflow

  • id생성시 length+1 쓸 때 문제점

    • 초기 데이터의 id가 '1,2,3'일 때 하나를 삭제하면 숫자가 중복이 되는 문제 발생!
    • uuid 쓰기!

3. Udemy React 강의

  • 숙련 과제 하다가 머리 식힐 겸 강의 들었다.

State&Event

  • 조금 들었다. state에 대한 개념이 더 명확해지는 것 같다.
    • ☑️불변성 유지에 대해 다시 한 번 짚고 넘어갈 것
profile
정윤숙
프론트엔드 개발자
이전 포스트

TIL_221212_ ❓❗✅React 숙련 강의 - Hooks, Redux, 실습(TODO)

다음 포스트

TIL_221214_ ❓❗✅ React 숙련 과제2

0개의 댓글