[TIL] 단어장 완성, history.push로 데이터 넘기기, useEffect의 사용

오늘 드디어 단어장을 완성했다! 귀여워😊

css에는 자신이 없었는데, 주변의 도움을 많이 받아서 반응형을 겨우 구현했다. 미디어 쿼리로 잘 안 돼서 grid를 사용했다.

body {
  background: linear-gradient(90deg, #fff 20px, transparent 1%) center,
    linear-gradient(#fff 20px, transparent 1%) center, #ff6f61;
  background-size: 22px 22px;
}

원래는 배경이 그냥 흰색이어서 도트 그리드를 넣으려고 했는데, 배경 이미지로 하려고 했다가 css로 하는 방법이 있어서 적용해봤다!

<HiPencilAlt
                  className="edit"
                  size={20}
                  onClick={() => {
                    history.push({
                      pathname: "/edit/" + lists[index].id,
                      state: { list: lists[index] },
                    });
                  }}
                />

메인 화면에서 단어 수정하는 페이지에 들어갈 때, history.push로 path 지정해주면서 state로 데이터를 같이 넘겨줄 수가 있었다. 이 데이터를 바로 받아서 하니까 useParams를 사용해서 불러오는 것보다 더 간편하게 할 수 있었다. 데이터 받을 때는 아래 코드처럼 useLocation을 import 해줘야 한다.

import { useLocation } from "react-router";

const Edit = (props) => {
  const history = useHistory();
  const ref = React.useRef([]);
  const dispatch = useDispatch();
  const location = useLocation();
  const lists = location.state.list;

  React.useEffect(() => {
    ref.current[0].value = lists.word;
    ref.current[1].value = lists.pron;
    ref.current[2].value = lists.meaning;
    ref.current[3].value = lists.eg;
  }, []);

단어 수정하기 페이지는 데이터를 받아와서 처음부터 input창에 입력값이 나타나게 하려고 했는데, 페이지 켠 상태에서 코드를 쓰고 저장하니까 뜨길래 '됐다!' 했는데 다른 단어 클릭하니 타입오류가 뜨는 것이었다. 알고보니 ref값이 처음에는 빈 배열로 되어있었는데, useEffect를 안 쓰고 그냥 했더니 값이 없어서 오류가 난 것이다. useEffect로 마운트가 된 다음에 그 값을 가져오게 하니 잘 작동했다. 데이터의 흐름을 잘 따라가면서 코드를 짜야하는데 어렵다. 그래도 대체적으로 지난 주 프로젝트를 떠올리며 미리 흐름을 생각하고 코드를 짰더니 비교적 헤매지 않고 구현해낼 수 있었다! 😎✨