로딩표시가 없으면 검색이 다소 느린 느낌이 듭니다. 어쩔 때는 앱이 멈춘것 처럼 보이기도 합니다. 데이터 베이스를 더 빠르게 만드는것도 중요하지만 더 나은 UX를 위해 검색에 대한 즉각적인 UI 피드백을 추가해 봅시다. 여기서는 useNavigation을 사용합니다.

src/routes/root.jsxNav 링크를 사용하면 어던 링크를 사용중인지 확인할 수 있습니다. isActive : url이 해당링크를 가리키는지 확인isPending : 내용이 로딩중인지 확인이제 사용자가 어떤 링크를 보고있는지 확실히 알 수 있게 됩니다. 안

react는 csr방식을 사용합니다. 때문에 페이지에서 보여지는 데이터를 서버에서 주로 json형태로 불러온 다음 화면을 그립니다. 우리가 특정 페이지로 라우팅 될 때, 서버와 통신할 함수를 미리 만들어 놓고, 자동으로 데이터를 가져온다면 얼마나 편할까요?react-r

React Router는 React 기반의 웹 애플리케이션에서 라우팅을 관리하기 위한 라이브러리 입니다. 라우팅은 사용자가 웹 내에서 다른 페이지로 이동하는 것을 말하며 React Router는 이를 쉽게 구현할 수 있도록 도와줍니다. 즉 SPA로 구성된 React 애

리액트에서는 최적화는 컴포넌트의 리랜더링을 줄이는 과정이라고해도 과언이 아니다. useCallback과 useMemo 그리고 React.memo를 사용하여 메모이제이션 기법으로 리랜더링을 줄이게 된다. 리액트의 렌더링은 Render Phase와 Commit Phase

리액트의 메모이 제이션은 함수 컴포넌트 내에서 불필요한 재계산을 방지하고 컴포넌트의 성능을 최적화 하기 위한 기술이다. React.memouseMemouseCallback다음과 같은 함수를 활용하여 메모이제이션을 구현할 수 있다. 먼저 메모이제이션이 왜 필요한지 알아보

공식 문서 :https://recoiljs.org/ko/docs/introduction/getting-started/혼자서 가벼운 프로젝트를 하려고 할 때, Redux tookit과 Recoil중 어떤 상태관리 라이브러리를 사용해야 할지 정말 고민이 되었다.

redux는 상태관리에 주로 사용된다. 사용하다 보면 치명적인 단점이 하나 있는데 바로 페이지를 새로고침 할 경우 state가 날아가버린다는 것이다. 이것에 대한 대응 방안으로 localStorage또는 sessionStorage에 저장하는 방법을 많이 사용하는데 이과

redux는 상태관리에 주로 사용된다. 사용하다 보면 치명적인 단점이 하나 있는데 바로 페이지를 새로고침 할 경우 state가 날아가버린다는 것이다. 이것에 대한 대응 방안으로 localStorage또는 sessionStorage에 저장하는 방법을 많이 사용하는데 이과

이 안에 이미 react-redux가 포함되어 있기 때문에 기존에 redux패키지가 있다면 삭제해도 좋다. 이거 삭제해도 좋음 삭제한 후에 npm install을 다시 해주자 redux를 사용해도 얼마든지 전역으로 변수를 관리할 수 있다. 하지만 대형 프로젝트로 갈 수

next.js를 배우려고 하니 전역 변수를 redux로 관리한다는 이야기를 들었다. react를할 때는 전역변수를 recoil로 관리했기 때문에 redux에 대해서는 전무했다. 이번기회에 redux의 기초를 정리하려 한다.local state : 하나의 컴포넌트에서 이

최종 편집 일시: 2023년 4월 11일 오후 1:38카테고리: FE이미 스타일이 적용된 컴포넌트기존코드는 style을 따로만들어서 적용시키는 방식을 채택했다. 스타일을 관리할 수 있다는 관점에서는 편리하지만 스네이크 케이스를 억지로 카멜케이스 문법으로 바꿔야한다는 단