본문 바로가기
반응형

리액트3

React 모듈화, 왜 하고 언제 해야 할까? (실무 예시 포함) React 프로젝트를 하다 보면 코드 구조가 복잡해지는 순간이 찾아옵니다.처음에는 괜찮지만, 시간이 지날수록 특정 기능을 찾기 힘들고,수정하려고 들어갔다가 다른 부분까지 영향을 주는 일이 생기기도 하죠. 이럴 때 필요한 것이 바로 모듈화입니다.이번 글에서는 모듈화가 무엇인지, 왜 필요한지, 그리고 어떤 상황에서 해야 하는지에 대해간단한 예시와 함께 정리해보려고 합니다.  모듈화란 무엇인가요?모듈화는 기능 단위로 코드를 잘게 나누고, 각각을 독립적인 단위(모듈)로 관리하는 것을 말합니다.즉, 하나의 파일이나 함수가 너무 많은 역할을 하지 않도록, 책임을 분리하는 작업이에요. 예를 들어 API 요청, UI 렌더링, 상태 관리가 한 컴포넌트 안에 모두 들어있다면이들을 각각 나눠서 관리하는 것이 모듈화라고 할 .. 2025. 4. 8.
React-query 시작하기 새 프로젝트에 React에서 비동기 로직을 쉽게 다루게 해주는 라이브러리 React-query를 사용하기로 결정이 났다 그래서 React-query를 공부하면서 블로그에 끄적여본다 개요 React Query는 종종 누락된 데이터 가져오는 라이브러리로 설명되지만, 보다 기술적인 용어로 말하면 React 애플리케이션에서 fetching(가져오기), caching(캐싱), synchronizing and updating server state(동기화 및 서버상태 업데이트)를 수행한다 기본 코드 import { QueryClient, QueryClientProvider, useQuery } from 'react-query' const queryClient = new QueryClient() export defa.. 2022. 3. 16.
React-Admin 시작하기 - API 앤드포인트를 맵핑하여 List로 보여주기 React-Admin 튜토리얼을 보고 따라해봤다 먼저 앞전에 쓴 포스팅 Create React App을 이용하여 React 앱, TypeScript 시작하기를 통해 React 앱을 만든 후 react-admin 패키지를 설치한다 yarn create react-app test-admin cd test-admin/ yarn add react-admin ra-data-json-server prop-types yarn start http://localhost:3000/ 에는 아래 화면처럼 나올 것이다 React-admin를 사용하기 위해서는 생성, 검색, 업데이트 및 삭제 (CRUD) 할 수 있어야 한다 그래서 JSONPlaceholder에서 예시용으로 제공해주는 샘플 더미 API를 이용해 연습해 볼 것이다 .. 2020. 4. 21.
반응형