[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로 마운트가 된 다음에 그 값을 가져오게 하니 잘 작동했다. 데이터의 흐름을 잘 따라가면서 코드를 짜야하는데 어렵다. 그래도 대체적으로 지난 주 프로젝트를 떠올리며 미리 흐름을 생각하고 코드를 짰더니 비교적 헤매지 않고 구현해낼 수 있었다! 😎✨
Author And Source
이 문제에 관하여([TIL] 단어장 완성, history.push로 데이터 넘기기, useEffect의 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jiaegong/TIL-단어장-완성-history.push로-데이터-넘기기-useEffect의-사용저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)