프로젝트 폴더명에 대문자가 있어서 뜨는 에러이다1. 프로젝트 폴더 이름을 소문자로 변경하고2. npx create-react-app .입력하여 현재 디렉토리에 리액트 생성하면 된다.
Error
페이지 네이션은 여러 컴포넌트에서 쓰일 수 있기 때문에 훅을 이용하는게 컴포넌트 재사용이라는 측면에서 유용하다. 그래서 구현중인데.. 쉽지않다..1. 첫 시도맨 처음 getAllProductsAsync()로 usePagination.js에 { page, pageSize: PAGESIZE, orderBy }를 넘겨주고, 다음 버튼과 이전 버튼 내에 함수가 실행되도록 로직을 짰다.// FleaMarketPage.jsfunction FleaMarketPage() { const [products, setProducts] = useState([]); const [orderBy, setOrderBy] = useState("recent"); const [allProductsError, getAllProducts..
React 는 렌더링이 화면에 커밋 된 후에야 모든 효과를 실행한다.즉 React는 return에서 user.map(...)을 반복실행할 때 첫 턴에 데이터가 아직 안들어와도 렌더링이 실행되며 당연히 그 데이터는 undefined로 정의되어 오류가 난다. 원래 1. 렌더링하고 2. useEffect 가 실행되고 데이터를 가져오고 3. 가져온 데이터를 이용해서 다시 렌더링한다.따라서 현재 1번에서 현재 에러가 난 상태이다. 해결방법1. &&을 이용한다.true && expression은 항상 expression으로 실행되고 false && expression은 항상 false로 실행된다. 따라서 조건이 참이면 && 바로 뒤의 요소가 출력에 나타난다. 거짓이면 React는 무시하고 건너뛴다. {p..
styled-components로 생성한 요소에 prop으로 전달한 isActive 에서 아래와 같은 에러가 발생했다.읽어보면 React가 DOM 요소에서 isAcitve prop을 인식하지 못했으며, 의도적으로 custom attribute 을 나타낸 것이라면 소문자로 표시하라는 의미이다. 하지만 나는 prop을 카멜케이스로 작성하고 싶었고 해결 방안을 styled-components 공식문서에서 찾았다. transient props를 이용하면 이를 해결할 수 있다. transient props는 단순히 스타일로 지정된 prop이 기본 React 노드로 전달되어 DOM 요소로 렌더링 되는 것을 방지하게 해준다. 간단하게 $ 기호를 prop 앞에 추가하기만 하면 된다. const StyledNavLink..
