외부 상태와 결합하기 위해서는?React 앱을 구축하다 보면 종종 외부 상태와 결합해야 하는 상황이 찾아옵니다.예를 들어 브라우저 API가 있습니다. (geolocation, localStorage)또는 서드파티 라이브러리들도 있습니다. (WebSocket 연결을 관리하는 라이브러리) 이러한 외부 상태들을 React 앱에 통합하려 하면 일반적인 방법으로는 불가능합니다. // 🚫 잘못된 방법function OnlineStatus() { const [isOnline, setIsOnline] = useState(navigator.onLine); useEffect(() => { const updateStatus = () => { setIsOnline(navig..
최근에 회사에서 헤드리스 컴포넌트를 이용하여 공통 컴포넌트를 구현하였습니다.이에 대한 정리를 겸해서 헤드리스 컴포넌트가 무엇인지, 그리고 사용하면 어떤 점이 좋은지 등을 알아보겠습니다. 헤드리스 컴포넌트란? Completely unstyled, fully accessible UI components유명한 헤드리스 컴포넌트 라이브러리 중 하나인 `HeadlessUI`의 소개글입니다.여기서 설명하는 것을 보면 스타일이 없는, 완전히 접근 가능한(접근성이 좋은) UI 컴포넌트라고 설명하고 있습니다. 여기서 주목할 점은 두 가지입니다: 1. 스타일이 없는2. 접근성이 좋은 만약 이게 일반적인 디자인 시스템 라이브러리였다면 1번의 문구를 자신들의 메인에 작성해놓지 않았을 것입니다.하지만 헤드리스는 다릅니다. 스타..
프로젝트 시작점react에서는 주로 react-router-dom을 이용해서 라우팅을 처리하고, next.js에서는 내장된 파일/폴더 기반 라우팅을 이용합니다저는 주로 next.js를 사용해서 파일/폴더 기반 라우팅이 더 익숙하였고, 이를 react-router-dom에서도 사용하고싶은 마음에 시작하였습니다. 프로젝트 아이디어기본적인 아이디어는 next.js의 폴더 기반 라우팅을 그대로 구현하는거였습니다.즉 [폴더명]/page.tsx 구조로 제한을 걸고 폴더명이 path가 되는 방식입니다 이를 위해서는 내부적으로 폴더/파일 구조를 탐색하고 이 특정 패턴의 폴더/파일 경로를 가져와서 react-router object로 바꾸는 방법이 있다고 생각하였습니다 실제 구현`import.meta.glob()`를 활..
[참고: suspense-in-react-18] rfcs/text/0213-suspense-in-react-18.md at main · reactjs/rfcsRFCs for changes to React. Contribute to reactjs/rfcs development by creating an account on GitHub.github.com 배경``는 React v16.6.0에서 최초로 선보여졌고, 이때에는 **code splitting**에서만 사용되었습니다`React.lazy`를 통해 lazy 로드를 한 코드에 대해 Suspense 경계를 생성하고 해당 코드를 필요한(사용될) 경우에만 임포트 하는 방식으로 사용하였습니다.즉 클라이언트 사이드에서만 사용되었습니다 React 팀은 v18에서 이..
[참고: useLayoutEffect]useLayoutEffect is a version of useEffect that fires before the browser repaints the screen.공식문서에서 `useLayoutEffect`는 브라우저가 리페인트되기 전에 실행되는 `useEffect`라고 서술합니다그대로 이해하면 React 컴포넌트가 브라우저에 그려지기전에 `useLayoutEffect`의 로직이 먼저 실행된다는 뜻입니다 이게 정확히 무슨뜻인지 이해하기 전에, 이게 의미가 있는 훅일까요?브라우저가 리페인트되기 전 / 후가 `useEffect` 로직 실행이랑 무슨 상관일까요? 이를 이해하기 위해서는 리액트의 생명주기를 이해하면 좋습니다리액트 생명주기는 아래와 같습니다 1. 마운트 - ..
[이전 글: Suspense를 활용하면 스피너 지옥에서 탈출할 수 있습니다] [React] Suspense를 활용하면 스피너 지옥에서 탈출할 수 있습니다[참고: Suspense] – React" data-og-description="The library for web and native user interfaces" data-og-host="react.dev" data-og-source-url="https://react.dev/reference/react/Suspense" data-og-url="https://react.dev/reference/react/Suspense" data-og-imajoseph0926.tistory.com 이전 글에서 `Suspense`에 대해서 알아보고 어떤 방식으로 동작하는..
[참고: Server Actions - react.dev] Server Actions – ReactThe library for web and native user interfacesreact.dev[참고: Server Actions - next docs] Data Fetching: Server Actions and Mutations | Next.jsLearn how to handle form submissions and data mutations with Next.js.nextjs.org리액트 18에서 시험적으로 도입된 기능중에 지시문이 존재합니다Directives provide instructions to bundlers compatible with React Server Components. 지시문은..
이번에 회사에서 디자인 시스템까지는 아니지만 다양한 공통 컴포넌트를 설계하였고, 해당 업무를 진행하면서 느낀점을 작성해보려합니다. 해당 컴포넌트 어떤 레벨인가?먼저 공통 컴포넌트로 구현할 컴포넌트가 어느정도 레벨의 컴포넌트인지 파악해야합니다.여기서 말하는 레벨이란 간단한게 3단계로 나눌 수 있을거같습니다 기본 레벨버튼, 입력 필드, 토글 등 일반적인 UI 요소중간 레벨모달, 카드, 네비게이션 바 등 여러 개의 기본 블록이 결합된 UI 컴포넌트애플리케이션 레벨사용자 프로필 카드, 쇼핑 카트, 데이터 테이블 등 특정 도메인과 밀접하게 연결된 컴포넌트 간단한 예시를 들어본다면 ``은 일반적으로 가장 저수준의 컴포넌트입니다.이 컴포넌트 다른 컴포넌트에서 일종의 레고처럼 하나의 블럭으로 사용될 수 있고, 단독으로..
