우당탕 취업준비생

밑바닥부터 시작하는 코딩생활

Study/React

Cannot read properties of undefined (reading 'search') 코드가 계속 안먹혔다.. 정말 뭐가 문젠지 알 수 없어서 고민을 많이 했다. const { username } = match.params; const { tag, page } = ps.parse(location.search, // 생략 와 같은 코드였는데 v6 를 사용하면서 match는 사용하지 않는다는건 인식 loaction.search는 왜 안먹히는거지? 했더니 location도 업데이트 되면서 더는 사용하지 않는..함수라고.. import { useParams, useLocation } from "react-router-dom"; const { username } = params; const { tag..

2022. 1. 8.

Study/React

{tags.map((tag) => ( #{tag} ))} Each child in a list should have a unique "key" prop. 각 자식 컴포넌트마다 독립적인 key값을 넣어달라는 소리인데 key 값을 넣으면 불필요한 리렌더링을 방지해준다. {tags.map((tag, index) => ( #{tag} ))} 임시방편으로 index값을 key값으로 넣어서 해결했다. 참고 Lists and Keys – React A JavaScript library for building user interfaces reactjs.org

2022. 1. 8.

Study/React

버전6으로 바꿔서 하는게 이렇게 힘들일이였나.....? 하지만 포기하지말자 Cannot read properties of undefined (reading 'params') 버전6에서는 route props의 history, location 외에도 math가 더 이상 존재하지 않아서 react hook을 사용해야 한다. const { postId } = match.params; 아래와 같이 변경해주면 해결된다. import { useParams, useNavigate } from 'react-router-dom'; const { postId } = useParams();

2022. 1. 8.

Study/React

Actions must be plain objects. Use custom middleware for async actions. dispatch에 오류가 발생했다. 이 오류는 dispatch에 정의된 로직이 객체인데 함수처럼 호출되었거나 호출이 제대로 되지 않았을 경우 발생한다. 경로를 잘못 설정해서 호출이 제대로 되지 않았는지 확인해보자. 또는 console.log를 이용해서 어디서 막히고 있는지 확인하며 해결하자. 객체인데 함수처럼 호출되었을 경우 setCount를 이용해서 해결하면 된다. dispatch(setCount( ));

2022. 1. 8.