Zustand를 사용하는 이유 프로젝트에서 닉네임을 보내주는 api 로직이 하나인데, 닉네임을 다른 컴포넌트에서도 띄워야 했다. 그렇기에 해당 값을 전역적으로 관리할 필요를 느꼈고, 이에 따라 상태관리 라이브러리를 도입하게 됐다. 상태관리 라이브러리를 처음 사용해보는 만큼, 간단하고 빠르게 사용할 수 있다는 Zustand로 결정하게 되었다. https://zustand-demo.pmnd.rs/ Zustand zustand-demo.pmnd.rs 주스탠드 공식문서를 참고했다. 사용법 npm install zustand Zustand를 설치해 준다. import { create } from 'zustand' const useStore = create((set) => ({ count: 1, inc: () =>..

뭔가 내가 저렇게 검색했었던 것 같아서 제목을 이렇게 지었다. 데이터 배열을 map함수로 쪼개서 렌더링 하는 코드이다. onClick을 적용했기에, 분명 클릭했을 때 console.log(“ㅎㅇ”)가 실행될 거라고 생각했지만, 항상 실행이 안 됐다. 그래서 위와 같은 방식으로, div 태그를 한번 더 씌우고 div에 onClick 이벤트를 적용했었는데, 오늘 해결책을 알았다!.! 일반 HTML 요소에 직접적으로 이벤트 핸들러를 추가할 때는 해당 요소에 이벤트 리스너를 직접 연결하고, 클릭 등의 이벤트가 발생하면 이벤트 핸들러가 실행되지만! 리액트 컴포넌트는 클릭과 같은 이벤트를 처리하도록 내장된 기능이 없으며, 대신 props로 전달하여 처리할 수 있도록 한다고 한다. 즉! 지금까지 내가 컴포넌트에 적용..

마우스를 올려놓으면, hover 효과처럼 배경색이 사라지는 오류가 발생했다. 모바일 기준으로도 똑같이 배경색이 사라지고 멈추는 걸 보니 hover가 맞다고 생각했다. 의아한 점은 모바일에서 hover가 적용되지않는다는 것을 깨닫고.. 분명히 hover를 전부 제거했기 때문이다! 해결을 위해 알아보다가 처음 알게 된 것인데, 개발자도구의 :hov를 클릭해서 hover를 적용하면 hover일 때 적용되는 css를 알 수 있다. 적용 후 찾아보니 이런 코드가 들어있는 것을 확인할 수 있었다. 뭔가 익숙한걸 보니 내가 쓴 게 맞는 거 같았다. 그러다 문득 라이브러리를 커스텀했던 게 떠올랐다. 라이브러리에서 기본적으로 제공하는 hover 효과를 안 보이게 하려고 위와 같은 코드를 썼었던 것이다. 아무 생각 없이 ..

오늘 새벽 찡찡찡찡 거리면서 썼던 이번 작업 회고다. 컴포넌트 분리와 스타일링에 대한 고민을 했었다. 어찌 보면 기초의 기초의 기초를 모른다고 봐도 무방한,,, 컴포넌트 분리를 통해, 유지 보수 용이와 재사용성을 늘리는 것이 리액트의 장점이라고 하는데..... 나는 이런 거 1도 생각 안 하고 그냥 들이박으면서 개발을 하니 기본적인 것도 몰랐던 것이다. 그래서 복잡하게 생각 말고 기본으로 돌아가기로 했다. 그냥 유지 보수하기 편한 만큼까지만 완성하고 분리시켜 버리자! 일단 페이지에 구현할 내용을 하드코딩으로 때려 박고 CSS까지 전부 적용한다. 그리고 완성된 코드를 그대로 복사해서 새로운 컴포넌트를 생성한다. Header 포지션에 위치하기에 컴포넌트 이름을 Header로 설정했다. 기존의 코드를 지우고 ..

https://www.udemy.com/course/clean-code-react/udemy의 '클린코드 리액트' 강의를 듣고 정리했습니다.    State 컴포넌트 상태, 전역 상태, 서버 상태와 이를 관리하기 위한 행동들이 있다. 상태란 사물, 현상이 놓여있는 모양이나 형편을 뜻하며, 예시로는 '무방비 상태', '건강상태', '기차가 끊긴 상태' 등등이 있다.  상태는 언제 바꾸는지, 최적화는 언제 해야 할지, 불변성은 왜 필요할지 등을 고민해봐야 한다.     올바른 초기 값 설정초기 값가장 먼저 렌더링 될 때 순간적으로 보일 수 있는 값당연히 초기에 렌더링 되는 값.   초기값을 지키지 않을 경우렌더링 이슈, 무한 루프, 타입 불일치로 의도치 않은 동작으로 런타임 에러가 생길 수 있다.넣지 않으면..

https://www.udemy.com/course/react-query-react/ udemy의 'React Query / TanStack Query : React로 서버 상태 관리하기' 강의를 보고 정리했습니다. Query Key post에 해당하는 댓글을 가져오기 위해, 동일한 로직으로 댓글을 불러왔다. 하지만 다른 게시글임에도 불구하고 동일한 코멘트가 렌더링 된다. 다른 포스트를 불러와도 모두 같은 코멘트가 보이게 된다. 이유는 위에서 사용한 queryKey 때문이다. 모든 쿼리 키에 ‘comments’라는 동일한 쿼리 키가 적용되어 있다. 리액트 쿼리에서는 쿼리 키가 동일한 경우 해당 쿼리의 데이터는 이미 캐시 되어 있으므로 새로운 데이터를 가져오지 않는다. 대신에 트리거가 발생했을 때, 새로운..