react5 React-Router 기본 원리 알아보기 useNavigate를 중심으로 React-Router의 내부 코드 살펴보기 React-Router는 SPA(Single Page Application)를 멀티 페이지처럼 느껴지도록 만드는 라우팅 라이브러리입니다. 이번 글에서는 React-Router의 방대한 코드 중 페이지 이동에 사용되는 useNavigate Hook과 관련된 내부 동작을 중심으로 실제 구현을 살펴보겠습니다. 라우터 설정과 RouterProvider React-Router의 기본 사용법은 routes를 정의한 뒤 createBrowserRouter와 RouterProvider를 이용해 라우팅 기능을 프로젝트에 추가하는 것입니다. const routes: RouteObject[].. 2024. 11. 18. FSD (Feature-Sliced Design) 패턴 맛보기 근래에 원티드 프리온보딩 챌린지(2024-11) 강의를 듣다가 FSD 패턴에 대해 관심을 가지게 되었습니다. 이 패턴의 이론적인 개념에 대해서는 처음 접한 것은 아니지만 실제로 어떻게 적용해야 할지에 대해서는 감이 잘 잡히지 않았습니다. 이번 강의의 사전 과제를 FSD 패턴을 통해 적용해보며 맛보기를 시도했고, 그 과정에서 느낀 개인적인 생각을 공유드리려 합니다. 본 게시글에서는 FSD 패턴의 이론적인 개념도 어느 정도 다루겠지만, 특히 적용 과정에서 개인적으로 어려웠거나 고민이 되었던 부분에 대한 이야기가 주를 이룰 예정입니다. FSD 패턴이란? FSD 패턴에 대해 공식 문서에서는 Feature-Sliced Design (FSD) 는 프론트엔드 애플리케이션의 구조를 잡는 아키텍처 방법론 이.. 2024. 11. 13. useCallback 알아보기 useCallback이란?React 공식 문서에 따르면, useCallback은 "리렌더링 간 함수 정의를 캐시할 수 있게 해주는 React Hook"이라고 정의되어 있습니다.이 설명만으로는 useCallback이 왜 필요한지 와닿지 않거나, 언제 사용해야 하는지 불분명할 수 있습니다. 그래서 React에서도 이에 대한 추가적인 설명을 제공합니다. 공식 설명에 따르면:만약 상호작용이 주로 페이지나 섹션을 교체하는 방식이라면, 메모이제이션은 대부분 불필요합니다. 반면에 애플리케이션이 그림 편집기처럼 세밀한 상호작용을 요구하는 경우(예: 도형을 이동시키는 작업), 메모이제이션이 매우 유용할 수 있습니다.useCallback이 유용한 몇 가지 상황은 다음과 같습니다:memo로 감싸진 컴포넌트에 함수를 prop.. 2024. 10. 14. useRef 알아보기 useRef란?React 공식 문서에서는 useRef를 "렌더링에 필요하지 않은 값을 참조할 수 있게 해주는 React Hook"이라고 정의하고 있습니다.Vue.js에 익숙한 저는 처음에 '굳이 훅을 사용하지 않고도 const나 let을 통해 변수를 선언하면 되는 것 아닌가?'라는 의문이 들었습니다. 그런데 왜 React에서는 useRef라는 Hook을 따로 설계했을까요? 그 이유를 알아보겠습니다.React에서 useRef가 필요한 이유React는 컴포넌트가 리렌더링될 때마다 상태와 변수를 다시 초기화하는 특징이 있습니다. 그러나 일부 값은 리렌더링과 상관없이 계속 유지되어야 하는 경우가 있습니다. 예를 들어, DOM 요소에 직접 접근하거나, UI 업데이트와는 무관하게 특정 값을 추적해야 할 때 useR.. 2024. 10. 13. 이전 1 2 다음
