bkdragon's log

프로퍼티가 많은 객체를 useReducer를 통해 상태로 다룰 때 Action의 type과 payload를 적절하게 추론하는 타입을 만들어보려고 한다. 목표는 이러하다 예를 들어 아래와 같은 타입이 있다.type User = { email: string; password: string; name: string; phone: string; age : number; deleted: boolean;};이때 Action 객체의 type은 "update_email", "update_password" .... 가 되고 payload가 그거에 맞게 string, string, number, boolean 이 되게 할 것이다. 추후에 상태 업데이트를 위해 dipatch 함수를 사용할..

화면 하단에서 올라오는 BottomSheet 를 React로 구현해보려고 한다. 데스크탑 해상도에서 Modal 창을 사용하는 화면을 대체할 수 있을 것 같다. 주 기능은 아래와 같다.특정 동작(버튼 클릭 등) 이후 화면 아래에서 올라온다.드래그를 통해 화면 아래로 내릴 수 있다.style은 tailwindcss를 사용했다.주 기능을 토대로 Props의 interface 부터 만들어보자.interface IProps { isOpen: boolean; onClose: () => void; children: React.ReactNode;}보여져야 하는 상황인지 알 수 있는 상태와 다시 안보이게 할 수 있는 함수를 받는다. UI와 기본 기능만 재활용할 것이기 때문에 내부 요소들은 children..

리액트의 기본 개념들을 하나씩 정리해보려고 한다. 어렴풋이 혹은 잘 몰랐던 부분들이 명확해졌으면 좋곘다. 렌더링React가 화면을 그리기 위해서는 렌더링 과정이 필요하다. 이는 흔히 브라우저 렌더링과 같다고 생각할 수 있지만 아니다. React의 렌더링과 브라우저 렌더링은 다르다. React의 렌더링은 React가 컴포넌트(함수형)를 호출하는 것을 말한다. 좀 더 정확히는 컴포넌트를 호출하여 반환된 React Element로 VDOM을 재조정하는 것이다. 즉, VDOM 에서 이뤄지는 작업을 말한다.React가 렌더링을 하려면 트리거가 필요하다. 트리거는 두가지 경우가 있는데 초기 렌더링과 컴포넌트의 state(+ props) 혹은 파생된 상태가 변경되었을 경우이다.초기 렌더링에 경우 React는 루트 컴..

내 블로그의 유입 통계를 보면 항상 상위권은 React Query에 관한 글이다. 물론 내 블로그 유입 수가 많진 않아서 판단의 근거가 될 순 없지만 내 블로그에도 들어올 정도니 React Query에 대한 관심이 높아진 상황이라고 볼 수 있을 것 같다. 지금은 버전업이 좀 많이 되어서 큰 참고가 안될 것도 같다...아무튼 그런 의미에서 새로운 React Query 글이다. React Query 의 핵심을 결국 데이터 캐싱이라고 보는데 이 캐싱된 데이터를 식별하기 위해 쿼리키가 사용이 되는데 이걸 관리하는게 여간 귀찮은 일이 아니다. 그래서 라이브러리를 통해 관리하는 방법을 소개해보려고 한다.React Query (TanStack Query) 공식 문서에도 소개 되어있는 @lukemorales/quer..

마우스 이벤트를 활용하면 드래그를 통해 html 요소의 크기를 조절할 수 있습니다. 이걸 활용해서 그리드 내부의 요소의 크기를 조정해보겠습니다.마우스 이벤트 종류click설명: 해당 요소를 클릭했을 때(버튼을 눌렀다가 뗐을 때) 발생합니다.사용 예시: 버튼을 클릭하여 폼을 제출하거나 링크를 열 때 사용됩니다.mousedown설명: 해당 요소에서 마우스 버튼을 눌렀을 때 발생합니다.사용 예시: 드래그 앤 드롭 기능을 구현할 때, 요소를 선택하는 초기 동작으로 사용됩니다.mouseup설명: 해당 요소에서 눌렀던 마우스 버튼을 뗐을 때 발생합니다.사용 예시: 드래그 앤 드롭 기능에서 요소의 위치를 결정하거나, mousedown과 함께 사용하여 클릭 이벤트를 처리할 수 있습니다.dblclick설명: 해당 요소에..

React 18 부터 적용되는 렌더링 방식이다. 동시성 렌더링을 통해 React는 렌더링 자체에 개입하여 이를 중단하거나 재개하거나 폐기할 수 있다. React 18 이전에는 synchronous rendering (동기적 렌더링) 방식이였기 때문에 한번 렌더링 작업이 시작되면 중단할 수 없었고 이로 인해 우선순위가 높은 (빠른 응답이 필요한) 작업의 처리가 늦어지는 문제가 있었다. 동시성은 여러 작업을 작은 단위로 나눈 뒤, 우선순위를 정하고 그에 따라 작업을 번갈아 수행하는 방법이다. 실제로 동시에 이루어지는 것은 아니다. 다만 작업 간의 전환이 매우 빠르게 이루어지며 동시에 수행되는 것처럼 보인다. React의 git discussion에서 좋은 이미지를 찾았다. https://github.com/..

React 18의 새로운 아키텍쳐 기존 SSR의 동작방식 페이지의 모든 데이터를 서버에서 가져온다. (server) 서버에서 HTML 문서를 사전 렌더링 한다. (server) 사전 렌더링된 HTML 문서와 JavaScript, CSS가 클라이언트로 전송된다. (client) 브라우저 화면에 사용자 상호작용이 추가된다. hydrate (client) 기존 SSR의 문제 SSR의 동작은 순차적이고 차단적이다. (blocking) 모든 데이터를 가져온 후에만 HTML이 렌더링되고 모든 JavaScript가 다운로드 되어야 hydrate가 시작된다. 위와 같은 마크업을 가진 페이지가 있다. Comments의 데이터를 가져오는데 많은 시간이 든다고 하면 Sidebar나 Post가 먼저 준비되더라도 Comment..

React Sever Component (이하 RSC)는 React 18부터 도입된 개념이다. 서버에서 동작하는 컴포넌트를 말한다. Next 13의 app directory에서 작성하는 Component는 기본적으로 Server Component이다. RSC의 동작 방식 이제 React tree에는 RSC, RCC 가 적절하게 분배되어 사용될 것이다. (출처 : https://www.plasmic.app/blog/how-react-server-components-work#what-are-react-server-components ) 브라우저에서 해당 페이지에 대한 요청을 하면 React Tree의 root부터 실행하며 직렬화된 JSON 형태로 재구성한다. 모든 Component에 대해서 이 작업이 이뤄지..

순수성과 Side Effect 순수성과 Side Effect는 대비된다. React의 컴포넌트는 순수성을 가진다. 동일한 Props를 받으면 늘 동일한 Jsx를 반환한다. 즉, React 렌더링 과정에서 Side Effect는 발생 되어서는 안된다. useEffect 그래서 Side Effect와 React의 렌더링을 분리하기 위해 useEffect가 등장했다. useEffect는 렌더링 과정에서 커밋(재조정 결과를 dom에 반영) 후에 작동함으로 Side Effect와 렌더링을 분리한다. 그리고 useEffect는 컴포넌트의 생명주기 (mount, update, unmount)에 간섭할 수도 있다. 기본 사용법 function MyComponent () { useEffect(() => { return ..

할 일 목록을 지닌 todoContainer와 할 일 아이템을 개별적으로 보여주는 todoItem, 두 개의 컴포넌트가 있을 때 할 일 아이템을 추가하거나 삭제해서 todoContainer 가 리렌더링 되면 모든 todoItem이 리렌더링이 되는데 이걸 최적화 하고 싶었다. 최적화에 필요한 도구들은 이전 글 중에 정리해둔 부분이 있다. 헌데 그 글은 단순 이론이고 이번에 실전에 적용하면서 조금 더 디테일하게 다뤄보려고 한다. React 리렌더링 과정 리렌더링 과정을 세 단계로 구분 할 수 있다. 트리거 렌더링이 트리거되는 단계 state 값이 불변을 지켜 대체되었는지만 확인한다. 좀 더 자세히 이야기하면 기본형 변수일 땐 값이 변경되었는지만 확인, 참조형 변수일 땐 메모리 주소만 변경되었는지 얕은 비교를..