React
-
[Recoil] Recoil 고수의 길 - snapshot과 useRecoilCallbackFront-End(Web)/React - 라이브러리들 2023. 10. 5. 17:44
지난번, atomFamily와 selectorFamily 포스팅에 이어, Recoil에서 유용하게 쓰일법한 기능을 하나 더 소개하고자 한다. Recoil 상태들의 한 순간인 snapshot, 그리고 이를 다루는 useRecoilCallback 등 다양한 API 기능들에 대해 알아보자! 🔗 기능들을 소개하기 앞서.. snapshot과 관련된 기능들을 소개하기 앞서, 이를 소개하게 된 배경들을 간단히 공유해볼까 한다. 1. useRecoilState와는 다른 atom 활용방법 이전 포스팅에서, Recoil의 atomFamily, selectorFamily 등에 대해 다뤄보았다. (포스팅 링크) [Recoil] Recoil 고수의 길 - atomFamily, selectorFamily 최근 프로젝트들을 진행하..
-
[Recoil] Recoil 고수의 길 - atomFamily, selectorFamilyFront-End(Web)/React - 라이브러리들 2023. 10. 2. 18:31
최근 프로젝트들을 진행하면서, Validator 솔루션에 Recoil을 적극 채용하면서 이런저런 기능들을 시도해봤던 것 같다. 그 과정에서 유용하게 사용한 기능들에 대해, 정리 및 부가학습 차원에서 포스팅을 정리하고자 시작하게 되었다! 🔗 Recoil 이란? Recoil은 페이스북에서 출시한 React 전용 전역 상태관리 라이브러리이다. 이전, Redux 등 라이브러리들과 다르게, 전역상태를 atomic하게 각 컴포넌트에서 구독 및 업데이트(리렌더) 되는 것이 특징이다. * 자세한 내용은 이전 포스팅을 참고해주길 바란다. (참고링크) [Recoil] 전역 상태관리 라이브러리 - Recoil 정복기 🧐 서론 굉장히 오랜만에 쓰는 서론인 것 같다!! 그만큼 이 글의 길이가 짧진 않을거라는 마음의 준비 차원일..
-
[React] cloneElementFront-End(Web)/React - 프레임워크(React, Next) 2023. 3. 22. 03:15
React로 개발하면서, 공통 UI 혹은 기능을 가진 랩핑 컴포넌트를 만드는 경우가 종종 있다. type Props = ButtonHTMLAttributes; function AddTravelerButton({ children, ...props }: PropsWithChildren): JSX.Element { return ( {children} ); } 이 랩핑 컴포넌트에서 Props로 받은 값으로 특정 속성을 만든다고 가정하자. 해당 컴포넌트에서 이 속성값을 사용하는 건 쉽지만, 내부의 {children} 에 이 속성값을 전달할 방법이 전혀 떠오르지 않았다. 이를 구현하기 위해 리서치해본 결과, cloneElement라는 React의 기능을 활용하면 되었다. 💙 cloneElement const clo..
-
[Form 라이브러리] React Hook FormFront-End(Web)/React - 라이브러리들 2023. 3. 19. 00:37
🧐 개요 이전 포스팅에선, Form 라이브러리를 도입한 배경과 React에서 많이 활용되는 Formik 라이브러리에 대해 포스팅했다. (링크) [Form 라이브러리] formik 🧐 개요 프로젝트들을 진행하면서, 입력 form 컴포넌트를 제작해야 하는 경우가 종종 존재하였다. 특히, 폼 제어를 위한 다양한 기능들이 요구된다. (입력값 관리, 유효성 검사 및 에러상태 관리, abangpa1ace.tistory.com 포스팅 초반부에서 소개했듯, Formik과 더불어 통용되는 라이브러리가 React Hook Form(이하 RHF) 이다. 개인적으론 이 라이브러리에 장점을 더 느꼈으며, 포스팅을 통해 주요개념과 왜 그렇게 생각했는지를 함께 소개해보겠다! * 폼 라이브러리 비교 구분 formik React Ho..
-
[Form 라이브러리] formikFront-End(Web)/React - 라이브러리들 2023. 3. 15. 05:26
🧐 개요 프로젝트들을 진행하면서, 입력 form 컴포넌트를 제작해야 하는 경우가 종종 존재하였다. 특히, 폼 제어를 위한 다양한 기능들이 요구된다. (입력값 관리, 유효성 검사 및 에러상태 관리, 유효성 검사 및 입력값 제출 API 연동, 성공/실패 시의 fallback 로직 등..) 이전 회사의 멤버십 프로젝트에서도, 이러한 기능들을 템플릿화 하기 위해 컴포넌트 커스터마이징 등 많은 시도를 했다. 또, 최근 파트너 프로젝트를 지원하면서, 투어상품을 판매하는 파트너로 가입하기 위해 진행되는 다양한 입력 폼에 대한 제어가 필요함을 다시금 느꼈다. 앞으로도, 입력 폼들에 대한 신규개발 혹은 리팩토링을 대비해, React 환경에서 이를 좀 더 심플하게 구현할 방법들에 대해 리서치한 내용들을 간단히 공유하고자 ..
-
[Next.js] Next.js 13 변경사항Front-End(Web)/React - 프레임워크(React, Next) 2023. 1. 14. 03:05
🤍 Next.js 13 Next.js 12버전도 2021년 중순 업데이트 된 것으로 기억하는데, Next.js 13이 2022년 10월에 컨퍼런스에서 다시 발표됬다. 체감상 가장 큰 변화를 느낄 것 같은 버전 체인지이다. (디렉토리 구조, getServerSideProps 등 Next 정체성이 대거 바뀜) Next 개발팀은 13버전 업을 통해 좀 더 제한없이 동적으로 동작하는 기반을 마련하고자 했다는게 주요 컨셉이다. - 주요 변경사항 app/Directory(beta) : 쉽고, 빠르고, 적은 클라이언트 JS Layouts(레이아웃) React Server Components (리액트 서버 컴포넌트) Streaming (스트리밍) Turbopack(alpha) : Rust 기반. Webpack 보다 7..
-
[React Query] (6) Suspense와 Error Boundary 적용Front-End(Web)/React - 라이브러리들 2022. 11. 3. 04:46
🧐 서론 지난, React 18의 Concurrency(동시성)을 시리즈로 포스팅하면서 비동기의 선언적 로딩인 Suspense와 에러처리인 Error Boundary 에 대해 알아보았다. * Suspense(위, 링크), Error Boundary(아래, 링크) [React] Concurrency(동시성) - #1. Suspense와 React.lazy 🧐 서론 전 회사분들과 진행하는 스터디에서 나는 Suspense와 React.lazy를 통한 코드 스플리팅 부분을 맡게 되었다. Suspense에 대해서만 공부하려고 했다가, Error Boundary나 Transition API 등 관련된 기능 abangpa1ace.tistory.com [React] Concurrecy(동시성) - #2. Error B..
-
[React] Concurrency(동시성) - #4. Transition APIFront-End(Web)/React - 프레임워크(React, Next) 2022. 11. 3. 04:45
지난 포스팅에서 React 18의 주요 컨셉인 Concurrent Rendering(동시성 렌더링) 을 정리하였다. (포스팅) [React] Concurrency(동시성) - #3. Concurrent Rendering 🧐 서론 지난 포스팅에선, , 를 통한 Loading UI, 를 통한 Error UI 등에 대해 알아보았다. 하지만, 이런 로딩화면도 사용자에게 답답함을 줄 수 있기에, React는 좀 더 UX 친화적인 렌더링 방식을 제공하 abangpa1ace.tistory.com 이번 포스팅은 이를 실제로 구현하는 기능인 Transition API 들에 대해 정리하려고 한다. Hooks 들의 사용법들을 확인할 뿐만 아니라, 이들을 통해 기존의 Suspense(로딩) 방식에서 UX적으로 어떻게 나아지는..