맨동이

Component 외부 vs 내부 변수 선언 React를 사용하다 문득 Component 외부에서 변수 나 함수를 선언하는 것과 내부에서 선언하는 것의 차이가 궁금해져서 구글링을 하게되었다. 결론적으로 크게 차이는 없고 컴포넌트 내부코드의 가독성을 개선하고 싶거나, 특정 함수의 재사용성을 높이고 싶으면 외부로 빼는게 낫다고 한다. https://stackoverflow.com/questions/62848106/functional-component-write-functions-inside-or-outside-the-component Functional Component: Write functions inside or outside the component? I often wrote functional co..

Cannot read properties of undefined 더보기 Uncaught TypeError: Cannot read properties of undefined (reading 'length') Cannot read properties of undefined 에러는 화면이 렌더가 되지 않을때 콘솔창을 키면 자주 볼 수 있는 오류 메시지다. 에러내용은 친절하게 설명해준대로 undefined 의 프로퍼티를 읽을 수 없다는 것이다. (무엇을 읽을 수 없는지 어디서 에러가 발생했는지도 친절하게 알려준다.) 오탈자 문제가 아니라면 사용하는 state가 실제로 undefined란 얘긴데, useState는 비동기로 작동하기 때문에 페이지가 그려지기 전까지 undefined를 가지고 있다가 페이지가 그려진..

병렬 쿼리 정적으로 병렬 쿼리 선언하기 useQuery , useInfiniteQuery 를 나란히 선언하면 자동으로 병렬 쿼리가 실행됩니다. function App () { // 병렬 실행 const usersQuery = useQuery('users', fetchUsers) const teamsQuery = useQuery('teams', fetchTeams) const projectsQuery = useQuery('projects', fetchProjects) ... } 더보기 React의 Suspense모드에서 리액트 쿼리를 사용할 때 첫번째 쿼리가 프로미스를 던지고 다른 쿼리가 실행되기 전에 컴포넌트를 일시 중단하기 때문에 병렬 쿼리가 실행되지 않습니다. 이 때, useQueries 를 사용하거..

기본사항 쿼리는 기본적으로 유니크한 키로 구분되며 프로미스(Promise) 기반 메서드 (GET, POST 등)로 서버에서 데이터를 가져올 수 있다. 컴포넌트나 커스텀 훅에서 쿼리를 구독하려면 다음과 같이 useQuery 를 호출한다. import { useQuery } from 'react-query' function App() { const info = useQuery('todos', fetchTodoList) } 여기서 유니크한 키 는 Application 전체에서 쿼리를 다시 가져오고, 캐싱하고, 공유하기 위해 내부적으로 사용된다. const result = useQuery('todos', fetchTodoList); 쿼리의 상태는 4가지로 분류할 수 있다. isLoading , status ==..

React가 불변성을 지키는 이유 React가 불변성을 지키는 이유는 부모컴포넌트가 re-rendering 되거나 state,props가 변화될 때 렌더링이 일어나게 된다. 근데 렌더링을 할지 말지 판단하기 위해 state가 변화되는지를 판단한다. 그 과정에서 state 객체 내의 모든 value를 다 깊은 비교하면 당연하게도 효율적이지 않다. 그렇기 때문에 이전 객체와 현재 객체를 얕은 비교로 판단하기 때문에 불변성의 유지가 중요하다. state를 직접 변경하게 되면 value 값은 바뀌지만 참조 값은 바뀌지 않으므로 렌더링이 일어나지 않는다. mutable한 상태를 사용하게 되면 리액트 돔이 제대로 된 추적을 할 수 없을 것이고, 예기치 않은 사이드 이펙트를 발생시킬 수 있다. 어떻게 불변성을 지킬까..

Each child in an array should have a unique “key” prop. 배열을 사용하는데 key 값을 까먹고 넣지 않으면 더보기 Each child in an array should have a unique “key” prop. 콘솔창에서 위와 같은 문구를 볼 수 있다. 바로 유니크한 key 값이 필요하다는 것! Key값이 왜 필요한가 ? 첫번째 두번째 첫번째 두번째 세번째 리스트의 엘리먼트를 하나 더 추가하면 두 트리의 변경은 잘 작동하지만, key 값이 없기 때문에 변경되지 않은 엘리먼트 또한 재평가를 하게된다. 이런 문제를 해결하기 위해 key값을 넣어주는것이 좋다. 넣어주어야 한다. key 값을 넣어주게 되면 key값으로 판단하여 변경된 부분만 추가할 수 있게되기 때문..

CRA로 리액트 프로젝트를 생성하고 index.js 를 보면 맨 밑에 reportWebVitals() 라는 함수를 실행하고 있는 부분이 있다. 이부분은 같은 폴더의 reportWebVitals 파일에서 가져온 함수를 실행하고 있는 것인데 주석 처리된 예 처럼 함수에 console.log를 넣어주면 개발창으로 앱의 퍼포먼스시간들을 분석하여 객체 형태로 보여준다. // metric(측정도구) 이름 name: 'CLS' | 'FCP' | 'FID' | 'LCP' | 'TTFB'; // 측정된 현재값 (값이 작을수록 빠른성능을 뜻합니다) value: number; // 현재 측정값(current value)과 최신 측정값(last-reported value) 차이 // 첫번째 리포트에서 위 둘값은 항상 같습니다..

EEXIST: file already exists npm i react-router-dom을 하는데 오류가 떴습니다. react-router-dom 뿐만아니라 npm install 시 이런 오류가 날 수 있는데요! 오류는 이미 사용중이다 존재한다 라고 해서 권한 문제일까 싶어 cmd 창을 관리자 권한으로 실행해서 npm install 을 해도 마찬가지였습니다. 해결책 node_modules 폴더 삭제 npm install npm audit fix 그리고 실행했더니 성공하였습니다!

JSX에서 for 오류 Waring 코드 Warning: Invalid DOM property `for`. Did you mean `htmlFor`? 이유 JSX는 javaScrit이기 때문에 for은 반복의 의미를 가지고 있어서 HTML 상에서는 htmlFor을 써줘야 한다. 해결방법 for대신 htmlFor을 써야한다. // warning

Warning 코드 Warning: React does not recognize the computedMatch prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase computedmatch instead. If you accidentally passed it from a parent component, remove it from the DOM element. react-router-dom을 사용할 때 위와 같은 오류가 뜰 때가 있었다. 기능에 문제는 없지만 오류 코드가 뜨는것이 불편했다. 검색 결과 해결 방법으로는 {isLoggedIn ? ( ):..