분류 전체보기111 client.defaultQueryOptions is not a function 에러 해결하기 분명 코드엔 문제가 없는데 계속 이런 에러가 떴다... 예전에 3버전이 썼던 것 같은데 package.json 들어가보니 지금은 5버전이다. 공식 문서에 들어가 보니 아래처럼 코드를 쓰라고 되어있다. 참고자료 https://tanstack.com/query/v5/docs/react/guides/queries Queries | TanStack Query Docs Query Basics A query is a declarative dependency on an asynchronous source of data that is tied to a unique key. A query can be used with any Promise based method (including GET and POST methods).. 2023. 10. 24. React Icons 사용해서 간편하게 아이콘 추가하기 참고자료 및 문서 https://react-icons.github.io/react-icons React Icons React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using. Installation (for standard modern project) npm install react-icons --save Usa react-icons.github.io 터미널에서 리액트 아이콘 추가하기 //npm 사용 npm install react-icons --s.. 2023. 10. 18. 고유한 아이디나 키 생성하는 방법 ( 타임스탬프 활용, uuid ) 데이터 관리나 사용자 관리 및 식별을 위해서 고유한 아이디나 키가 필요할 떄가 있다. 그럴 때 사용할 수 있는 고유한 아이디나 키를 생성하는 방법에 대해 알아보자. 1. 타임스탬프 활용하기 현재의 시간은 지나면 돌아오지 않기 때문에 현재의 타임스탬프와 무작위 문자열을 결합해서 생성가능하다. { id: Date.now().toString(36) + Math.random(), text: '우편물 확인', state: 'active' } 2. UUID 라이브러리 사용하기 UUID( Universally Unique Identifier)는 범용 고유 식별자로 고유한 식별자를 생성하는 데 사용되는 128비트 숫자로 데이터베이스 레코드,파일,객체 등 고유하게 식별하기 위해 사용한다. //npm 사용 npm inst.. 2023. 10. 17. useQuery 쓸 때, Query data cannot be undefined 에러 useQuery를 쓰는 데 아래와 같은 에러가 나타났다. 이런 에러는 데이터 쿼리나 데이터 처리 작업을 수행하는 코드에서 데이터가 예상대로 정의되지 않았을 때 자주 발생된다고 한다. 쿼리함수에서 undefined가 아닌 유효한 값을 반환하도록 리턴해주라고 한다. 원인은 이 코드에서 중괄호를 썼기 때문이다. useQuery(['carts'], () => getCart(uid) ); 위와 같이 중괄호를 사용하지 않아야 화살표 함수는 getCart(uid)의 결과를 반환한다. 중괄호 내부에 코드를 쓰게 되면 함수가 실행은 되지만 반환할 값이 따로 명시되어 있지 않을 시에 어떤 값도 반환하지 않으므로 undefined를 반환하게 된다. 2023. 10. 16. [ React ] map() 사용 시 key는 반드시 넣어줘야 하는 권장사항. map()을 활용해서 리스트를 만들다 보면 이런 에러가 나타난다. 리스트의 각 아이템에는 고유한 key prop이 필요하다는 에러. Key는 왜 필요한걸까? Key가 필수도 아니고 안 써도 작동하지만 필수처럼 쓰이는 권장사항이다. Key는 React가 동적 리스트나 반복 요소를 렌더링 할 때 어떤 항목을 변경하거나 추가, 삭제하는 것에 대한 식별을 돕는다. 식별자를 제공하면 리액트가 요소 간의 변경을 더 효율적으로 추적할 수 있고 업데이트도 더 빠르게 처리할 수 있다. 아이템의 재사용 관리도 더 쉬워지며 예상치 못한 버그나 렌더링 이슈도 방지할 수 있다. 엘리먼트의 안정적인 고유성을 부여하기 위해서는 배열 내부의 엘리먼트에 Key를 지정해야 한다. 데이터의 ID를 key로 지정하는 것이 고유하게 식별할 .. 2023. 9. 16. [ React ] 함수형 컴포넌트의 렌더링은 'null'을 반환하여 막는다. 함수형 컴포넌트에서 렌더링을 막고 싶다면 'null'을 반환하면 된다. 'null'이 렌더링되지 않는 이유는 JSX로 작성한 코드는 React.createElement()함수 호출로 변환하여 처리하는데 'null'로 반환하면 해당 컴포넌트는 내부적으로 아무런 React요소를 생성하지 않게 된다. 그래서 React.createElement()함수 호출이 이루어지지 않으니 렌더링 대상도 되지 않는다. function ExComponent({ shouldRender }){ if (!shouldRender) { return null; } return 렌더링됨; } shouldRender가 false일때 return null이 실행되면 렌더링됨;부분이 생성되지 않는다. 클래스 컴포넌트에서 render()메서드가 .. 2023. 8. 28. 이전 1 2 3 4 5 ··· 19 다음
