미라클 메모리

목차

특정 데이터만 List에서 선별하기 - find

const { id } = useParams();
const diaryList = useContext(DiaryStateContext);

  useEffect(() => {
    if (diaryList.length >= 1) {
      const targetDiary = diaryList.find(
        (list) => parseInt(list.id) === parseInt(id)
      );
    }
  }, [id, diaryList]);

useParams를 통해서 현재 URL에 있는 id값을 가져온다.

<Route path="/edit/:id" element={<Edit />} />

1. 가져온 값을 비구조문법 할당을 통해 id에 등록하고 useContext에 보관되어있는 DiaryStateContext를 통해서 redux에 저장되어있는 state를 불러온다.
2. if문을 통해서 수정 가능한 값이 있을 때만 data를 불러오도록한다
3. targetDiary 변수를 통해서 불러온 리스트에 속한 id값, url에 있는 id값이 일치하는 값이 truthy값이 되어 targetDiary변수에 담기게 된다.

Array.prototype.find() - JavaScript | MDN

이중 조건문

if (diaryList.length >= 1) {
      const targetDiary = diaryList.find(
        (list) => parseInt(list.id) === parseInt(id)
      );
      if (targetDiary) {
        setOriginData(targetDiary);
      } else {
        navigate("/", { replace: true });
      }
    }
  }, [id, diaryList]);

이중 조건문으로 targetDiary값을 조회한다.

만약 targetDiary 참이라면? OriginData에 선별해온 상태값을 저장한다

만약 targetDiary 거짓이라면? 거짓이라면 navigate훅을 사용하여 홈으로 되돌린다. 이때 replace:true 속성을 더해주어 뒤로 돌아가지 못하게 막는다.

const [originData, setOriginData] = useState();

EditorContainer에 데이터 전달하기