4전 4전

리액트에서 훅은 함수형 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있게 해주는 강력한 도구입니다.그중에서도 useState와 useRef는 상태 관리를 위해 자주 사용됩니다. 하지만 코드를 보다 보면 어떤 상황에서는 useState로,또 어떤 경우에는 useRef로 상태를 관리하는 모습을 종종 보게 됩니다. 특히 DOM 조작을 위해 useRef를 사용하는 경우는 자주 보며 이해하기 쉽지만,이 외에 이유로 상태 관리를 위해 useRef를 사용하는 사례는 헷갈릴 때가 있습니다. 이번 글에서 이 두 가지 훅을 통한 상태 관리의 차이점을 공부해 보고,상황에 따라 어떤 것을 사용하는 것이 적절한지 정리해 보겠습니다.| React의 상태 관리와 UI 업데이트 방식리액트는 상태(state)나 props의 변경에 ..

무한 스크롤은 사용자가 페이지를 스크롤할 때 콘텐츠를 동적으로 로드하는 기법입니다.무한 스크롤을 구현하는 방식은 몇 가지가 있는데 그중 몇 가지 방법을 사용해 보고,어떤 방식이 가장 좋은지 확인해 보려 합니다.| json-sever해당 글에서 기본적으로 예시 코드를 구현할 때 json-server라이브러리를 사용하여 구현하였습니다.https://www.npmjs.com/package/json-server json-server[](https://github.com/typicode/json-server/actions/workflows/node..

리액트로 코드를 작성하면서 모달창을 만드는 경우가 많습니다. 언듯 보면 간단해 보이지만, 실제로는 예상하지 못한 복잡성을 내포하고 있습니다. 최근 저는 모달창을 구현하면서 z-index 관련 문제가 발생하였고, 이를 해결하기 위해 createPortal을 이용한 내용을 작성해보고자 합니다. | 문제 상황 문제 상황을 보기 위해 리액트 프로젝트를 만들고 간단한 모달창 하나를 만들어 보겠습니다. 먼저 props로 상태를 받아서 화면에 보여주고 닫을 수 있는 Modal 컴포넌트 하나를 만들어 주겠습니다. // Modal import styles from "./index.module.css"; type Props = { open: boolean; onClose: VoidFunction; }; const Moda..

최근에 프론트엔드 사용자 경험 개선에 관해 공부를 하다가 낙관적 업데이트라는 개념을 알게 되었습니다. 이왕 공부해 본 김에 프로젝트에 한번 적용해 보면 좋을 거 같아서 TanStack Query를 사용하여 적용해보고자 합니다.| Optimistic Update(낙관적 업데이트)낙관적 업데이트는 프론트엔드 개발에서 사용되는 데이터 동기화 전략입니다.사용자가 데이터를 수정하거나 추가할 때 서버로부터 오는 응답을 기다리지 않고,UI를 즉시 업데이트 하는 방식입니다. 낙관적 업데이는 사용자가 서버의 응답을 기다리지 않고 지연 없이 즉시 피드백받게 되므로,사용자 경험 개선에 큰 도움이 될 수 있습니다. 다만 오류가 발생했을 때 이를 적절히 처리하고 원상 복구 시키는 로직을 잘 작성해야 하고,금전적인 정보, 사용자..

최근에 리액트로 프로젝트를 하면서 한 번에 여러 컴포넌트들을 불러오게 되면서 웹 성능이 떨어지는 일이 있었습니다.이에 React.lazy를 통한 코드 스플리팅으로 성능을 개선해보고자 했습니다.| 코드 스플리팅리액트에서 개발을 하고 배포할 때 빌드를 하게 되는데 이때 보통 단일 Javascript 파일로 번들링 하게 됩니다.이 방식은 애플리케이션의 크기가 커지면 초기 로딩 시간이 길어지는 문제를 야기할 수 있어서 코드 스플리팅을 통해 전체 번들을 더 작은 크기로 나누고, 이를 비동기적으로 로드할 수 있게 함으로써 로딩 시간을 개선하게 해주는 것을 코드 스플리팅이라 합니다.| React lazy리액트의 lazy와 Suspense로 필요할 때에 컴포넌트를 로드할 수 있도록 하려면 아래와 같이 코드를 작성하면 ..

이번에 패스트캠퍼스X야놀자 프론트엔드 개발 부트캠프에서 숙박 예약 서비스 만들기라는 주제로 백엔드 부트캠프 수강생들과 함께 프로젝트를 진행하였습니다. | 기능 사용자 위치 기준 숙소 추천, 인기 숙소 안내 회원가입, 로그인 숙소 타입, 장소, 추가옵션등 원하는 카테고리를 선택하여 숙소 조회 장바구니, 주문, 결제 결제 내역 확인, 숙소 찜하기 | 역할 이 프로젝트에서 저는 사이트의 장바구니 기능과 결제 완료 후 나오는 결제 완료 페이지를 담당하여 진행하였습니다. | 링크 깃허브: https://github.com/Yanolza-Miniproject/frontend 배포: https://heynolja-mini-4.vercel.app/ | 장바구니 시연 영상 | 이슈 1. 목 데이터 문제 문제: msw를 ..

리액트에서 컴포넌트는 화면에 보이기 전에 반드시 렌더링이 된다고 합니다. 그리고 이 렌더링 과정을 공식문서에는 아래와 같은 세 가지 단계로 설명을 하고 있습니다. 1. 렌더링 트리거 (Triggering a render) 2. 컴포넌트 렌더링 (Rendering the component) 3. DOM에 커밋 (Commiting to the Dom) 먼저 각 단계가 어떤 것을 의미하는지 알아보겠습니다. | 렌더링 트리거 (Trigger a render) 컴포넌트가 렌더링 되는 이유는 2가지가 있다고 하는데 아래와 같습니다. 1. 컴포넌트의 초기에 렌더링 2. 해당 컴포넌트나 상위 컴포넌트의 상태(state)가 업데이트되었을 때 1. 초기 렌더링 앱이 시작되면 초기 렌더링을 트리거하는 것이 필요합니다. 그리..

리액트로 프로젝트를 할 때 create-react-app으로 시작하면 npx create-react-app ./ 아래처럼 여러 가지 파일과 폴더가 생깁니다. 당장에 프로젝트할 때 필요 없는 파일들이 있을 수 있으니까 각 파일들이 어떤 건지 알아보고 정리해 보려 합니다. | public 폴더 1. index.html 정리 먼저 아래처럼 주황색박스로 표시해 놓은 곳을 정리를 합니다. 그럼 이런 식으로 정리가 됩니다. 2. logo192.png, logo512.png, favicon.ico, manifest.json 제거 logo192.png, logo512.png - 리액트 기본 로고 이미지 이므로 제거 favicon.ico - 리액트 기본 아이콘 브라우저 위에 표시됨 본인 프로젝트 아이콘으로 대체 mani..