본문 바로가기

react7

React 모듈화, 왜 하고 언제 해야 할까? (실무 예시 포함) React 프로젝트를 하다 보면 코드 구조가 복잡해지는 순간이 찾아옵니다.처음에는 괜찮지만, 시간이 지날수록 특정 기능을 찾기 힘들고,수정하려고 들어갔다가 다른 부분까지 영향을 주는 일이 생기기도 하죠. 이럴 때 필요한 것이 바로 모듈화입니다.이번 글에서는 모듈화가 무엇인지, 왜 필요한지, 그리고 어떤 상황에서 해야 하는지에 대해간단한 예시와 함께 정리해보려고 합니다. 모듈화란 무엇인가요?모듈화는 기능 단위로 코드를 잘게 나누고, 각각을 독립적인 단위(모듈)로 관리하는 것을 말합니다.즉, 하나의 파일이나 함수가 너무 많은 역할을 하지 않도록, 책임을 분리하는 작업이에요. 예를 들어 API 요청, UI 렌더링, 상태 관리가 한 컴포넌트 안에 모두 들어있다면이들을 각각 나눠서 관리하는 것이 모듈화라고 할 .. 2025. 4. 8.

React 웹뷰에서 AppsFlyer URL 받기, 브릿지 구현기 정리! 최근 프로젝트에서 웹뷰 안의 React 페이지에서 AppsFlyer URL을 앱으로부터 전달받아야 하는 요구사항이 있었습니다.이걸 해결하기 위해 사용한 기술이 바로 '브릿지(Bridge)'였는데요. 처음 접했을 땐 막막했지만, 원리를 이해하고 나니 생각보다 단순했습니다.오늘은 그 과정을 정리하며 브릿지가 무엇이고, 왜 필요한지, 어떻게 사용하는지 공유해보려 합니다. 브릿지란 무엇일까요?브릿지(Bridge)는 말 그대로 두 환경을 연결해주는 다리 역할을 합니다.앱(Native)과 웹(Web)은 기본적으로 서로 다른 세계에서 작동하기 때문에 직접적으로 통신하기 어렵습니다.하지만 브릿지를 활용하면 웹에서 앱의 기능을 호출하거나, 반대로 앱에서 웹으로 데이터를 넘겨주는 게 가능해집니다. 왜 브릿지가 필요했을.. 2025. 4. 7.

[React] Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Server Error Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. \*.tsx 파일은 \*.ts 로 변경하면서 생긴 에러... 또는 import 할 때 { \*\*\* } 때문일 수도 있으니 import 할 때도 주의깊게 확인할 것! [정리] 해당 에러는 componen.. 2022. 9. 30.

에러메시지 error: Command failed with exit code 1 프로젝트 시작시 발생한 에러 error: Command failed with exit code 1 1. yarn 으로 생성된 node_modules, yarn.lock 지우기 rm -rf node_modules rm -rf yarn.lock 2. yarn 공유 캐시 파일 지우기 yarn cache clean 3. yarn 재설치 후 시작하기 yarn yarn start or 1. yarn 업데이트 후 yarn 시작하기 yarn update yarn start 2022. 3. 28.

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 리스트에 검색 및 필터 추가하기 Post List에 검색 및 필터를 추가해보겠다 먼저 PostFilter 컴포넌트를 추가한다 그리고 PostList 컴포넌트의 List에 filters 속성을 추가해준다 // in src/posts.tsx const PostFilter = (props) => { return ( ) } export const PostList = (props) => { return ( // ... ) } PostFilter 컴포넌트에서 의 source="q"는 JSONPlaceholder가 제공하는 전체 텍스트 활용을 말한다 alwaysOn는 항상 화면에 나타나도록 설정하는 속성이다 그리고 PostList 컴포넌트의 List에 filters를 추가하면 ADD FILTER 버튼이 생성된다 ADD FILTER 버튼을 클릭하면 .. 2020. 4. 23.

이전 1 2 다음

티스토리툴바