챌린지 수업도 듣고 해당 과제도 하고 개인 과제도 하고 챌린지 수업 과제 리팩토링도 하고 뭘 많이 했음.

1. RTK

아...정리한 파일이 사라져버려서 아쉽다..기억에 남아있는 것만 적어보자면

부모 컴포넌트는 무엇인가???

const App = () => {
 
  return (
    <Container>
      <Wrapper />
      <Counter />
    </Container>
    )
}

위에서 부모 컴포넌트는 누구일까?
1. 어떤 것이 리렌더링 되어야 자식 컴포넌트인 Wrapper와 Counter가 리렌더링 되는가?
2. 어떤 컴포넌트가 자식들에게 Props를 전달해줄 수 있는가?

정답은 App이다.
Container 는 상위 컴포넌트일 뿐 props를 내려주지도 해당 컴포넌트가 리렌더링 된다해서 Wrapper와 Counter가 리렌더링 되진 않는다

RTK는 어떻게 써야 잘 쓰는건가?

Redux쓰는 것처럼 RTK를 쓰고있었는데 이는 리팩토링된 내 코드를 올려놓는 것으로 대체하겠음.

// 사용코드

  const clickMemo = () => {
    const action = focusMemo(memo);
    dispatch(action);
  };


// slices
import { createSlice } from "@reduxjs/toolkit";
import { v4 as uuid } from "uuid";

const initialMemoId = uuid();
const initialState = {
  dataList: [
    {
      id: initialMemoId,
      hour: Date.now(),
      text: "",
    },
  ],
  selectedId: initialMemoId,
};

const memoSlice = createSlice({
  name: "memo",
  initialState,
  reducers: {
    createMemo: (state) => {
      const newMemo = {
        id: uuid(),
        hour: Date.now(),
        text: "",
      };

      state.dataList = [newMemo, ...state.dataList];
      state.selectedId = newMemo.id;
    },
    updateMemo: (state, action) => {
      console.log("action.payload", action.payload);
      state.dataList.find((memo) => memo.id === action.payload.memoId).text =
        action.payload.text;
    },
    deleteMemo: (state, action) => {
      state.dataList = state.dataList.filter(
        (memo) => memo.id !== action.payload
      );
    },
    focusMemo: (state, action) => {
      state.selectedId = action.payload.id;
      console.log("", action.payload);
    },
  },
});

export const { createMemo, updateMemo, deleteMemo, focusMemo } =
  memoSlice.actions;

export default memoSlice.reducer;

함수처럼 쓰자 그리고 비즈니스 로직들은 reducer에게 위임해주는 것이 가독성이 더 나은듯 하고 더 옳다고 느껴진다.

3. $isSelected

 return (
    <Li $isSelected={selectedMemoId === memo.id} onClick={clickMemo}>
      <span>{title}</span>
      <span>{formatDateTime(date, "short")}</span>
    </Li>
  );

스타일드 컴포넌트에서 props를 내려줄 때 튜터님은 앞에 $표시를 붙히길레 왠가해서 찾아봤더니 하나의 컨벤션, 즉 약속이라더라.

코드의 중복, 가독성 등등을 위함이니 생각하지말고 일단 붙히자.

4. Immer.js

정말정말 유명한 라이브러리임

이는 내일 공부해서 정리하도록 하게씀.

2. 리팩토링

기존에 작성한 코드에 대해서 튜터님 코드를 보며 파일을 나누고 리팩토링 해봤음.

1. 컴포넌트는 어떻게 나누는가?

내 생각보다 더 잘게 잘게 쪼개야되더라 나는 쪼갠다고 쪼갰는데 너무 크게 쪼개고 있었음.

Date.now()

날짜를 구할 때 난 new Date()를 하나 만들어서 쪼개가지고 만들어줬는데 이는 날짜 순으로 비교함에 있어서 좀 더 번거러운 느낌이 있음.

하지만 Date.now()를 사용함으로써 sort() 할때 더 편하고 format 함수에서 해당 값을 new Date(Date.now())와 같은 형태로 수정해주면 되기에 훨 낫다.

내일은 개인 과제 리팩토링, immer.js, 그리도 바쁜게 좀 지나갔으니 바로 프로그래머스 문제 풀이 다시 시작 해야겠다..