Today

1. localStorage, sessionStorage

2. 프로젝트 일부 완성

- 상세화면 이동 구현
- 상세화면 CRUD 적용

- Context 적용
1. ContextProvider 생성
👉 여기서 value를 관리 할 수있도록 {children} 사용

// ContextProvider.jsx
import { createContext, useState } from "react";
import fakeData from "../assets/fakeData";

export const Context = createContext(null);

export default function ContextProvider({ children }) {
  const [expenses, setExpenses] = useState(fakeData);

  return (
    <Context.Provider value={{ expenses, setExpenses }}>
      {children}
    </Context.Provider>
  );
}

2. 상태가 적용되는 상위 컴포넌트를 감싸기

// App.jsx
import React from "react";
import Router from "./shared/Router";
import ContextProvider from "./contexts/ContextProvider";

function App() {
  return (
    <>
      <ContextProvider>
        <Router />
      </ContextProvider>
    </>
  );
}

export default App;

3. 상태를 사용하는 하위 컴포넌트를 찾아가 적용

// DetailList.jsx
import styled from "styled-components";
import DetailItem from "./DetailItem";
import NoItem from "./NoItem";
import { useContext } from "react";
import { Context } from "../contexts/ContextProvider";

const Ul = styled.ul`
  background-color: rgba(25, 100, 200, 0.4);
  border-radius: 5px;

  display: flex;
  flex-direction: column;
`;

const DetailList = ({ activeIndex }) => {
  // Context에서 expenses를 사용 하기 위해 구조분해할당
  const { expenses } = useContext(Context);

  const filteredExpenses = expenses
    // 해당 월에 해당하는 것만 걸러주는 필터
    .filter(
      (expense) => Number(expense.date[5] + expense.date[6]) === activeIndex + 1
    )
    .map((expense) => <DetailItem key={expense.id} expense={expense} />);

  return (
    <section>
      <Ul>{filteredExpenses.length === 0 ? <NoItem /> : filteredExpenses}</Ul>
    </section>
  );
};

export default DetailList;

바뀐 것은 별로 없지만 시간은 많이 들어갔다..

이제 redux만 적용하면 끝!

---

Learn

1. TroubleShooting

월별로 내역이 없다면 컴포넌트 표시를 하는데서 문제가 생겼다.

컴포넌트에 조건식을 걸어 컴포넌트를 보여주려고 하는데 표시가 되지 않는다..

<ul>
filteredExpenses == [] ? <NoItem /> : filteredExpenses
</ul>

딱히 오류메시지도 나오지 않고... 문제가 뭐지

원인

내 의도 : 빈 배열인지를 묻는 것.
코드의 방향 : []와 같은 것을 참조하는지 물음.

즉, 서로 다른 배열을 바라보고 있는데 같냐고 물어본 것이다.

해결

배열의 속성인 length를 이용 해결

2. useState에 초기값은 함수 형태로도 넣을 수 있다.

함수로 넣었을 때 장점
처음 마운팅 되었을 때만 렌더링

예시
초기값에 로컬스토리지를 이용 값을 넣게되면
로컬스토리지가 바뀔 때 마다 렌더링되어 버림

// 값 자체로 넣은 경우
const initialTexts = localStorage.getItem("texts");

const [texts, setTexts] = useState(initialTexts ? JSON.parse(initialTexts) : []);

useEffect(() => {localStorage.setItem("texts", JSON.stringify(texts))}, [texts]);

// 함수를 이용해서 넣은 경우
const initialTexts = () => {return initialTexts ? JSON.parse(localStorage.getItem("texts")) : []}

const [texts, setTexts] = useState(initialTexts);

useEffect(() => {localStorage.setItem("texts", JSON.stringify(texts))}, [texts]);

3. find

const array = [2, 4, 6, 8, 10];

const found = array.find((el) => el > 5);

console.log(found); // Expected output: 6, 8, 12

---

주절주절

피곤해도 할 건 해야지 : TIL, 운동