[ { "id": "c1377cca-5dbb-463e-bf32-005a08d706f6", "type": "heading", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left", "level": 1 }, "content": [ { "type": "text", "text": "시작하기 앞서", "styles": {} } ], "children": [] }, { "id": "504e8956-d683-405c-baca-1e23e21ec468", "type": "nextImage", "props": { "backgroundColor": "default", "textAlignment": "left", "name": "https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fa21dd205-3918-495e-8881-a8ab9df55b02%2F5bef0de3-400b-4a99-8aaa-d5a73d75453c%2Fimage.png?table=block&id=127eae65-a96f-8022-96e5-e28ab78c905d&spaceId=a21dd205-3918-495e-8881-a8ab9df55b02&width=2000&userId=&cache=v2", "url": "https://common-sheet-da1.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fa21dd205-3918-495e-8881-a8ab9df55b02%2F5bef0de3-400b-4a99-8aaa-d5a73d75453c%2Fimage.png?table=block&id=127eae65-a96f-8022-96e5-e28ab78c905d&spaceId=a21dd205-3918-495e-8881-a8ab9df55b02&width=2000&userId=&cache=v2", "caption": "", "showPreview": true, "previewWidth": 0 }, "children": [] }, { "id": "4a443529-bb4a-43e3-924c-81d4a9119314", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "165e1d65-f295-4620-b09c-359eb1bf2f60", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "수평으로 스크롤 되는 리스트는 어떤 ", "styles": {} }, { "type": "text", "text": "의미", "styles": { "bold": true } }, { "type": "text", "text": "를 가지고 있을까요?", "styles": {} } ], "children": [] }, { "id": "dbaf124a-6463-40e7-b5c2-d7951c9a501a", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "855fbd78-4ba2-4b9f-8092-1c3e0624b5e2", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "개인적으로는 사용자가 시선을 불필요하게 수직으로 움직이지 않고 한 곳에 머무를 수 있게 하면서 여러 정보를 보여줄 수 있다는 의미를 가지고 있다고 생각합니다.", "styles": {} } ], "children": [] }, { "id": "5b484072-9ac1-4bc1-ae36-05c5c5e971b2", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "adbd51f9-15fd-4c59-8ea3-292624adc9e3", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "시선이 이동한다는 것", "styles": { "bold": true } }, { "type": "text", "text": "은 순간적으로 ", "styles": {} }, { "type": "text", "text": "집중도", "styles": { "bold": true } }, { "type": "text", "text": "를 잃을 수 있다고 생각합니다.", "styles": {} } ], "children": [] }, { "id": "dc7518b1-072e-4467-b145-49042b0efb84", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "그렇기에 ", "styles": {} }, { "type": "text", "text": "시선이 한곳에 머무를 수 있다는 것은", "styles": { "bold": true } }, { "type": "text", "text": " 사용자가 정보에 좀 더 ", "styles": {} }, { "type": "text", "text": "집중", "styles": { "bold": true } }, { "type": "text", "text": "할 수 있게 도와줄 수 있다고 생각합니다. ", "styles": {} } ], "children": [] }, { "id": "68ae388e-9a5e-4add-b89d-ae401f9ef740", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "(저는 UI/UX 를 쥐뿔도 모르기 때문에 잘못된 논리일 수도 있습니다...)", "styles": { "italic": true, "textColor": "gray" } } ], "children": [] }, { "id": "c0384637-1ae6-4593-afd9-f9f46e53156a", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "4f6a9ccd-f46b-4b09-b2a3-51e836d6462d", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "수평 스크롤은 수직 스크롤에 비해 ", "styles": {} }, { "type": "text", "text": "고려", "styles": { "bold": true } }, { "type": "text", "text": "해야 할 부분이 있습니다.", "styles": {} } ], "children": [] }, { "id": "fdfcaae9-f665-4cd4-8c9e-bd0fd4e9f374", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "스크롤 이벤트는 네이티브 디바이스와 트랙패드를 통한 터치나 마우스의 휠 등을 통해 이루어집니다.", "styles": {} } ], "children": [] }, { "id": "8ebcfe62-664a-491b-b7a3-16268963c50d", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "d19d7e81-d7ed-4179-9362-54a648ba1dc4", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "수직 스크롤은 그 동작에 큰 괴리감이 없습니다.", "styles": {} } ], "children": [] }, { "id": "3bf05e4d-ce63-4f67-b8d1-f4af81ef4ebd", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "화면 등을 터치하여 끌어내리는 동작과 마우스의 휠을 움직이는 것의 결과가 거의 유사하기 때문입니다.", "styles": {} } ], "children": [] }, { "id": "e426ed7d-dc2a-409a-8e08-a31ef3bfdfba", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "f5e45eb8-8725-4db1-ad77-385233520ff1", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "반면에 수평 스크롤은 터치를 통해서는 문제 없이 동작하지만 마우스만 사용하는 환경에서는 동작하지 않을 수 있습니다.", "styles": {} } ], "children": [] }, { "id": "3dbfd184-0e29-44ee-8515-fb234a077a97", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "29eed7ec-e350-4a9a-8358-efab3035854c", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이번 레시피에서는 사용성을 해치지 않으면서 최적화에 친화적인 수평 스크롤을 어떻게 구현할 수 있을까? 에 대한 고민들을 담아봤습니다!", "styles": {} } ], "children": [] }, { "id": "5661c2dd-bf3e-4178-8071-6a2ced3a1636", "type": "separator", "props": { "type": "default" }, "children": [] }, { "id": "4f51ce3d-e44c-4491-a56e-b3dc79a985be", "type": "heading", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left", "level": 1 }, "content": [ { "type": "text", "text": "STEP1. snap-mandatory + snap-x 를 통해 구현하기", "styles": {} } ], "children": [] }, { "id": "2081a8ee-8976-4808-8219-0382a9b7ab17", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "수평으로 스크롤되어야 하는 요소가 있다면 가장 먼저, 가장 쉽게 접근할 수 있는 방법인 것 같습니다.", "styles": {} } ], "children": [] }, { "id": "0bfebe07-3271-425f-b6c8-9ee70ec4434f", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "83c24ab9-090c-4bed-bb7f-c5c8858a5d73", "type": "procode", "props": { "type": "tsx", "data": "\n ...\n {RenderedItems}\n" }, "children": [] }, { "id": "064cde9f-2af5-4cfd-b965-8d5a4c6c84a6", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "8fb4fe79-279d-44de-aa60-59d5f3e8b076", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이때의 문제점은 터치 액션을 통한 스크롤은 자연스럽게 이루어지지만 마우스에 대한 이벤트를 통한 스크롤은 ", "styles": {} }, { "type": "text", "text": "불가능", "styles": { "bold": true } }, { "type": "text", "text": "하다는 것인데요.", "styles": {} } ], "children": [] }, { "id": "61ee92cd-47ac-4702-b633-5169033e04b1", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "886daf63-5a34-4b42-8a46-6bea8bf5a03e", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "마우스 휠 이벤트를 인터셉트 하여 자식 컴포넌트에서 소비하는 방식으로 해결할 수도 있지만, 개인적으로는 휠을 내리며 페이지를 탐색하는 과정에서 자식 컴포넌트로 인해 덜컥 멈춰버리는 것은 사용 경험을 해치는 요소라고 생각합니다.", "styles": {} } ], "children": [] }, { "id": "a3e16397-1292-4282-8b8c-6e191e5f1d6f", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "861188c0-d0ac-4c16-81e5-fcf76a95f0b8", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "또한", "styles": {} }, { "type": "text", "text": " 반응형 웹", "styles": { "bold": true } }, { "type": "text", "text": "이라면 사용자의 ", "styles": {} }, { "type": "text", "text": "터치", "styles": { "bold": true } }, { "type": "text", "text": "와 ", "styles": {} }, { "type": "text", "text": "마우스", "styles": { "bold": true } }, { "type": "text", "text": "를 통한 경험이 유사하도록 고려해야 한다고 생각합니다.", "styles": {} } ], "children": [] }, { "id": "6b5c315b-3b1f-4f76-99c5-b35c8855d070", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "5cea705b-70db-4d81-b385-452543bf0128", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "그렇기 때문에 터치로 화면을 끌어 스크롤하는 경험과 유사하도록 마우스를 누른 상태로 움직이는 형태로 스크롤 할 수 있도록 하려고 합니다.", "styles": {} } ], "children": [] }, { "id": "6a1a6089-fef0-4833-8880-721b163b73d5", "type": "separator", "props": { "type": "default" }, "children": [] }, { "id": "6cee74d6-23b8-4223-9616-fcd0cbd73f68", "type": "heading", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left", "level": 1 }, "content": [ { "type": "text", "text": "STEP2. Grabbing 이벤트를 통해 수평 스크롤 하기", "styles": {} } ], "children": [] }, { "id": "73ef6e90-5523-4f90-9996-f969dd8bde8e", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "단순하게 onClick 이벤트를 통해 리스트를 수평으로 스크롤 해보도록 하겠습니다.", "styles": {} } ], "children": [] }, { "id": "9615d985-35f0-4be0-be00-d18fd38a8e20", "type": "image", "props": { "backgroundColor": "default", "textAlignment": "center", "name": "https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fa21dd205-3918-495e-8881-a8ab9df55b02%2F652a0902-90f0-4a5b-804c-f5404f293381%2F%25E1%2584%2592%25E1%2585%25AA%25E1%2584%2586%25E1%2585%25A7%25E1%2586%25AB_%25E1%2584%2580%25E1%2585%25B5%25E1%2584%2585%25E1%2585%25A9%25E1%2586%25A8_2024-10-22_%25E1%2584%258B%25E1%2585%25A9%25E1%2584%2592%25E1%2585%25AE_3.03.54.gif?table=block&id=127eae65-a96f-806f-bd94-ee1169c647a9&spaceId=a21dd205-3918-495e-8881-a8ab9df55b02&userId=&cache=v2", "url": "https://common-sheet-da1.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fa21dd205-3918-495e-8881-a8ab9df55b02%2F652a0902-90f0-4a5b-804c-f5404f293381%2F%25E1%2584%2592%25E1%2585%25AA%25E1%2584%2586%25E1%2585%25A7%25E1%2586%25AB_%25E1%2584%2580%25E1%2585%25B5%25E1%2584%2585%25E1%2585%25A9%25E1%2586%25A8_2024-10-22_%25E1%2584%258B%25E1%2585%25A9%25E1%2584%2592%25E1%2585%25AE_3.03.54.gif?table=block&id=127eae65-a96f-806f-bd94-ee1169c647a9&spaceId=a21dd205-3918-495e-8881-a8ab9df55b02&userId=&cache=v2", "caption": "", "showPreview": true, "previewWidth": 512 }, "children": [] }, { "id": "5b8b805e-071a-40b6-83fd-5dbf041bda23", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "6c3a2f2f-5b1b-4550-9c16-fc487cc39834", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "스크롤을 위한 마우스 이벤트와 Item 컴포넌트의 클릭 이벤트가 중복 발생하게 되어 스크롤이 끝나자마자 Item 컴포넌트의 클릭 로직이 실행되어버립니다.", "styles": {} } ], "children": [] }, { "id": "2f1f5df6-1beb-400b-b320-74552135c6aa", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "4a1a4e60-5d8b-4ad0-a762-e29c67efa505", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "Grabbing 상태를 ", "styles": {} }, { "type": "text", "text": "추적", "styles": { "bold": true } }, { "type": "text", "text": "하여 이벤트의 중복 발생을 막을 필요가 있습니다!", "styles": {} } ], "children": [] }, { "id": "c76237bc-1366-433e-aab8-d9b2495a0af8", "type": "separator", "props": { "type": "default" }, "children": [] }, { "id": "98976135-28e5-4667-a2b4-dae38e14b572", "type": "heading", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left", "level": 1 }, "content": [ { "type": "text", "text": "STEP3. useHorizontalScroll hook 구현하기", "styles": {} } ], "children": [] }, { "id": "1dc5892a-2990-404e-ae20-43e5625ec483", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "Grabbing", "styles": { "bold": true } }, { "type": "text", "text": " 여부를 ", "styles": {} }, { "type": "text", "text": "추적", "styles": { "bold": true } }, { "type": "text", "text": "하고 요소를 ", "styles": {} }, { "type": "text", "text": "수평으로 스크롤", "styles": { "bold": true } }, { "type": "text", "text": "하기 위해 다음의 일부 ", "styles": {} }, { "type": "text", "text": "요구 사항", "styles": { "bold": true } }, { "type": "text", "text": "을 만족하는 ", "styles": {} }, { "type": "text", "text": "useHorizontalScroll", "styles": { "backgroundColor": "blue" } }, { "type": "text", "text": " hook 을 구현해보도록 하겠습니다.", "styles": {} } ], "children": [ { "id": "482be9b9-46ca-4ca4-ab05-78f252965bea", "type": "bulletListItem", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "스크롤 대상이 되는 요소의 \bref 를 전달받아 hook 내에서 스크롤을 진행해야 함.", "styles": {} } ], "children": [] }, { "id": "d7fc8f24-2a47-45b0-8e31-e8da4067c5ad", "type": "bulletListItem", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "스크롤, 즉 ", "styles": {} }, { "type": "text", "text": "Grabbing", "styles": { "bold": true } }, { "type": "text", "text": " 여부를 해당 hook 을 소비하는 컴포넌트에게 상태를 전달할 수 있어야 함.", "styles": {} } ], "children": [] }, { "id": "5baa916a-aecb-48e0-8f73-fdbcc69253ce", "type": "bulletListItem", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "Grabbing", "styles": { "bold": true } }, { "type": "text", "text": " 중인 경우 하위 요소의 ", "styles": {} }, { "type": "text", "text": "클릭을 막아야 함.", "styles": { "bold": true } } ], "children": [] }, { "id": "fc261402-abc7-492a-ac97-771b49be6fde", "type": "bulletListItem", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "네이티브 디바이스 등의 터치는 아주 ", "styles": {} }, { "type": "text", "text": "미세한 움직임", "styles": { "bold": true } }, { "type": "text", "text": "이 있을 수 있기 때문에 미세한 움직임에 한해서 하위 요소의 클릭을 ", "styles": {} }, { "type": "text", "text": "허용", "styles": { "bold": true } }, { "type": "text", "text": "해야 함.", "styles": {} } ], "children": [] } ] }, { "id": "99791a37-667a-4d2b-b397-e62438727d6b", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "7f8b28e6-019b-41ad-bc74-a2b72b4bbce3", "type": "procode", "props": { "type": "typescript", "data": "export const useHorizontalScroll = (\n ref: React.RefObject,\n sensitive: number = 10,\n) => {\n ...\n}" }, "children": [] }, { "id": "a90c60f5-bdd6-44f3-8273-d42c1b35f0fe", "type": "bulletListItem", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "스크롤 대상이 되는 요소의 ref 를 받아와 DOM 요소를 제어할 수 있도록 합니다.", "styles": {} } ], "children": [] }, { "id": "15edd436-f324-4c8c-95e8-f6b353cd90f1", "type": "bulletListItem", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "sensitive props 를 통해 어느정도까지의 움직임을 미세한 움직임으로 간주할 것인지 설정할 수 있도록 합니다.", "styles": {} } ], "children": [] }, { "id": "47ab247b-6361-4dfa-83d5-89d85070b169", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "be1f2b05-f515-4b54-9912-5e25ff349729", "type": "procode", "props": { "type": "typescript", "data": "const frame = useRef(0);\nconst pos = useRef({ left: 0, x: 0 }); \n// reft - scroll 이벤트가 시작될 때 기존에 진행된 스크롤 정도\n// x - 스크롤을 시작할 때의 mouse event 의 clientX 좌표\n\nconst [isGrabbing, setIsGrabbing] = useState(false);\n// isGrabbing 이 갱신되기 직전의 상태\nconst currentGrabbingState = useRef(isGrabbing);" }, "children": [] }, { "id": "6eebe558-441e-46d4-ba9b-8cfde261b905", "type": "bulletListItem", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "requestAnimationFrame", "styles": { "backgroundColor": "blue" } }, { "type": "text", "text": " 가 전달하는 frame 정보를 기록하기 위한 참조값을 사용합니다.", "styles": {} } ], "children": [] }, { "id": "02604d64-5ba5-47ed-8083-ab130eff2fc6", "type": "bulletListItem", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "scroll 이벤트가 시작될 때의 ", "styles": {} }, { "type": "text", "text": "초기 값", "styles": { "bold": true } }, { "type": "text", "text": "을 기억하기 위한 pos 참조값을 사용합니다.", "styles": {} } ], "children": [] }, { "id": "c8a64c46-fef5-4a76-acc2-47121b189487", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "8cec2339-e0ba-4b2f-a2f4-b907cb629365", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "매개변수와 기본 상태를 설정했습니다!", "styles": {} } ], "children": [] }, { "id": "4a61b638-8914-4134-b7a1-106ff1f1473e", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이제는 마우스 이벤트를 처리할 시간입니다.", "styles": {} } ], "children": [] }, { "id": "cb68892f-f623-42c2-ace1-5ce3fab0b2e3", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "mouseDown - mouseMove - mouseUp 이벤트들의 연계를 통해 Grabbing 을 구현합니다.", "styles": {} } ], "children": [] }, { "id": "2c80c8cd-dc40-42ba-8a6c-78264e6f7154", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "c17d2003-3a28-4428-a544-366f7417c668", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "mouseDown", "styles": { "bold": true } } ], "children": [] }, { "id": "74cd86f9-7e99-4dff-908e-d9c8cbabe02c", "type": "procode", "props": { "type": "typescript", "data": "const mouseDownHandler = (event: MouseEvent) => {\n event.stopPropagation();\n\n if (!ref.current) return;\n // non-Scrollable \n if (ref.current.scrollWidth === ref.current.clientWidth) return; // #1\n\n // #2\n ref.current.style.cursor = \"grabbing\";\n ref.current.style.userSelect = \"none\";\n\n pos.current = { left: ref.current.scrollLeft, x: event.clientX }; // #3\n\n document.addEventListener(\"mousemove\", mouseMoveHandler);\n document.addEventListener(\"mouseup\", mouseUpHandler);\n};" }, "children": [ { "id": "1ab2912f-061f-4f73-97dd-8d068df706e0", "type": "bulletListItem", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "#1 스크롤 대상의 scrollwidth 와 clientWidth 를 대조하여 두 값이 같다면 스크롤할 만큼 요소가 크지 않음을 의미하기 때문에 불필요한 이벤트 처리를 하지 않도록 ", "styles": {} }, { "type": "text", "text": "기저조건", "styles": { "bold": true } }, { "type": "text", "text": "을 설정합니다.", "styles": {} } ], "children": [] }, { "id": "45b77e6c-5352-4523-a2e8-1df6e6de0d22", "type": "bulletListItem", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "#2 Grabbing 중임을 알릴 수 있도록 적절한 스타일링을 합니다.", "styles": {} } ], "children": [] }, { "id": "7aff2724-dd38-42c6-9e8b-5705498065b3", "type": "bulletListItem", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "#3 마우스가 클릭되었으므로 앞으로 마우스 이동 여부를 확인할 수 있도록 초기 pos 값을 지정해줍니다.", "styles": {} } ], "children": [] } ] }, { "id": "b37db4c9-25c0-483a-9027-c8f726d62911", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "96f51765-2d66-43d7-9d2e-781af41a5f2b", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "mouseMove", "styles": { "bold": true } } ], "children": [] }, { "id": "1463e179-aaba-4a7b-aa8a-8b51bc57df7f", "type": "procode", "props": { "type": "typescript", "data": "const mouseMoveHandler = (event: MouseEvent) => {\n event.stopPropagation();\n\n if (!ref.current) return;\n\n const dx = event.clientX - pos.current.x; // #1\n\n // #2\n if (Math.abs(dx) > sensitive && !currentGrabbingState.current) {\n currentGrabbingState.current = true; // #3\n setIsGrabbing(true);\n }\n\n // #4\n frame.current = requestAnimationFrame(() => {\n if (!ref.current) return;\n\n ref.current.scrollLeft = pos.current.left - dx;\n });\n};" }, "children": [ { "id": "fa48a2f4-c8a8-4911-9493-7cf9fc4635b4", "type": "bulletListItem", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "#1 마우스가 어느정도 이동했는지에 대한 deltaX 를 구합니다.", "styles": {} } ], "children": [] }, { "id": "91e46719-88d1-47cc-a5ca-83eee446c1db", "type": "bulletListItem", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "#2 앞서 이야기한 미세한 움직임에 대한 처리를 위한 기저조건을 설정합니다. \ndeltaX 의 절대값과 sensitive 을 비교하여 deltaX 가 충분히 이동한 경우 grabbing 중임을 명시합니다.", "styles": {} } ], "children": [] }, { "id": "4c3c898a-59ac-498b-99e4-c3fa5b949033", "type": "bulletListItem", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "#3 또한 불필요한 상태 갱신을 막기 위해 이미 grabbing 상태인지를 비교합니다.", "styles": {} } ], "children": [] }, { "id": "acba1cf1-4459-43cf-94c8-e55c5a5ff240", "type": "bulletListItem", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "#4 그후 ", "styles": {} }, { "type": "text", "text": "requestAnimationFrame", "styles": { "backgroundColor": "blue" } }, { "type": "text", "text": " 를 통해 스크롤에 따른 요소의 이동을 처리해줍니다.", "styles": {} } ], "children": [] } ] }, { "id": "9c2c6089-9862-4e73-956e-e7dc111ea867", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "cf1f1661-5cdf-49fa-bd2b-8582807882b7", "type": "callout", "props": { "textColor": "default", "textAlignment": "left", "type": "default" }, "content": [ { "type": "text", "text": "requestAnimationFram", "styles": { "bold": true } }, { "type": "text", "text": " ", "styles": {} }, { "type": "text", "text": "API", "styles": { "bold": true } }, { "type": "text", "text": " 를 사용하는 이유\n\n", "styles": {} }, { "type": "text", "text": "렌더링 최적화\n", "styles": { "bold": true } }, { "type": "text", "text": "브라우저, 나아가 모니터의 주사율에 맞추어 내부 콜백을 실행하므로 불필요한 리렌더링이 발생하지 않게 되어 렌더링을 최적화 할 수 있습니다.\n\n", "styles": {} }, { "type": "text", "text": "부드러운 스크롤\n", "styles": { "bold": true } }, { "type": "text", "text": "프레임 단위로 스크롤 위치를 갱신하도록 함으로써 스크롤의 효과가 부드럽게 이어지도록 합니다.", "styles": {} } ], "children": [] }, { "id": "318d9c06-c7d1-43a5-a9eb-d6c2165aea90", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "9bdd7077-c17d-46cd-b548-09a0579456e7", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "mouseUp", "styles": { "bold": true } } ], "children": [] }, { "id": "c1bbf823-e615-45cd-a6ca-7182017b0aa9", "type": "procode", "props": { "type": "typescript", "data": "const mouseUpHandler = (event: MouseEvent) => {\n event.stopPropagation();\n\n if (!ref.current) return;\n\n if (currentGrabbingState.current) { // #1\n setTimeout(() => { // #2\n currentGrabbingState.current = false;\n setIsGrabbing(false);\n }, 1);\n }\n\n ref.current.style.cursor = \"auto\";\n ref.current.style.removeProperty(\"user-select\");\n\n document.removeEventListener(\"mousemove\", mouseMoveHandler);\n document.removeEventListener(\"mouseup\", mouseUpHandler);\n\n cancelAnimationFrame(frame.current);\n};" }, "children": [ { "id": "2b0d82a0-189d-4c85-9ecf-a71d2ab45f16", "type": "bulletListItem", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "#1 Grabbing 중이였다면 Grabbing 여부를 false 로 변경함으로써 Grabbing 이 끝났음을 알립니다.", "styles": {} } ], "children": [] }, { "id": "247e1101-0c31-480c-b03b-8e69c767bc62", "type": "bulletListItem", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "#2 mouseUp 과 동시에 Grabbing 여부를 갱신하지 않도록 setTimeout 을 통해 갱신 로직을 ", "styles": {} }, { "type": "text", "text": "macroQueue", "styles": { "bold": true } }, { "type": "text", "text": " 에서 처리하도록 미룹니다. \n이를 통해 mouseUp 과 동시 하위 요소의 클릭이 될 수도 있는 문제를 방지합니다.", "styles": {} } ], "children": [] } ] }, { "id": "54600d20-3211-4d24-a880-3276eac5585c", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "0318cbad-84f7-4cec-b889-da09befc1853", "type": "procode", "props": { "type": "typescript", "data": "return isGrabbing;" }, "children": [] }, { "id": "9d57af61-70b4-4b3d-a290-a17474c6b218", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "useHorizontalScroll", "styles": { "backgroundColor": "blue" } }, { "type": "text", "text": " hook 은 isGrabbing state 를 반환함으로써 해당 hook 을 사용하는 컴포넌트가 수평으로 스크롤 중인지에 대한 여부를 알 수 있도록 합니다.", "styles": {} } ], "children": [] }, { "id": "47e811b6-6777-4332-8743-3c510f4d0e3f", "type": "separator", "props": { "type": "default" }, "children": [] }, { "id": "19d1277d-e9f3-4af1-9cb9-31036993f71e", "type": "heading", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left", "level": 1 }, "content": [ { "type": "text", "text": "STEP4. useHorizontalScroll 적용하기", "styles": {} } ], "children": [] }, { "id": "208a623f-e49c-4c91-9987-ce2da924c7db", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이제 List 컴포넌트는 수평 스크롤 여부를 알 수 있게 되었습니다.", "styles": {} } ], "children": [] }, { "id": "e3b1447c-b7fd-45e2-9148-dbbc142565ba", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "그러므로 List 컴포넌트의 Item 들이 수평 스크롤 중인 경우 클릭 되지 않도록 해줍니다.", "styles": {} } ], "children": [] }, { "id": "cc644510-15d8-4daf-b98f-4e2dd98353dc", "type": "procode", "props": { "type": "tsx", "data": "export const List = ({\nrenderer?: () => JSX.Element[] | undefined;\n ...\n}) => {\n const listRef = useRef(null);\n const isGrabbing = useHorizontalScroll(listRef);\n\n const RenderedItems = renderer?.();\n\n return (\n

\n ...\n \n {RenderedItems?.map(item => {\n return React.cloneElement(item, {\n clickBlocking: isGrabbing,\n });\n })}\n \n

\n );\n};" }, "children": [] }, { "id": "d3bb83c6-8d19-4bdd-b7f1-d80d3f78cee9", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "646b22b7-ec42-4f4a-a255-2add362be802", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "RenderedItems 로 생성된 자식 컴포넌트들을 ", "styles": {} }, { "type": "text", "text": "복제", "styles": { "bold": true } }, { "type": "text", "text": "하면서 isGrabbing 을 props 로 전달해줍니다.", "styles": {} } ], "children": [] }, { "id": "0510ac12-0f20-4e93-9f50-fa86a0893069", "type": "procode", "props": { "type": "tsx", "data": " {RenderedItems?.map(item => {\n return React.cloneElement(item, {\n clickBlocking: isGrabbing,\n });\n })}" }, "children": [] }, { "id": "1b74cc4b-bc27-41d8-b6a0-6e58e680e003", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "9af4a1da-d947-4a33-9314-021d625f91b0", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "Item 컴포넌트는 props 로 받은 isGrabbing 값을 통해 click 이벤트의 콜백 처리를 무효화 합니다.", "styles": {} } ], "children": [] }, { "id": "7566c9ad-7026-4d40-8dcb-b99a134d9c73", "type": "procode", "props": { "type": "tsx", "data": "const Item = ({ \n clickBlocking,\n ...\n}) => {\n const handleClick = () => {\n if (clickBlocking) return;\n\n onClick?.();\n };\n\n \n return (\n ...\n );\n};\n\nexport default Item;" }, "children": [] }, { "id": "b15b324a-1b5c-4cbf-842d-70792533f7fa", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "76e15bd2-4622-4805-bb68-2c732b0a5b9a", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "자 이제 마우스의 끌기를 통해 수평 스크롤을 할 수 있게 되었습니다.", "styles": {} } ], "children": [] }, { "id": "962635dd-24a0-4322-9aae-ef5a2637ad20", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "또한 수평 스크롤 중에 하위 아이템들의 클릭 이벤트를 막을 수 있습니다.", "styles": {} } ], "children": [] }, { "id": "536aa82f-38ef-4cd8-b158-20aeac545796", "type": "image", "props": { "backgroundColor": "default", "textAlignment": "center", "name": "https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fa21dd205-3918-495e-8881-a8ab9df55b02%2Fb8f16c59-7399-4647-b278-21a95fccfc7d%2F%25E1%2584%2592%25E1%2585%25AA%25E1%2584%2586%25E1%2585%25A7%25E1%2586%25AB_%25E1%2584%2580%25E1%2585%25B5%25E1%2584%2585%25E1%2585%25A9%25E1%2586%25A8_2024-10-22_%25E1%2584%258B%25E1%2585%25A9%25E1%2584%2592%25E1%2585%25AE_4.00.42.gif?table=block&id=127eae65-a96f-80b6-b839-c68d0f4f6df3&spaceId=a21dd205-3918-495e-8881-a8ab9df55b02&userId=&cache=v2", "url": "https://common-sheet-da1.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fa21dd205-3918-495e-8881-a8ab9df55b02%2Fb8f16c59-7399-4647-b278-21a95fccfc7d%2F%25E1%2584%2592%25E1%2585%25AA%25E1%2584%2586%25E1%2585%25A7%25E1%2586%25AB_%25E1%2584%2580%25E1%2585%25B5%25E1%2584%2585%25E1%2585%25A9%25E1%2586%25A8_2024-10-22_%25E1%2584%258B%25E1%2585%25A9%25E1%2584%2592%25E1%2585%25AE_4.00.42.gif?table=block&id=127eae65-a96f-80b6-b839-c68d0f4f6df3&spaceId=a21dd205-3918-495e-8881-a8ab9df55b02&userId=&cache=v2", "caption": "", "showPreview": true, "previewWidth": 512 }, "children": [] }, { "id": "ac4f69a4-8d6a-4e05-adde-d7b595e4a36a", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "a5f2fe36-d53a-4b91-bf0a-86e59a51a653", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "하지만 몇가지 ", "styles": {} }, { "type": "text", "text": "문제", "styles": { "bold": true } }, { "type": "text", "text": "가 있습니다.", "styles": {} } ], "children": [] }, { "id": "8720fcf3-af39-4606-841e-5689ccd090b9", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "바로 isGrabbing 상태 변경에 따라 List 컴포넌트 뿐만이 아니라 Item 컴포넌트까지 모두 ", "styles": {} }, { "type": "text", "text": "리렌더링 ", "styles": { "bold": true } }, { "type": "text", "text": "된다는 것입니다.", "styles": {} } ], "children": [] }, { "id": "8f050fe4-4e58-419e-a2d0-ed652287da44", "type": "nextImage", "props": { "backgroundColor": "default", "textAlignment": "left", "name": "https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fa21dd205-3918-495e-8881-a8ab9df55b02%2F96f8a454-b455-41c8-88dd-5ad8fc5bd38b%2F%25E1%2584%2586%25E1%2585%25A6%25E1%2584%2586%25E1%2585%25A9%25E1%2584%258C%25E1%2585%25A5%25E1%2586%25AB.png?table=block&id=127eae65-a96f-8073-b6a0-f7f74975a6f6&spaceId=a21dd205-3918-495e-8881-a8ab9df55b02&width=1790&userId=&cache=v2", "url": "https://common-sheet-da1.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fa21dd205-3918-495e-8881-a8ab9df55b02%2F96f8a454-b455-41c8-88dd-5ad8fc5bd38b%2F%25E1%2584%2586%25E1%2585%25A6%25E1%2584%2586%25E1%2585%25A9%25E1%2584%258C%25E1%2585%25A5%25E1%2586%25AB.png?table=block&id=127eae65-a96f-8073-b6a0-f7f74975a6f6&spaceId=a21dd205-3918-495e-8881-a8ab9df55b02&width=1790&userId=&cache=v2", "caption": "", "showPreview": true, "previewWidth": 0 }, "children": [] }, { "id": "22ec6013-8cc0-4b96-bc7f-9684c41b8455", "type": "nextImage", "props": { "backgroundColor": "default", "textAlignment": "left", "name": "https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fa21dd205-3918-495e-8881-a8ab9df55b02%2Faf411103-071a-4c87-a10a-0d52a207016c%2F%25E1%2584%2586%25E1%2585%25A6%25E1%2584%2586%25E1%2585%25A9%25E1%2584%258C%25E1%2585%25A5%25E1%2586%25AB%25E1%2584%258B%25E1%2585%25A1%25E1%2584%258B%25E1%2585%25B5%25E1%2584%2590%25E1%2585%25A6%25E1%2586%25B7.png?table=block&id=127eae65-a96f-80e0-a0d2-fc9bab1b8452&spaceId=a21dd205-3918-495e-8881-a8ab9df55b02&width=1790&userId=&cache=v2", "url": "https://common-sheet-da1.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fa21dd205-3918-495e-8881-a8ab9df55b02%2Faf411103-071a-4c87-a10a-0d52a207016c%2F%25E1%2584%2586%25E1%2585%25A6%25E1%2584%2586%25E1%2585%25A9%25E1%2584%258C%25E1%2585%25A5%25E1%2586%25AB%25E1%2584%258B%25E1%2585%25A1%25E1%2584%258B%25E1%2585%25B5%25E1%2584%2590%25E1%2585%25A6%25E1%2586%25B7.png?table=block&id=127eae65-a96f-80e0-a0d2-fc9bab1b8452&spaceId=a21dd205-3918-495e-8881-a8ab9df55b02&width=1790&userId=&cache=v2", "caption": "", "showPreview": true, "previewWidth": 0 }, "children": [] }, { "id": "324afbbc-df1c-41fb-b2bd-e07d67fbe6a2", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "Grabbing 이 false - true - false 로 바뀌는 과정에서 ", "styles": {} }, { "type": "text", "text": "리렌더링", "styles": { "bold": true } }, { "type": "text", "text": "이 발생합니다.", "styles": {} } ], "children": [] }, { "id": "b4769945-3ac9-4cff-8e05-2c46ca1ea6a1", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이때 Item 컴포넌트도 여러 번 ", "styles": {} }, { "type": "text", "text": "리렌더링", "styles": { "bold": true } }, { "type": "text", "text": "됩니다.", "styles": {} } ], "children": [] }, { "id": "034a1221-b3cd-4856-b966-6f87a0889d73", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "40489536-f9ff-4f17-8486-215ee8f78968", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "리렌더링 되는 Item 컴포넌트의 수가 적다면 매우 사소한 문제이고 최적화를 굳이 할 필요가 없습니다.", "styles": {} } ], "children": [] }, { "id": "46f99784-836c-41f7-b045-6480374569d8", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "f7088cdc-bdea-425f-a0a1-c868460c5d9f", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "하지만 렌더링되는 Item 수가 처음부터 매우 많거나, 스크롤이 끝에 닿아 더 많은 Item 을 API 를 통해 내려받는 등 Item 의 수가 증가하는 형태라면 어떻게 될까요?", "styles": {} } ], "children": [] }, { "id": "629a3d10-2e8a-4416-93eb-dbc2c7c8586f", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "5ce86fc1-2535-494f-ad9b-c99c8921f145", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "분명 리렌더링에 대한 코스트를", "styles": {} }, { "type": "text", "text": " 유의미하게 증가", "styles": { "bold": true } }, { "type": "text", "text": "시킬 수 있는 요인이 될 것입니다.", "styles": {} } ], "children": [] }, { "id": "78225eff-9ed5-4475-b3a0-1fd0699c01e7", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "9178c861-f409-4d91-889c-ac3fcc0465fa", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "또한 Item 컴포넌트는 불필요할 수도 있는 clickBlocking 이라는 props 를 받아야 합니다.", "styles": {} } ], "children": [] }, { "id": "c2b6afbb-26fd-44df-847e-9fb05aa64658", "type": "separator", "props": { "type": "default" }, "children": [] }, { "id": "4777da2d-6020-4514-b013-f5d04f3c1394", "type": "heading", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left", "level": 1 }, "content": [ { "type": "text", "text": "STEP5. 간단하지만 효과적인 방법으로 ", "styles": {} } ], "children": [] }, { "id": "2ec8d2f8-1fcf-49c8-8515-72623e8f60f4", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이를 해결할 수 있는 가장 간단하면서도 효과적인 방법이 무엇이 있을까요...?", "styles": {} } ], "children": [] }, { "id": "02cb17c5-8288-4d27-8def-95adb89640dc", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "저는 정말 간단하게 화면 위로 ", "styles": {} }, { "type": "text", "text": "보이지 않는 막", "styles": { "bold": true } }, { "type": "text", "text": "을 씌우는게 아닐까 생각했습니다.", "styles": {} } ], "children": [] }, { "id": "2639b7cb-69bd-4cc3-967f-6ba62f565316", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "e4623beb-7796-416b-9715-2cae1df6cafc", "type": "procode", "props": { "type": "tsx", "data": "export const List = ({\nrenderer?: () => JSX.Element[] | undefined;\n ...\n}) => {\n const listRef = useRef(null);\n const isGrabbing = useHorizontalScroll(listRef);\n\n const RenderedItems = useMemo(() => renderer?.(), [renderer]);\n\n return (\n

\n ...\n \n {RenderedItems}\n {isGrabbing && (\n

\n )}\n 혹은 \n

\n );\n};" }, "children": [] }, { "id": "2f943654-e03a-42e5-b3d8-a641c08145c4", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "37666487-c502-4380-b6ee-d88226a8f5ce", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "Item 에게 isGrabbing 을 전달하여 개별 Item 에서 클릭을 무효화하는 것이 아니라 화면 위로 보이지 않는 막을 씌움으로써 전파된 ", "styles": {} }, { "type": "text", "text": "클릭 이벤트를 막에 해당하는 요소가 소비", "styles": { "bold": true } }, { "type": "text", "text": "시켜버리게 하는 방식입니다.", "styles": {} } ], "children": [] }, { "id": "e8eca5fe-9da3-4ee0-9bb9-0cabb31a6439", "type": "image", "props": { "backgroundColor": "default", "textAlignment": "center", "name": "https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fa21dd205-3918-495e-8881-a8ab9df55b02%2F274e0f43-4dc8-43f7-9d60-d2f1aa8b8f6d%2F%25E1%2584%2592%25E1%2585%25AA%25E1%2584%2586%25E1%2585%25A7%25E1%2586%25AB_%25E1%2584%2580%25E1%2585%25B5%25E1%2584%2585%25E1%2585%25A9%25E1%2586%25A8_2024-10-22_%25E1%2584%258B%25E1%2585%25A9%25E1%2584%2592%25E1%2585%25AE_4.14.17.gif?table=block&id=127eae65-a96f-8034-a5d6-f17790921f73&spaceId=a21dd205-3918-495e-8881-a8ab9df55b02&userId=&cache=v2", "url": "https://common-sheet-da1.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fa21dd205-3918-495e-8881-a8ab9df55b02%2F274e0f43-4dc8-43f7-9d60-d2f1aa8b8f6d%2F%25E1%2584%2592%25E1%2585%25AA%25E1%2584%2586%25E1%2585%25A7%25E1%2586%25AB_%25E1%2584%2580%25E1%2585%25B5%25E1%2584%2585%25E1%2585%25A9%25E1%2586%25A8_2024-10-22_%25E1%2584%258B%25E1%2585%25A9%25E1%2584%2592%25E1%2585%25AE_4.14.17.gif?table=block&id=127eae65-a96f-8034-a5d6-f17790921f73&spaceId=a21dd205-3918-495e-8881-a8ab9df55b02&userId=&cache=v2", "caption": "", "showPreview": true, "previewWidth": 512 }, "children": [] }, { "id": "25ca3967-e488-41b1-827a-db5f61265889", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "cd6b518d-3ceb-4265-911f-03b2497ef968", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이는 isGrabbing 을 Item 컴포넌트에게 전달할 필요가 없으므로 ", "styles": {} }, { "type": "text", "text": "RenderedItems", "styles": { "bold": true } }, { "type": "text", "text": " 함수의 결과를 ", "styles": {} }, { "type": "text", "text": "메모이제이션", "styles": { "bold": true } }, { "type": "text", "text": " 해버릴 수 있습니다.", "styles": {} } ], "children": [] }, { "id": "43751dd5-c8b0-4d93-acfd-06c0120503c8", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "083a18ec-ab38-4171-84ed-543b8bbad4ac", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이를 통해 isGrabbing 상대가 변함에 따라 리렌더링 되는 List 컴포넌트와 별개로 Item 컴포넌트가 ", "styles": {} }, { "type": "text", "text": "리렌더링되는 것을 방지", "styles": { "bold": true } }, { "type": "text", "text": "할 수 있게 되었습니다.", "styles": {} } ], "children": [] }, { "id": "ab2afb5c-e589-4dd4-a357-fb6038362a8b", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "de94c4b3-95ad-40f3-9f87-316939e3cdc7", "type": "nextImage", "props": { "backgroundColor": "default", "textAlignment": "left", "name": "https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fa21dd205-3918-495e-8881-a8ab9df55b02%2F82212b98-696a-4b26-88c1-7d1b9ff71128%2F%25E1%2584%2586%25E1%2585%25A6%25E1%2584%2586%25E1%2585%25A9%25E1%2584%2592%25E1%2585%25AE.png?table=block&id=127eae65-a96f-8062-8148-dcce25f84a6b&spaceId=a21dd205-3918-495e-8881-a8ab9df55b02&width=1790&userId=&cache=v2", "url": "https://common-sheet-da1.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fa21dd205-3918-495e-8881-a8ab9df55b02%2F82212b98-696a-4b26-88c1-7d1b9ff71128%2F%25E1%2584%2586%25E1%2585%25A6%25E1%2584%2586%25E1%2585%25A9%25E1%2584%2592%25E1%2585%25AE.png?table=block&id=127eae65-a96f-8062-8148-dcce25f84a6b&spaceId=a21dd205-3918-495e-8881-a8ab9df55b02&width=1790&userId=&cache=v2", "caption": "", "showPreview": true, "previewWidth": 0 }, "children": [] }, { "id": "c72fc536-e77c-40cb-894b-b455634c30c5", "type": "nextImage", "props": { "backgroundColor": "default", "textAlignment": "left", "name": "https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fa21dd205-3918-495e-8881-a8ab9df55b02%2Fb4a2ff3d-c789-4082-a803-376f83ef81a9%2F%25E1%2584%2586%25E1%2585%25A6%25E1%2584%2586%25E1%2585%25A9%25E1%2584%2592%25E1%2585%25AE%25E1%2584%258B%25E1%2585%25A1%25E1%2584%258B%25E1%2585%25B5%25E1%2584%2590%25E1%2585%25A6%25E1%2586%25B7.png?table=block&id=127eae65-a96f-800f-b079-f7d26e59e9bd&spaceId=a21dd205-3918-495e-8881-a8ab9df55b02&width=1790&userId=&cache=v2", "url": "https://common-sheet-da1.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fa21dd205-3918-495e-8881-a8ab9df55b02%2Fb4a2ff3d-c789-4082-a803-376f83ef81a9%2F%25E1%2584%2586%25E1%2585%25A6%25E1%2584%2586%25E1%2585%25A9%25E1%2584%2592%25E1%2585%25AE%25E1%2584%258B%25E1%2585%25A1%25E1%2584%258B%25E1%2585%25B5%25E1%2584%2590%25E1%2585%25A6%25E1%2586%25B7.png?table=block&id=127eae65-a96f-800f-b079-f7d26e59e9bd&spaceId=a21dd205-3918-495e-8881-a8ab9df55b02&width=1790&userId=&cache=v2", "caption": "", "showPreview": true, "previewWidth": 0 }, "children": [] }, { "id": "23908e1a-38e1-4e83-8ef6-cb0ab41ce249", "type": "separator", "props": { "type": "default" }, "children": [] }, { "id": "116d9cdb-2750-4f0b-a88d-ff0839522c6a", "type": "heading", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left", "level": 1 }, "content": [ { "type": "text", "text": "마치며", "styles": {} } ], "children": [] }, { "id": "48975bfb-794c-4bdb-80df-34d16e7c2368", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "더 좋은 방법이 있다면 알려주세용!", "styles": {} } ], "children": [] }, { "id": "6b5401d4-4ad5-4708-81c1-d6b756570c30", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "90150fa2-a236-462b-b489-11a7cd96fc65", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "전체 코드는 다음과 같습니다.", "styles": {} } ], "children": [] }, { "id": "e07cea1f-49d8-43d2-9d50-ec691736369e", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "link", "href": "https://github.com/OhWonJu/playce-client/blob/dev/src/hooks/useHorizontalScroll.ts", "content": [ { "type": "text", "text": "useHorizontal Hook", "styles": { "bold": true, "textColor": "blue" } } ] } ], "children": [] }, { "id": "a7cb9ebd-1be4-420b-8a91-7615b9ee4f37", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "link", "href": "https://github.com/OhWonJu/playce-client/blob/dev/src/components/lists/MusicList.tsx", "content": [ { "type": "text", "text": "List Component", "styles": { "bold": true, "textColor": "blue" } } ] } ], "children": [] }, { "id": "772e7576-7aec-45ed-9520-b6ef49eec055", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "link", "href": "https://github.com/OhWonJu/playce-client/blob/dev/src/components/cards/MusicCard.tsx", "content": [ { "type": "text", "text": "Item Component", "styles": { "bold": true, "textColor": "blue" } } ] } ], "children": [] }, { "id": "8ad09a47-054f-439d-8416-e499b2394ffc", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "link", "href": "https://github.com/OhWonJu/playce-client/blob/dev/src/pages/(home)/(routes)/home/Page.tsx", "content": [ { "type": "text", "text": "Parent Component", "styles": { "bold": true, "textColor": "blue" } } ] } ], "children": [] }, { "id": "7e19c8ab-5ab7-4a3a-8b93-22a5c0f2e488", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] } ]

React Horizontal Scroll 구현하기