반응형 React25 [React] React Children Props의 기묘한 렌더링 최적화 현상의 원인 📒 React의 children prop 리액트에서는 동적으로 자식 컴포넌트를 렌더링 하기 위해 부모 컴포넌트에서 children prop을 이용할 수 있습니다. 모두가 잘 알고 있듯 사용법은 다음과 같습니다. const Children = () => { return Children; }; const Parent = ({ children }: { children: JSX.Element }) => { return {children}; }; export const Container = () => { return ( ); } 이러한 사용 방식은 React Context의 Provider, BrowserRouter, RecoilRoot를 사용할 때도 동일합니다. 여기까진 늘 알고 있었던 내용입니다. 📌 Chil.. 2023. 11. 1. [React/TypeScript] 절대경로 CRA 템플릿 npm 배포 ⚡ npm배포 지금껏 오픈소스에 대한 막연한 환상을 지닌 채로 언젠가는 나도 도전해봐야 할 일이라고 생각하며 가슴 한편에 묻어두고 있었습니다. 그러다 약간의 여유가 생겼고 도전해봄직 하다는 자신감도 생겼지만 막상 뭘 해야 될지 몰랐습니다. 고민에 고민을 거듭하다, 일단 최대한 간단하고 npm 배포 연습용 소재를 찾다 저만의 템플릿을 올려보기로 결정했습니다. 항상 새로운 프로젝트를 만들 때마다 매번 똑같이 정형화된 포맷을 만들어주기도 귀찮았고, 남들이 안써도 내가 쓰면 그만이라는 생각으로 제작해 봤습니다. 그럼 어떤 라이브러리와 보일러 플레이트가 템플릿에 녹아있는지 소개드립니다. ⚡ cra-template-lasbe React - TypeScript와 recoil, styled-components, cra.. 2023. 9. 11. [React] ErrorBoundary를 통한 선언적인 에러 핸들링, react-query를 이용한 재호출 방법 📒 리액트에서의 에러 핸들링리액트의 한 컴포넌트에서 에러가 발생했을 때 적절한 에러 핸들링을 하지 않는다면애플리케이션 전체가 중단될 수 있습니다. 저는 평소 API 호출 로직에 try - catch 를 이용해 구구절절 명령형으로 에러를 처리하곤 했습니다. 이와 같은 방식은 한 컴포넌트 안에 에러가 발생했을 경우, 에러가 발생하지 않았을 경우,두 가지 조건에 대한 로직이 섞여 코드 라인 수가 길어지고 가독성을 저해합니다. 또한 에러 핸들링에 대한 명확한 기준이 없다면 개발자마다 다른 에러 핸들링으로 코드의 통일성을 잃어버릴 수 있습니다.에러 발생 }> 하지만 위와 같이 ErrorBoundary를 이용해 선언적으로 에러 핸들링을 하게 되면에러 핸들링에 관한 모든 권한을 위임하게 되어하위 컴포넌트에서는.. 2023. 9. 4. [React] 선언적으로 유저 행동 이벤트 추적하기 with React.cloneElement() ⚡️ 선언적으로 유저 행동 이벤트 추적하기 최근에 B2C 업무에 투입되며 전반적인 앱 플로우와 곧 제가 하게 될 업무에 대해 설명을 들었습니다. 그중 data-driven 한 의사 결정을 위해 유저 이벤트 추적 툴을 도입한 상태였고, 정해주는 이벤트에 추적 기능을 붙이는 업무도 하게 될 것이라는 말씀을 들었습니다. 그러면서 예시 코드를 보여주셨는데 예시로 다음과 같이 버튼 클릭 이벤트 핸들러 함수 안에 추적 툴에서 제공한 함수를 이어붙인 모양이었습니다. const handleClickSignUp = () => { 이벤트_추적(); // ~~~ 회원가입(); // ~~~ } 이러한 방식은 하나의 함수에 두가지 이상의 기능이 담겨 가독성을 해치고 유지보수가 여러워 질 것이 뻔합니다. 그렇다면 기능을 분리하고.. 2023. 8. 29. [React] 스크롤 애니메이션, IntersectionObserver + styled-components 📒 React 스크롤 애니메이션 구현하기 사용자의 눈길을 끌기 위해 다양한 방법들이 사용 되는데, 그 중에서도 가장 눈에 띄던 것이 스크롤 애니메이션이었습니다. 실제 사이드 프로젝트에서 구현한 모습은 다음 링크에서 확인할 수 있습니다. 링모(LINGMO) - 당신의 링크 모음 개성 있는 나만의 링크 모음을 만들어보세요! lingmo.me 직접 구현해보니 생각했던 만큼 어렵지도 않았던 스크롤 애니메이션을 React로 간단하게 구현해본 후 hook으로 분리해 재사용이 용이하도록 개선한 코드를 소개합니다. 📌 라이브러리로 쉽게 구현하기 [React] 리액트 스크롤 애니메이션 라이브러리 개발 스크롤 애니메이션 기능을 쉽고 빠르게 구현하고 싶으신 분들은 위 글을 참고해주세요! 📌 IntersectionObserv.. 2023. 8. 6. [React] Whitelabel Error Page 에러, 리액트로 간단하게 해결하기 ⚡ 리액트 Whitelabel Error Page 리액트 프로젝트 진행 중 백엔드의 API를 CORS 없이 호출하기 위해 craco의 devServer proxy를 설정해주었습니다. 그렇게 proxy 설정을 마치고 CORS를 해결했으나 이상하게도 라우팅을 통한 페이지 이동은 잘 되지만 새로고침만 하면 다음과 같은 에러가 발생했습니다. 📌 원인 검색해봐도 제대로 된 원인을 알 수 없어 곰곰히 생각해보니 proxy 이후에 문제가 발생한 것을 토대로 라우팅에 원인이 있다고 판단했습니다. 리액트 라우터가 자신에게 들어오는 요청을 토대로 페이지를 이동해야 하지만 root(’/’)에 포함된 모든 url을 백엔드 서버로 proxy 해버리는 바람에 스프링 부트 서버에서 Whitelabel Error Page 에러를 뱉.. 2023. 8. 4. [React] Context API와 의존성 주입 📒 Context API란 무엇인가?리액트 공식문서에서는 Context를 다음과 같이 소개하고 있습니다.context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도컴포넌트 트리 전체에 데이터를 제공할 수 있습니다.일반적인 React 애플리케이션에서 데이터는 위에서 아래로(즉, 부모로부터 자식에게) props를 통해 전달되지만,애플리케이션 안의 여러 컴포넌트들에 전해줘야 하는 props의 경우(예를 들면 선호 로케일, UI 테마) 이 과정이 번거로울 수 있습니다.context를 이용하면, 트리 단계마다 명시적으로 props를 넘겨주지 않아도많은 컴포넌트가 이러한 값을 공유하도록 할 수 있습니다.리액트에서는 컴포넌트 간 prop drilling을 방지하기 위해 context를 내놓았습니다. con.. 2023. 5. 8. [React] react-query, 리액트 쿼리를 사용해야 하는 이유 📒 react-query를 사용해야 하는 이유 리액트에서 상태 관리를 위한 라이브러리는 무수히 많습니다. 대표적으로 redux, recoil 같은 라이브러리가 있는데, 대부분 이러한 상태 관리 라이브러리를 사용하며 클라이언트 상태와 서버 상태를 함께 담아두고 있는 경우가 대부분이고, 또 그럴 수 밖에 없었습니다. react-query를 사용해 서버 상태를 관리한다면 클라이언트 상태를 분리하여 관리할 수 있기 때문에 직관적이고 효율적인 관리가 가능해집니다. 이 외에도 react-query에서 지원하는 다양한 옵션들을 사용해 캐싱, 에러처리, suspense, refresh, data fetching 조건 설정 등등 기존에 불편하게 느꼈던 부분들을 선언적이고 간편하게 이용할 수 있도록 도와줍니다. 그럼 re.. 2023. 4. 16. [React] Suspense을 사용해 선언적으로 로딩 화면 구현하기 📒 Suspense을 사용해 선언적으로 로딩 화면 구현하기리액트의 Suspense는 React 16 버전에서 처음으로 선보인 후18 버전으로 오며 추가된 기능을 제공합니다. 이 글에서는 React 18에서의 Suspense를 왜, 어떻게 사용하는지 소개합니다.이번에 메이저 버전이 업데이트 된 react-query v5에서 Suspense가 어떻게 달라졌는지 다음 글로 빠르게 살펴보세요!react-query v5 주요 변경점 알아보기 feat. Suspense, ErrorBoundary📌 Suspense를 사용하는 이유리액트가 함수형 컴포넌트를 도입하며 내세운 가장 강력한 키워드는 선언형 프로그래밍입니다. 우선 본격적인 설명에 앞서 대비되는 명령형 프로그래밍과 선언형 프로그래밍의 차이에 대해 설명드립니.. 2023. 3. 23. 반응형 이전 1 2 3 다음
오픈 채팅
