Chunho’s DevLife

useMutation hook 사용 중 사용자가 API서버에 생성 요청을 보낼 때, 생성이 완료 되어 리패칭이 일어나기 전까지의 시간동안 불편함을 겪을 수 있어 생성중이라는 문구를 띄워주기 위해 useMutation 이 반환하는 isLoading을 받아 사용하였다. useQuery를 사용한 useFetchHero가 반환하는 isLoading과 이름이 겹쳐 creatingHero라는 이름을 주어 사용하는데 정상적으로 작동하지 않는 문제가 발생했다. 요청을 보내는 코드를 비동기적으로 처리하지 않아 발생한 문제였다. 위와 같이 비동기적 작업을 처리하는 함수는 꼭 async와 await 등을 사용하여 비동기적으로 처리해주자!

styled-components를 사용하면 컴포넌트별로 스타일을 적용할 수 있다. css 내에서 변수를 사용하여 css를 동적으로 처리할 수 있으며, 해당 컴포넌트에 적용된 css를 쉽게 확인할 수 있어 가독성이 높아진다는 장점이 있다. 먼저 yarn add styled-components 명령어를 사용해 라이브러리를 설치해주었다. import를 해준 뒤 위와 같은 방식으로 스타일을 지정해 줄 수 있다. 스타일을 적용할 땐 적용 할 컴포넌트를 위와 같이 감싸주면 된다. 당연히 인자 또한 넘겨줄 수 있다. state와 삼항 연산자를 사용하면, 아래와 같이 js를 사용해 간단하게 css를 동적으로 처리할 수 있다. 다크모드 전환 & 해제

서버에서 데이터를 받아와 각 컴포넌트별로 delete 버튼을 추가해 뿌려준 뒤 delete를 클릭할 시 handleDelete 함수를 실행시켜 서버에 delete 요청을 보내는 코드를 작성하였다. 이를 처리하기 위해 handleDelete 함수를 컴포넌트에 넘겨주었고, Item 컴포넌트 안에서 클릭시 해당 컴포넌트의 id를 넘겨주는 handleDelete 함수가 실행되도록 하였다. 하지만 문제가 발생하였고 기존 데이터를 받아오는 코드조차 제대로 동작하지 않았다. 위와 같이 또다른 함수로 감싸 다시 실행시켜보았다. 정상적으로 작동하는 것을 확인할 수 있었다.

useQuery를 사용할 땐 아래와 같이 select: (data) => data.data select 옵션을 사용하여 받아온 데이터를 최대한 구조분해 해서 사용하는 것이 좋다. 데이터를 바로 사용할 경우 아래와 같이 가독성이 떨어질 뿐 아니라 같이 협업하는 동료가 불편함(?)을 겪을 수 있다. 또한 useMutation을 사용할 때도 위와 같이 useMutation이 반환한 객체를 최대한 구조분해한다. 이와 동시에 적절한 이름을 사용해준다. 이를 통해 useMutation이 반환한 mutation의 mutate 함수를 사용할 때 mutation.mutate가 아닌 createHero 를 사용하여 코드를 줄일 수 있을 뿐 아니라 직관적인 이름을 통해 가독성을 향상시킬 수 있다.

리액트는 브라우저에서 모든 컴포넌트가 준비됐을 때 DOM에 컴포넌트를 뿌려준다. 따라서 위와 같이 데이터를 서버에서 받아와 뿌려주는 코드가 있는 경우 해당 컴포넌트의 준비 시간 때문에 다른 컴포넌트까지 그려지지 못하는 경우가 발생할 수 있다. 이런 경우, 삼항 연산자를 사용하여 서버에서 데이터를 받아오는 시간은 loading 메시지를 표시하여 해당 컴포넌트 때문에 준비 된 컴포넌트가 (굳이..?) 대기를 하는 경우는 막아주는 것이 좋은 것 같다. 또한 위와 같은 코드는 피해야 하며, 중복되는 부분은 ITEM 컴포넌트를 따로 만든 후 probs로 id, name, skill 등을 넘겨주는 방향이 가독성과 성능 면에서 더 좋다.

React-Query를 사용하여 useMutation Hook을 만들고 API서버에 POST요청을 하여 데이터를 추가하였다. 이때 해당 키를 가지고 있는 쿼리를 무효화시키고 리패치를 하여 view에 바로 변경사항이 반영되도록 하기 위해 useMutation의 onSuccess 함수 안에 queryClient.invalidateQueries()를 사용하여 쿼리 무효화를 했다. 분명 devTool 에는 fresh, stale의 과정을 거치면서 쿼리가 무효화되고 리패칭이 되는 것을 확인했는데, view에는 변경사항이 바로 반영되지 않았으며, POST요청을 두 번 보냈을 때 변경사항이 반영되었다. 아마 시간차?의 문제라고 생각하고 위와 같이 POST요청 후 성공적으로 서버에 전송한 데이터를 Create 한 1초..

React-Query는 기존에 프로그래머가 직접 작성해야 했던 비동기 http 통신 로직을 쉽게 다룰 수 있게 해주는 라이브러리이다. 데이터를 항상 최신 상태로 유지해주며, loading, error, success 등 일렬의 컨트롤을 쉽게 할 수 있다. yarn add react-query 명령어를 사용하여 라이브러리를 설치해준 후 package.json 파일에서 정상적으로 설치가 된 것을 확인해준다. 이후 Context로 하위 컴포넌트를 감싼 후 queryClient를 내려보내 준다. queryClient는 비동기 요청을 알아서 처리하게 해주는 Background가 된다. 쿼리는 4가지의 상태를 가진다. 1. fresh: 새롭게 추가된 쿼리 인스턴스이며, active 상태의 시작이다. staleTim..

위와 같이 react-query를 사용하여 데이터를 받아와 출력한 결과 Home.jsx:16 Uncaught TypeError: Cannot read properties of undefined (reading 'data') 이와 같은 에러가 발생하였다. 데이터를 받아오는 과정은 비동기적으로 수행되고, 콘솔에 data를 출력하는 라인이 바로 실행되는데, data에 값이 없기 때문이다. 위와 같이 useEffect를 사용하여 컴포넌트가 마운트된 후 2초 뒤에 실행시키도록 하여도 똑같은 에러가 발생한다. Get요청을 보내는 쿼리도 컴포넌트가 마운트되며 생성되고 이와 동시에 useEffect안의 함수도 실행되는데, 아마 실행과 동시에 setTimeout 함수와는 관계없이 data의 state를 check 하는 ..

API서버가 배포되지 않은 상황에서 http 통신을 하는 코드를 작성해야 할 때, 또는 빠른 시간 안에 Restful한 API를 구축하고 테스트하고 싶을 때 json-server를 사용할 수 있다. 먼저 npm install json-server -g 명령어를 사용하여 글로벌 설치를 해준다. 이후 dummyDB.json 파일을 생성해준 후 아래와 같이 데이터를 넣어준다. 이후 json-server --watch dummyDB.json --port 4000 명령어를 사용하여 json-server를 실행시켜주면 된다. POSTMAN을 열고 http://localhost:4000/hero 에 GET 요청을 보내보자. 데이터를 정상적으로 받아오는것을 확인할 수 있다. POST요청으로 데이터를 변경하는 것 또한 ..

axios를 사용하여 API서버에 POST요청을 보내고 응답을 받아와 데이터를 뿌려주려고 하던 중, response를 콘솔에 찍어봤을 때 [object Object]로 나타나는 문제가 발생하였다. JSON.stringify 메소드를 사용해봤지만, 객체가 아닌 전체가 다 '문자열' 로 바뀌어버려서 사용할 수 없었다. 콘솔엔 [object Object]로 나타났지만 데이터가 뿌려지긴 했다. 빠른 시일내에 위 문제를 해결해봐야겠다..