[ { "id": "01f9538e-2ad0-40cd-aa6b-ad2221b685f0", "type": "heading", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left", "level": 1 }, "content": [ { "type": "text", "text": "들어가기 앞서", "styles": {} } ], "children": [] }, { "id": "b191123a-cb96-4a86-8875-53e58fec7c83", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "pio-essential", "styles": { "bold": true } }, { "type": "text", "text": " 은 ", "styles": {} }, { "type": "text", "text": "재사용하기 편리한 UI 컴포넌트", "styles": { "bold": true } }, { "type": "text", "text": "를 사용자에게 제공하는것을 ", "styles": {} }, { "type": "text", "text": "중요한 가치", "styles": { "bold": true } }, { "type": "text", "text": "로 여기고 있습니다.", "styles": {} } ], "children": [] }, { "id": "8442c9d0-27a3-4b82-89cd-2948932e0671", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "그렇기 때문에 UI 컴포넌트는 무엇보다 사용자가 원하는 스타일을 ", "styles": {} }, { "type": "text", "text": "쉽게 적용", "styles": { "bold": true } }, { "type": "text", "text": "할 수 있어야 합니다.", "styles": {} } ], "children": [] }, { "id": "e701d30d-a2e0-4726-8306-aabe447fa989", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "1dd5d267-1a79-4475-9278-fa49f1cb44aa", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이를 위해 ", "styles": {} }, { "type": "text", "text": "Headless Component", "styles": { "bold": true } }, { "type": "text", "text": " 를 구현하는 방법 중 하나인 ", "styles": {} }, { "type": "text", "text": "Compound Components 패턴", "styles": { "bold": true } }, { "type": "text", "text": "을 이용해 UI 컴포넌트를 구현하는 과정을 담아보려 합니다.", "styles": {} } ], "children": [] }, { "id": "a8a157a8-19b9-4b17-8849-bfffab60b3e1", "type": "separator", "props": { "type": "default" }, "children": [] }, { "id": "11fc7b88-24cc-4c1f-b8f2-85cac6a9060f", "type": "heading", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left", "level": 1 }, "content": [ { "type": "text", "text": "Compound Components 패턴?", "styles": {} } ], "children": [] }, { "id": "8b12b91d-af55-4fd4-9fac-006ee6c8a682", "type": "callout", "props": { "textColor": "default", "textAlignment": "left", "type": "info" }, "content": [ { "type": "text", "text": "Compound\n", "styles": { "bold": true } }, { "type": "text", "text": " ", "styles": {} }, { "type": "text", "text": "명사 ", "styles": { "bold": true } }, { "type": "text", "text": "복합체\n", "styles": {} }, { "type": "text", "text": " 명사 ", "styles": { "bold": true } }, { "type": "text", "text": " 화합물, 혼합물", "styles": {} } ], "children": [] }, { "id": "c3038d0d-8816-4725-a633-f37db297f4a1", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "합성이라는 뜻과 Components 라는 복수를 사용하는 것에서 알 수 있듯,", "styles": {} }, { "type": "text", "text": " Compound Components 패턴", "styles": { "bold": true } }, { "type": "text", "text": "은 여러 컴포넌트가 서로 ", "styles": {} }, { "type": "text", "text": "합성", "styles": { "bold": true } }, { "type": "text", "text": "되어 있다는 것을 의미 합니다.", "styles": {} } ], "children": [] }, { "id": "7d3af4bb-745c-4aa5-8ffc-c152c99671d3", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "3f619fe1-d063-44b4-b087-899bfee520e8", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "Compound Components 패턴", "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": "하여 하나의 완결된 UI 컴포넌트로서 동작하는 형태라고 볼 수 있습니다.", "styles": {} } ], "children": [] }, { "id": "8e4c91ce-418a-4e94-9dcc-d69d07dd6ed3", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "8ca14a09-60d3-440e-952c-eb1d8df79613", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "그렇다면 ", "styles": {} }, { "type": "text", "text": "왜 굳이 하나의 컴포넌트를 작은 단위로 분리하는 것일까요?", "styles": { "backgroundColor": "gray" } } ], "children": [] }, { "id": "e869f503-0945-40c2-8f9a-48369d3191f7", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "Tab 컴포넌트가 있다고 생각해볼게요.", "styles": {} } ], "children": [] }, { "id": "05e09883-f643-4b8a-875d-c98e325b8686", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "Tab 컴포넌트는 적어도 Tab 을 선택하는 영역과 선택된 Tab 의 정보를 보여주는 영역이 필요하며, 선택된 Tab 이 무엇인지 나타내는 상태와 선택을 위한 액션을 실행하는 로직을 가지고 있어야 합니다.", "styles": {} } ], "children": [] }, { "id": "72b5ee4c-fea2-48f1-9e1c-01e373542b5b", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "c2eb1c58-582b-4061-b872-f99bbc5c7b56", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이러한 Tab 을 하나의 컴포넌트로 구현했을 때, 컴포넌트의 크기가 비대해질 수 있고, 영역들의 배치를 마음대로 변경하기 어려울 수 있습니다.", "styles": {} } ], "children": [] }, { "id": "56377afb-f8c1-4df4-a6b1-f81e3e0f8fe0", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "7a8ade95-03d2-4763-814f-07732f07e1ae", "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": {} }, { "type": "text", "text": "조합", "styles": { "bold": true } }, { "type": "text", "text": "하여 ", "styles": {} }, { "type": "text", "text": "단일 컴포넌트보다 자유도가 높은 형태", "styles": { "bold": true } }, { "type": "text", "text": "를 만들기 위해 ", "styles": {} }, { "type": "text", "text": "Compound Components 패턴", "styles": { "bold": true } }, { "type": "text", "text": "을 사용합니다. ", "styles": {} } ], "children": [] }, { "id": "345c4ed5-d786-404f-8c54-56e24cf6a366", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "70372bfb-64f4-4174-a2e7-79ba96a34d53", "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": "7b8e4416-5b06-44d4-8a54-52d64cfb592c", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "불필요한 props drilling 을 피하기 위해 일반적으로", "styles": {} }, { "type": "text", "text": " Compound Components 패턴", "styles": { "bold": true } }, { "type": "text", "text": "은 전역 상태 관리 기능을 필요로 합니다.", "styles": {} } ], "children": [] }, { "id": "b7101774-c761-45f9-8a32-fcad9201e7d4", "type": "separator", "props": { "type": "default" }, "children": [] }, { "id": "879ee3c5-53d5-414f-80af-1e3daf2c1e69", "type": "heading", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left", "level": 1 }, "content": [ { "type": "text", "text": "Context API 는 전역 상태 관리 API 가 아니라고 생각합니다.", "styles": {} } ], "children": [] }, { "id": "3f7428f8-6802-43af-9d32-69177b7866c0", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "뜬금 없이 Context API 는 전역 상태 관리를 위한 기능이 아니라고???", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 생각하실 수 있을 것 같은데요...🥲", "styles": {} } ], "children": [] }, { "id": "1265d9ab-481e-41b2-8b3e-83e0f3f719d1", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "7fa17eb2-2320-45af-bcd4-1401a67c3d80", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "많은 정보에서", "styles": {} }, { "type": "text", "text": " Compound Components", "styles": { "bold": true } }, { "type": "text", "text": " 가 ", "styles": {} }, { "type": "text", "text": "ContextAPI", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 의 좋은 예시라고 말하고 있으며, ", "styles": {} }, { "type": "text", "text": "ContextAPI", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 는 우리가 익숙하게 사용하는 ", "styles": {} }, { "type": "text", "text": "Redux", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": ", ", "styles": {} }, { "type": "text", "text": "Zustand", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 등의 전역 상태 관리 라이브러리와 ", "styles": {} }, { "type": "text", "text": "대응", "styles": { "bold": true } }, { "type": "text", "text": " 되는 기능으로 소개되는 경우가 많습니다.", "styles": {} } ], "children": [] }, { "id": "3ed286c2-66c7-463a-8263-723d0bea4fb6", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "fcb500bd-6ec1-4f5e-b70b-7f3c5c8f6af4", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "물론 저도 ", "styles": {} }, { "type": "text", "text": "Compound Components", "styles": { "bold": true } }, { "type": "text", "text": " 가 ", "styles": {} }, { "type": "text", "text": "ContextAPI", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 를 사용하는 대표적인 예시라는 것에 동의하지만,", "styles": {} } ], "children": [] }, { "id": "18ca0395-a099-44d9-b54d-a91d622afdbc", "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": "을 가지고 있습니다.\n\n무분별하게 props drilling 을 피하기 위해 ", "styles": {} }, { "type": "text", "text": "아 ContextAPI 를 전역 상태 관리를 위해 사용하면 되겠구나!", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 라고 접근하는 것보다, 조금 더 세분화된 경우에 ", "styles": {} }, { "type": "text", "text": "ContextAPI", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 를 사용하는 것이 올바르지 않을까? 라는 생각을 공유하고 싶어서 해당 주제를 꺼내게 되었습니다.", "styles": {} } ], "children": [] }, { "id": "af345c15-8281-4b8a-b5a1-2351c5520502", "type": "heading", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left", "level": 2 }, "content": [ { "type": "text", "text": "Context 라는 뜻", "styles": {} } ], "children": [] }, { "id": "4e80519e-b588-4cf2-9047-d1f5ff134e60", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "그럼 저는 발칙하게도 왜 ", "styles": {} }, { "type": "text", "text": "ContextAPI", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 를 전역 상태 관리 기능이 아니라고 생각하는 걸까요?\n", "styles": {} } ], "children": [] }, { "id": "720916c2-06f5-4675-9940-71c5256d2cec", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "Context", "styles": { "bold": true } }, { "type": "text", "text": " 는 ", "styles": {} }, { "type": "text", "text": "맥락", "styles": { "bold": true, "italic": true } }, { "type": "text", "text": " 이라는 뜻을 가지고 있습니다.", "styles": {} } ], "children": [] }, { "id": "a3cf6e2b-a0f1-42f5-ab47-062e760f1d0c", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "어떠한 글에서 ", "styles": {} }, { "type": "text", "text": "맥락", "styles": { "bold": true, "italic": true } }, { "type": "text", "text": "이 변하면, 그 글의 문장, 문단 혹은 전체 글이 수정된 것이 아니지만 글이 내포한 뜻이 변하게 됩니다.", "styles": {} } ], "children": [] }, { "id": "19fc10a2-947f-4b5f-a289-4338ea992c19", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "b920c03b-abd9-477e-a7c7-bb65232f4db5", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이처럼 ", "styles": {} }, { "type": "text", "text": "ContextAPI", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 의 ", "styles": {} }, { "type": "text", "text": "Provider", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 는 어떠한 ", "styles": {} }, { "type": "text", "text": "맥락을 제공하는 매체", "styles": { "bold": true } }, { "type": "text", "text": "이고, 이러한 맥락이 변하게 되면 ", "styles": {} }, { "type": "text", "text": "Provider", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 이하의 모든 자식 컴포넌트는 변경된 ", "styles": {} }, { "type": "text", "text": "맥락을 반영하기 위해 리렌더링", "styles": { "bold": true } }, { "type": "text", "text": " 됩니다.", "styles": {} } ], "children": [] }, { "id": "952f38bc-5a7e-40ec-80a7-0a09af1fc299", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "그렇기 때문에 React 팀에서는 ", "styles": {} }, { "type": "text", "text": "ContextAPI", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 라는 이름을 사용하는게 아닐까? 라는 생각을 합니다.", "styles": {} } ], "children": [] }, { "id": "288d9cfa-d012-4640-b504-ee268ab6d671", "type": "heading", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left", "level": 2 }, "content": [ { "type": "text", "text": "ContextAPI 의 단점, 사실은 의도된 기능...?", "styles": {} } ], "children": [] }, { "id": "5ca6556d-be8d-471e-80dc-7d219bc39443", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "앞서 말한 것 처럼 Context 가 바뀌게 되면 ", "styles": {} }, { "type": "text", "text": "Context.Provider", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 이하의 모든 자식 컴포넌트는 ", "styles": {} }, { "type": "text", "text": "리렌더링", "styles": { "bold": true } }, { "type": "text", "text": "됩니다.", "styles": {} } ], "children": [] }, { "id": "0785cef1-3732-42ae-b975-3aef69b524f0", "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": "3a5dd2b3-a4f4-44e1-8a15-60aadbaf92d4", "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": "71672c76-9dc5-4446-ae01-86205877213b", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "37884006-7389-4a50-af10-47e06419db13", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "하지만 ", "styles": {} }, { "type": "text", "text": "맥락", "styles": { "bold": true, "italic": true } }, { "type": "text", "text": "을 제공하는 API 라는 관점에서 바라보게 되면 이는 너무나도 ", "styles": {} }, { "type": "text", "text": "당연한 결과", "styles": { "bold": true } }, { "type": "text", "text": "입니다.", "styles": {} } ], "children": [] }, { "id": "409d631b-5993-4b3e-a412-00aad5c5b843", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "글에서 어느 순간 ", "styles": {} }, { "type": "text", "text": "맥락", "styles": { "bold": true, "italic": true } }, { "type": "text", "text": "이 달라지면 이전까지의 글은 그대로 이더라도 글 전체가 전달하는 메시지가 완전히 달라집니다.", "styles": {} } ], "children": [] }, { "id": "af0cebb7-3481-4c03-b45f-3b4f87ca5684", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이처럼 ", "styles": {} }, { "type": "text", "text": "Provider", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 가 제공하는 상태가 달라지면 ", "styles": {} }, { "type": "text", "text": "Provider", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 이하의 모든 컴포넌트는 해당 상태를 사용하고 있지 않더라도 ", "styles": {} }, { "type": "text", "text": "리렌더링 되며 변경된 맥락에 반응", "styles": { "bold": true } }, { "type": "text", "text": "해야 합니다.", "styles": {} } ], "children": [] }, { "id": "1d01d123-0645-4194-b6c3-6aa80a7ad2f7", "type": "heading", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left", "level": 2 }, "content": [ { "type": "text", "text": "ContextAPI 는 이런 경우에 사용하자!", "styles": {} } ], "children": [] }, { "id": "faefe939-e41b-4827-aead-812bce1b3e96", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "맥락", "styles": { "bold": true, "italic": true } }, { "type": "text", "text": "을 제공한다는 관점에서 ", "styles": {} }, { "type": "text", "text": "ContextAPI", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 를 대하게 되면, ", "styles": {} }, { "type": "text", "text": "ContextAPI", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 를 ", "styles": {} }, { "type": "text", "text": "사용해도 좋은 상황을 명확하게 구분", "styles": { "bold": true } }, { "type": "text", "text": "할 수 있게 됩니다.", "styles": {} } ], "children": [] }, { "id": "72abb895-c814-43c5-9fcc-da2d699680f1", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "f3dbd223-e818-40fc-a334-561b80be7df9", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "ContextAPI", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 가 제공하는 상태를 사용하지 않더라도 어떠한 ", "styles": {} }, { "type": "text", "text": "맥락의 영향권 내에 있는 경우", "styles": { "bold": true } }, { "type": "text", "text": "라면 ", "styles": {} }, { "type": "text", "text": "ContextAPI", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 를 사용하는 것이 좋은 선택지라고 생각합니다.\n\n몇 가지 예를 들어보며 감을 잡아보도록 할까요?", "styles": {} } ], "children": [] }, { "id": "56cc3b5e-4360-408f-aa8f-822b4798d5e6", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "651d8403-1fa5-4043-ba3a-ba343cfe1a42", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "로그인한 사용자의 정보를 담아 필요한 컴포넌트에게 전달해야한다면...?\n", "styles": { "bold": true } }, { "type": "text", "text": "물론 전역 상태 관리 라이브러리를 사용해 로그인한 사용자의 닉네임이나 아바타 등과 같은 정보를 관리할 수 있습니다.", "styles": {} } ], "children": [] }, { "id": "90a61eb7-f472-4c81-bdd5-dda868ff638f", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "또한 이러한 정보를 사용하는 영역만 리렌더링 되게 할 수 있겠죠.", "styles": {} } ], "children": [] }, { "id": "ff2465f1-d3ca-4dd3-b061-7df958529fd6", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "하지만 로그인된 사용자가 바뀌거나, 로그아웃을 한다는 것은 애플리케이션 전체 영역에 걸쳐 ", "styles": {} }, { "type": "text", "text": "맥락", "styles": { "bold": true, "italic": true } }, { "type": "text", "text": "이 바뀌었다는 것을 의미한다고 볼 수 있으므로 ", "styles": {} }, { "type": "text", "text": "ContextAPI", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 를 사용하여", "styles": {} }, { "type": "text", "text": " 애플리케이션 전체에 걸쳐 리렌더링을 유발", "styles": { "bold": true } }, { "type": "text", "text": "하는 것도 좋은 접근이 될 수 있습니다.", "styles": {} } ], "children": [] }, { "id": "c590e6c4-3d8e-468d-9ce9-59dfde7b5b71", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "df00e43d-dd5b-4e21-9a84-b32eb8d88969", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "애플리케이션의 테마가 바뀐다면...?", "styles": { "bold": true } } ], "children": [] }, { "id": "40c841f0-3cd3-4ea3-9845-f8e556ed109d", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "많은 애플리케이션은 라이트/다크 모드를 제공합니다.", "styles": {} } ], "children": [] }, { "id": "4d9e98c7-7661-4074-a585-2e4ef4e6c2e1", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이처럼 테마도 애플리케이션 전체 영역에 걸친 ", "styles": {} }, { "type": "text", "text": "맥락", "styles": { "bold": true, "italic": true } }, { "type": "text", "text": "이라고 볼 수 있습니다.", "styles": {} } ], "children": [] }, { "id": "932743db-1ce6-4108-b421-003fd6dc138c", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "aff78cbf-efc8-4452-b70d-497304f9ae2f", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "채팅방 ID 가 바뀐다면...?", "styles": { "bold": true } } ], "children": [] }, { "id": "b9403e27-aca7-4734-86d3-2a3fd39d7d95", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "특정 채팅방에 입장해 해당 채팅방에서 실시간으로 대화를 하는 기능이 있다면, 어느 영역에서 현재 채팅방의 ID 와 같이 채팅 소켓 연결을 위한 정보를 가지고 있어야 할 것 입니다.", "styles": {} } ], "children": [] }, { "id": "151940b6-2308-4811-8713-de48be1e4f4c", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이를 위해 전역 상태 관리 라이브러리를 사용할 수 있고, 전역 상태의 채팅방 ID 가 변경되면 채팅창만 해당 변경 사항을 반영하도록 할 수 있습니다.", "styles": {} } ], "children": [] }, { "id": "f6ce400c-979e-49ec-a0b6-2fc8dc946612", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "채팅방 ID 가 바뀐다면 채팅과 관련된 영역에 대한 ", "styles": {} }, { "type": "text", "text": "맥락", "styles": { "bold": true, "italic": true } }, { "type": "text", "text": "이 바뀌었다는 것을 의미한다고 볼 수 있고, 이러한 경우 ", "styles": {} }, { "type": "text", "text": "ContextAPI", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 를 사용하는 것도 좋은 방법이 될 수 있습니다.", "styles": {} } ], "children": [] }, { "id": "e339919f-dc4a-4f4b-af66-830104e06dba", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "center" }, "content": [ { "type": "text", "text": "ChatProvider -> ChatRoom -> ChatMessages/ChatInput", "styles": { "backgroundColor": "gray" } } ], "children": [] }, { "id": "cf4ac0b3-3a33-480c-a64c-3d06ddfbb2f6", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "center" }, "content": [ { "type": "text", "text": "채팅ID 가 바뀐 것에 직접적인 영향을 받지 않는 컴포넌트여도 맥락에 포함되므로 리렌더링", "styles": { "italic": true, "textColor": "gray" } } ], "children": [] }, { "id": "b3e497da-7734-423f-a115-e66f239fba9e", "type": "separator", "props": { "type": "default" }, "children": [] }, { "id": "7f5b647f-9769-442c-864f-b225e74d4736", "type": "heading", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left", "level": 1 }, "content": [ { "type": "text", "text": "pio-essential 의 Tab 컴포넌트", "styles": {} } ], "children": [] }, { "id": "bc94e78a-163d-4b32-a5b9-55ea39ba3cd4", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "Tab 컴포넌트도 ", "styles": {} }, { "type": "text", "text": "현재 선택한 Tab 이 무엇인가?", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 라는 ", "styles": {} }, { "type": "text", "text": "맥락", "styles": { "bold": true, "italic": true } }, { "type": "text", "text": "으로 접근할 수 있을 것 같습니다.", "styles": {} } ], "children": [] }, { "id": "0507b008-2009-4481-8f3b-a5b87af70ec3", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "좀 더 직관적인 케이스로써 현재 선택한 Tab 이라는 맥락이 바뀌면 Tab 컴포넌트의 모든 영역이 ", "styles": {} }, { "type": "text", "text": "맥락", "styles": { "bold": true, "italic": true } }, { "type": "text", "text": "의 직접적인 영향을 받게 됩니다.", "styles": {} } ], "children": [] }, { "id": "2e111c36-07fa-48a1-9a17-18c0efd3808e", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "d9a259ef-b5c3-46d8-b087-99c70e46d958", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "그렇기 때문에 pio-essential 의 Tab 컴포넌트는 ", "styles": {} }, { "type": "text", "text": "Compound Components 패턴", "styles": { "bold": true } }, { "type": "text", "text": "을 통해 구현되었으며, 하위 컴포넌트간의 ", "styles": {} }, { "type": "text", "text": "상태, 로직 공유", "styles": { "bold": true } }, { "type": "text", "text": "를 위해 ", "styles": {} }, { "type": "text", "text": "ContextAPI", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 를 사용합니다.", "styles": {} } ], "children": [] }, { "id": "242acf25-a0fb-42a1-a390-067df3b24ffd", "type": "heading", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left", "level": 2 }, "content": [ { "type": "text", "text": "공유 상태와 로직", "styles": {} } ], "children": [] }, { "id": "acfdc058-e2f3-41f8-a7c0-e47a1a7abbad", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "Tab 컴포넌트를 하위 컴포넌트로 나누기 전에 하위 컴포넌트들이 조합되어 하나의 UI 컴포넌트로 동작하게 하기 위한 공유 상태와 로직은 무엇일까요?", "styles": {} } ], "children": [] }, { "id": "94087401-2252-4df5-b83d-1ec8f0e1cb8d", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "ec65d04f-97e9-489c-aee8-50d88ee86b21", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "물론 더 많은 공유 상태와 로직이 있을 수 있지만 ", "styles": {} }, { "type": "text", "text": "현재 활성화 된 Tab 상태", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": ", ", "styles": {} }, { "type": "text", "text": "활성화된 Tab 을 변경하는 로직", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": "이 필수적인 요소일 것 같습니다.", "styles": {} } ], "children": [] }, { "id": "57b64dc8-1935-46c9-b34d-3bc1c91c61f8", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "저는 추가적으로 ", "styles": {} }, { "type": "text", "text": "이전에 활성화 되었던 Tab 상태", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": "를 더해 다음과 같은 상태와 로직을 ", "styles": {} }, { "type": "text", "text": "공유 요소", "styles": { "bold": true } }, { "type": "text", "text": "로 정했습니다.", "styles": {} } ], "children": [] }, { "id": "7eda4c13-747c-4326-a895-fad8ba5e738a", "type": "procode", "props": { "type": "tsx", "data": "export type TabContextType = {\n activeTab: number;\n prevActiveTab: number;\n setActiveTab: (index: number) => void;\n};" }, "children": [] }, { "id": "2438b91f-8fa9-44c6-8fad-9c8c74e1633e", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "0891e740-3c64-4aed-996f-27a885a500ef", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이러한 공유 요소를 하위 컴포넌트들이 사용할 수 있도록 ", "styles": {} }, { "type": "text", "text": "ContextAPI", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 를 사용해봅시다!", "styles": {} } ], "children": [] }, { "id": "15e21f20-707b-4848-8ac1-043dca3bbab8", "type": "procode", "props": { "type": "tsx", "data": "import { createContext, useContext } from \"react\";\n\nexport type TabContextType = {\n activeTab: number;\n prevActiveTab: number;\n setActiveTab: (index: number) => void;\n};\n\nexport const TabContext = createContext({\n activeTab: 0,\n prevActiveTab: 0,\n setActiveTab: () => {},\n});\n\nexport const useTabContext = () => useContext(TabContext);\nexport default TabContext;" }, "children": [] }, { "id": "8aa9db47-752b-43e3-ad9d-12d8c1b7a2dd", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "createContext", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 를 통해 Context 를 생성했습니다.", "styles": {} } ], "children": [] }, { "id": "db5b3185-0f35-4801-9328-171e304f39a9", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "그리고 Hook 처럼 사용할 수 있도록 ", "styles": {} }, { "type": "text", "text": "useContext", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 를 ", "styles": {} }, { "type": "text", "text": "useTabContext", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 라는 함수를 통해 호출 할 수 있도록 했습니다.", "styles": {} } ], "children": [] }, { "id": "dd2d6e05-e8e9-43b8-98db-55c3c38358dc", "type": "heading", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left", "level": 2 }, "content": [ { "type": "text", "text": "하위 컴포넌트로 분리하기", "styles": {} } ], "children": [] }, { "id": "a57bd918-6884-4ca7-a0d1-d3abae9f70bb", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "자 이제 공유 요소를 분리해냈습니다. ", "styles": {} } ], "children": [] }, { "id": "e7e1ba56-84ff-48e3-bc52-17c18f98510d", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "다음으로는 이러한 공유 요소들을 사용하는 하위 컴포넌트들을 분리해 봅시다.", "styles": {} } ], "children": [] }, { "id": "d3bdc670-1d27-4e7c-b4f8-b09483716405", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "92cc7879-125b-4c04-9009-10c73e5bee58", "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%2Fc49cbfbb-8f52-42bf-8d8e-e27ee0107497%2Fimage.png?table=block&id=162eae65-a96f-80a5-b49c-d9634509234c&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%2Fc49cbfbb-8f52-42bf-8d8e-e27ee0107497%2Fimage.png?table=block&id=162eae65-a96f-80a5-b49c-d9634509234c&spaceId=a21dd205-3918-495e-8881-a8ab9df55b02&width=2000&userId=&cache=v2", "caption": "", "showPreview": true, "previewWidth": 0 }, "children": [] }, { "id": "9a629f3d-238a-4c7e-9ee0-b92f1b87ac63", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "TabHeader", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": ", ", "styles": {} }, { "type": "text", "text": "TabSection", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 이라는 하위 컴포넌트로 나눌 수 있을 것 같습니다.", "styles": {} } ], "children": [] }, { "id": "90b03828-e929-4197-ae68-6c1faceeaee1", "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": "908d6920-d084-4a79-8f0a-461a90cec37a", "type": "heading", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left", "level": 3 }, "content": [ { "type": "text", "text": "TabProvider", "styles": {} } ], "children": [] }, { "id": "0b57a02a-2115-4b9a-aab2-cd21b6d8f11f", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "TabProvider", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 는 ", "styles": {} }, { "type": "text", "text": "메인 컴포넌트", "styles": { "bold": true } }, { "type": "text", "text": "입니다.", "styles": {} } ], "children": [] }, { "id": "99b5ecd9-c1c6-49b6-bc71-5bdb64fc7098", "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": "445476f7-a60a-43dc-9b1a-8ddd039d2522", "type": "procode", "props": { "type": "tsx", "data": "import React, { useImperativeHandle, useRef, useState } from \"react\";\n\nimport TabContext from \"./TabContext\";\n\ninterface TabProviderProps {\n defaultActiveTab?: number;\n children: React.ReactNode | React.ReactNode[];\n}\n\nexport const TabProvider = ({ children, defaultActiveTab = 0 }: TabProviderProps) => {\n const [activeTab, setActiveTab] = useState(defaultActiveTab);\n const prevActiveTab = useRef(activeTab);\n\n const handleSetActiveTab = (index: number) => {\n prevActiveTab.current = activeTab;\n setActiveTab(index);\n };\n\n return (\n \n {children}\n \n );\n};\n" }, "children": [] }, { "id": "e22e0002-df9f-4efe-ac1a-eedf100f5006", "type": "heading", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left", "level": 3 }, "content": [ { "type": "text", "text": "TabHeader", "styles": {} } ], "children": [] }, { "id": "436c1816-7428-41b1-a31f-f362cb8eb89e", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "TabHeader", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 컴포넌트는 Tab 목록을 나타내는 하위 컴포넌트입니다.\nTab 목록은 ", "styles": {} }, { "type": "text", "text": "children", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 으로 전달 받을 수 있도록 하여, 사용자가 Tab 목록에 원하는 스타일링을 가능하도록 했습니다.", "styles": {} } ], "children": [] }, { "id": "576268bc-5bd3-4fbc-a7db-362ac6a65bb5", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이때 문제는 상위 컴포넌트로부터 전달받은 ", "styles": {} }, { "type": "text", "text": "children", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 은 활성화된 Tab 을 변경하는 로직을 사용할 수 없다는 것인데요.", "styles": {} } ], "children": [] }, { "id": "9b438077-b790-4e32-9e93-50ebf28c6efa", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이를 해결하기 위해 ", "styles": {} }, { "type": "text", "text": "children", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 을 순회하며 래퍼를 붙여주는 방식을 사용했습니다.", "styles": {} } ], "children": [] }, { "id": "33640f98-94f0-48a4-af76-a7cb5e0e374f", "type": "procode", "props": { "type": "tsx", "data": "import React, { Children, isValidElement } from \"react\";\nimport { motion } from \"motion/react\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { useTabContext } from \"./TabContext\";\n\ninterface TabHeaderProps extends React.HTMLAttributes {\n className?: string;\n children: React.ReactNode[];\n}\n\nexport const TabHeader = ({ children, className, ...rest }: TabHeaderProps) => {\n const { activeTab, setActiveTab } = useTabContext();\n\n const childrenWithPropsWithChildWrapper = Children.toArray(children).map(\n (child, index) => {\n if (isValidElement(child)) {\n return (\n \n setActiveTab(index)}\n >\n {child}\n \n {index === activeTab ? (\n \n ) : null}\n \n );\n }\n return null;\n }\n );\n\n return (\n \n {childrenWithPropsWithChildWrapper}\n \n );\n};\n" }, "children": [] }, { "id": "9214f102-bf61-4c6e-9c0a-2cab5d42b773", "type": "heading", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left", "level": 3 }, "content": [ { "type": "text", "text": "TabSection", "styles": {} } ], "children": [] }, { "id": "849f0be0-9a09-4d97-8e88-3da2639b4b65", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "TabSection", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 은 활성화 된 Tab 에 대응하는 정보를 나타내는 \b", "styles": {} }, { "type": "text", "text": "child", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 를 래핑하는 하위 컴포넌트 입니다.", "styles": {} } ], "children": [] }, { "id": "e186c259-7edd-44b8-accd-7e194977f692", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "TabHeader", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 와 마찬가지로 ", "styles": {} }, { "type": "text", "text": "child", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 목록은 상위 컴포넌트로부터 전달 받게 됩니다.", "styles": {} } ], "children": [] }, { "id": "13c7b0be-c0fc-4d6a-99ea-cb5883addb09", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "또한 모든 ", "styles": {} }, { "type": "text", "text": "child", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 중 활성화 된 Tab 에 대응하는 ", "styles": {} }, { "type": "text", "text": "child", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 만을 렌더링 해야하기 때문에 다음과 같이 배열로 변환하는 과정을 거칩니다.", "styles": {} } ], "children": [] }, { "id": "77cb7eb2-85f1-472d-9b0f-b80b7a6f3a5a", "type": "procode", "props": { "type": "tsx", "data": "import React, { Children, CSSProperties, PropsWithChildren } from \"react\";\nimport { AnimatePresence, motion } from \"motion/react\";\n\nimport { useTabContext } from \"./TabContext\";\n\ninterface TabSectionProps {\n className?: string;\n useAnimation?: boolean;\n distance?: number;\n duration?: number;\n style?: CSSProperties;\n}\n\nexport const TabSection = ({\n children,\n className,\n useAnimation = true,\n distance = 10,\n duration = 0.2,\n style,\n}: PropsWithChildren) => {\n const { activeTab, prevActiveTab } = useTabContext();\n\n const childrenWithProps = Children.toArray(children);\n\n const animationProps = useAnimation\n ? {\n ...\n }\n : {};\n\n return (\n \n

\n \n {activeTab >= 0 && activeTab < childrenWithProps.length\n ? childrenWithProps[activeTab]\n : null}\n \n

\n \n );\n};" }, "children": [] }, { "id": "e8fb33ac-0db1-4355-82bd-51eca350934d", "type": "heading", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left", "level": 2 }, "content": [ { "type": "text", "text": "분리하니까 마음대로 조합할 수 있게 되었다!", "styles": {} } ], "children": [] }, { "id": "b4c8ea4e-3bf4-4f53-94c7-cf9758dc362e", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이렇게 Tab UI 컴포넌트를 ", "styles": {} }, { "type": "text", "text": "Compound Components 패턴", "styles": { "bold": true } }, { "type": "text", "text": "을 통해 구현했습니다.", "styles": {} } ], "children": [] }, { "id": "9ff7fdbb-76a6-4ad2-95b9-042bfb36a3ce", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "Compound Components 패턴", "styles": { "bold": true } }, { "type": "text", "text": "을 통해 UI 컴포넌트를 구현하면 하위 컴포넌트를", "styles": {} }, { "type": "text", "text": " 원하는 순서로 조합", "styles": { "bold": true } }, { "type": "text", "text": "할 수 있게 됩니다.", "styles": {} } ], "children": [] }, { "id": "b056a8ac-5949-4064-a627-e36672b31313", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "12583a37-e5d7-4ebd-9b03-793d6e641d9b", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "TabHeader", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 를 상단에 위치시킬 수도 있지만", "styles": {} } ], "children": [] }, { "id": "732e9e8f-c64e-417e-a192-e7cd8f8430ce", "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%2F8584c310-d502-4b56-b12e-c493d76e8166%2Fimage.png?table=block&id=162eae65-a96f-8042-a7cf-f2df7a1adc2b&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%2F8584c310-d502-4b56-b12e-c493d76e8166%2Fimage.png?table=block&id=162eae65-a96f-8042-a7cf-f2df7a1adc2b&spaceId=a21dd205-3918-495e-8881-a8ab9df55b02&width=2000&userId=&cache=v2", "caption": "", "showPreview": true, "previewWidth": 0 }, "children": [] }, { "id": "56cafcb5-fb52-4f6a-83d1-0766136440c7", "type": "procode", "props": { "type": "tsx", "data": "

\n \n \n 1\n 2\n 3\n \n \n

tab1

tab2

tab3

\n \n \n

" }, "children": [] }, { "id": "a8ed281c-4d34-455d-b748-cdc4034326f9", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "7f0c3867-fd4e-4216-81dd-9266f049a0ab", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "다음과 같이 하단에 위치시킬 수도 있습니다.", "styles": {} } ], "children": [] }, { "id": "47d653df-33b9-47a0-9be0-9742331970ae", "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%2Fc6357f9d-c490-446a-b193-3335ca5ba422%2Fimage.png?table=block&id=162eae65-a96f-8007-b8e4-e3da64ed2561&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%2Fc6357f9d-c490-446a-b193-3335ca5ba422%2Fimage.png?table=block&id=162eae65-a96f-8007-b8e4-e3da64ed2561&spaceId=a21dd205-3918-495e-8881-a8ab9df55b02&width=2000&userId=&cache=v2", "caption": "", "showPreview": true, "previewWidth": 0 }, "children": [] }, { "id": "353abd89-3e3f-4488-994f-43aeeb07fc0c", "type": "procode", "props": { "type": "tsx", "data": "

\n \n \n

tab1

tab2

tab3

\n \n \n 1\n 2\n 3\n \n \n

" }, "children": [] }, { "id": "ad7b6e62-0ab2-4fc1-9ca6-9dacbac96f96", "type": "heading", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left", "level": 2 }, "content": [ { "type": "text", "text": "Provider 영역 밖으로 기능 내보내기", "styles": {} } ], "children": [] }, { "id": "79148a51-77ea-4c5b-9f39-709d11a9eb00", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "active Tab2 는 무엇일까요?", "styles": {} } ], "children": [] }, { "id": "3330db58-997f-4ad7-b462-5fa75124a64e", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "Tab 컴포넌트의 ", "styles": {} }, { "type": "text", "text": "TabHeader", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 를 통해 활성화 탭을 제어하는 것만으로도 충분할 수 있지만, ", "styles": {} }, { "type": "text", "text": "TabProvider", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 외부 영역에서 Tab 을 조작해야 하는 요구사항이 발생할 수도 있습니다.", "styles": {} } ], "children": [] }, { "id": "6dec751f-6056-4440-a6ab-a02e204c01ab", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "776fca30-c2ce-487e-b678-54a2f1dee63e", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "forwardRef", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 와 ", "styles": {} }, { "type": "text", "text": "useImperativeHandle", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 훅을 사용하면 이러한 요구사항을 만족할 수 있을 것 같습니다.", "styles": {} } ], "children": [] }, { "id": "bdc9b45e-f17a-4237-8ea6-b2711d4c706b", "type": "procode", "props": { "type": "tsx", "data": "\nexport type TabRef = {\n activeTab: (index: number) => void;\n};\n\nexport const TabProvider = React.forwardRef(\n ({ children, defaultActiveTab = 0 }, ref) => {\n ...\n\n const handleSetActiveTab = (index: number) => {\n prevActiveTab.current = activeTab;\n setActiveTab(index);\n };\n\n useImperativeHandle(\n ref,\n () => {\n return {\n activeTab(index: number) {\n handleSetActiveTab(index);\n },\n };\n },\n []\n );\n\n return (\n \n {children}\n \n );\n }\n);\n" }, "children": [] }, { "id": "3f3e2d2e-669f-4240-b865-a3fc9edfdc87", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "TabProvider", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 가 상위 컴포넌트로부터 ", "styles": {} }, { "type": "text", "text": "ref", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 를 전달 받을 수 있도록 ", "styles": {} }, { "type": "text", "text": "forwardRef", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 를 사용합니다.", "styles": {} } ], "children": [] }, { "id": "341661fa-2789-4e5e-a9ab-5279fb2e055a", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "그리고 해당 ", "styles": {} }, { "type": "text", "text": "ref", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 에 상위 컴포넌트가 참조하여 사용할 수 있는 함수를 ", "styles": {} }, { "type": "text", "text": "useImperativeHandle", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 을 통해 전달 합니다.", "styles": {} } ], "children": [] }, { "id": "58449099-22e7-4da4-b0c1-e773b9e3e5ba", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "34ee7c8e-325f-491d-8219-752287aef9bd", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "그러면 다음과 같이 ", "styles": {} }, { "type": "text", "text": "TabProvider", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 외부에서도 Tab 을 제어할 수 있습니다!", "styles": {} } ], "children": [] }, { "id": "24f45d04-0c8f-473c-859b-ca28dbbc4d68", "type": "procode", "props": { "type": "tsx", "data": "export const TabDemo = () => {\n const tabRef = useRef(null);\n\n const activeTab = (index: number) => {\n tabRef.current?.activeTab(index);\n };\n\n return (\n

\n \n ...\n \n\n

\n activeTab(1)}\n className=\"p-2 border rounded-md\"\n >\n active Tab2\n \n

\n );\n};\n" }, "children": [] }, { "id": "fa42aebf-7c56-4a4c-a306-948cd91151a6", "type": "separator", "props": { "type": "default" }, "children": [] }, { "id": "31ad7ae2-8bd6-4e62-bc4c-6e635ad36ae4", "type": "heading", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left", "level": 1 }, "content": [ { "type": "text", "text": "마치며", "styles": {} } ], "children": [] }, { "id": "4daec348-cde2-44be-9921-c1b62f0258f9", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "Compound Components 패턴", "styles": { "bold": true } }, { "type": "text", "text": "을 사용해보면서, ", "styles": {} }, { "type": "text", "text": "ContextAPI", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 의 의도는 무엇인지에 대해 생각해보는 시간을 가질 수 있었습니다.", "styles": {} } ], "children": [] }, { "id": "a0c4ef27-fca8-43e1-aa7a-64927560d2e8", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이를 통해 ", "styles": {} }, { "type": "text", "text": "ContextAPI", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 를 단지 상태 관리를 위한 기능으로써, 또 그러한 기능으로써 가지는 단점으로 인해 기피해야 하는 기능이 아님을 짚어볼 수 있었습니다.", "styles": {} } ], "children": [] }, { "id": "9e515652-e799-4c49-a693-ce58e2508559", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "88382d39-d4e3-43be-94b8-54f3698cfcba", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이를 통해 ", "styles": {} }, { "type": "text", "text": "ContextAPI", "styles": { "backgroundColor": "brown" } }, { "type": "text", "text": " 를 적절한 시점에 적극적으로 사용할 수 있는 인사이트를 얻을 수 있었습니다!", "styles": {} } ], "children": [] }, { "id": "9f4eec28-b00e-42f6-b493-1d40e2a62c20", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] } ]

pio-essential 개발 여정 - Compound Components Pattern