[ { "id": "70ce8cca-7a29-4867-b1d4-69edc9e96aef", "type": "nextImage", "props": { "backgroundColor": "default", "textAlignment": "center", "name": "https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fa21dd205-3918-495e-8881-a8ab9df55b02%2F7a57de80-f50c-472c-8cd1-f02ba070ee46%2F%25E1%2584%2583%25E1%2585%25A1%25E1%2584%258B%25E1%2585%25AE%25E1%2586%25AB%25E1%2584%2585%25E1%2585%25A9%25E1%2584%2583%25E1%2585%25B3.png?table=block&id=077283cb-2997-4d95-9010-38004e0b349a&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%2F7a57de80-f50c-472c-8cd1-f02ba070ee46%2F%25E1%2584%2583%25E1%2585%25A1%25E1%2584%258B%25E1%2585%25AE%25E1%2586%25AB%25E1%2584%2585%25E1%2585%25A9%25E1%2584%2583%25E1%2585%25B3.png?table=block&id=077283cb-2997-4d95-9010-38004e0b349a&spaceId=a21dd205-3918-495e-8881-a8ab9df55b02&width=2000&userId=&cache=v2", "caption": "", "showPreview": true, "previewWidth": 0 }, "children": [] }, { "id": "132c929f-6a6b-4661-b2d9-3f1cf4f477ca", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "fd741548-06ce-4450-ba77-3ebddfbf5f32", "type": "callout", "props": { "textColor": "default", "textAlignment": "left", "type": "default" }, "content": [ { "type": "text", "text": "Goodbye, useEffect - David Khourshid\n", "styles": { "bold": true } }, { "type": "link", "href": "https://www.youtube.com/watch?v=bGzanfKVFeU", "content": [ { "type": "text", "text": "https://www.youtube.com/watch?v=bGzanfKVFeU", "styles": { "textColor": "blue" } } ] } ], "children": [] }, { "id": "55034ba5-30ae-4a8a-bc4e-d5f2b99b4dd8", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "해당 레시피는 위 영상과 ", "styles": {} }, { "type": "link", "href": "https://react.dev/learn/you-might-not-need-an-effect", "content": [ { "type": "text", "text": "React.dev", "styles": { "textColor": "blue" } } ] }, { "type": "text", "text": " 공식문서를 바탕으로 개인적인 경험을 정리한 글입니다.", "styles": {} } ], "children": [] }, { "id": "e0c88a91-4d39-4648-b004-aac72a90894d", "type": "separator", "props": { "type": "default" }, "children": [] }, { "id": "c2db73c9-4c7b-4641-8cae-03b2f64dfa24", "type": "heading", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left", "level": 1 }, "content": [ { "type": "text", "text": "useEffect?", "styles": {} } ], "children": [] }, { "id": "c85654c7-0bdc-4bab-8ac6-904a0eceadf0", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "Functional component", "styles": { "bold": true } }, { "type": "text", "text": " 에서는 ", "styles": {} }, { "type": "text", "text": "라이프사이클 처리를 위한 기능", "styles": { "bold": true } }, { "type": "text", "text": "이 존재하지 않습니다.", "styles": {} } ], "children": [] }, { "id": "b004f95b-541b-41d2-b977-2c5102620d4b", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "저는 단순하게", "styles": {} }, { "type": "text", "text": " useEffect", "styles": { "bold": true } }, { "type": "text", "text": " 가 ", "styles": {} }, { "type": "text", "text": "라이프사이클 관련 처리를 도와주는 Hook", "styles": { "bold": true } }, { "type": "text", "text": " 으로 알고 있었습니다.", "styles": {} } ], "children": [] }, { "id": "7a2b8533-007e-4644-9421-df459ced6cb9", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "705d4142-e306-4400-9a09-3ff5b8bebcbf", "type": "procode", "props": { "type": "tsx", "data": "const [inputMode, setInputMode] = useState(false);\n\nuseEffect(() => {\n setInputMode(true); // #1 setup func\n \n return () => setInputMode(false); // #2 cleanup func\n}, [someReactiveValue]);\n\n#1. 컴포넌트가 최초렌더링, 리렌더링 과정을 거치며 마운트될 때\n#2. 컴포넌트에 대한 마운트가 해제 될 때" }, "children": [] }, { "id": "f1a7a627-cd9c-4474-aa61-c939b0ecfeca", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "그렇기 때문에 위와 같이 컴포넌트의 라이프사이클에 걸쳐 어떠한 액션을 제어하는 용도로 useEffect 를 주로 사용했습니다. ", "styles": {} } ], "children": [] }, { "id": "9f934e9e-90d5-4827-8313-ccea746e6e6e", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "6b5499d1-813a-434d-9cdb-82b5fd3034fb", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "즉 Reactive Value 가 변경되어 컴포넌트가 리렌더링 될 때 어떠한 로직들을 실행하기 위해서 useEffect 를 덕테이프와 같은 느낌으로 무분별하게 사용했습니다.", "styles": {} } ], "children": [] }, { "id": "6341915e-0216-49cf-9631-e70b7c1828cb", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "8568303c-1289-4e7b-af9b-df6e087db4b6", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "앞서 소개한 영상에서는 useEffect 를 이러한 용도로 사용하는 것은 ", "styles": {} }, { "type": "text", "text": "useEffect 의 구조나 동작", "styles": { "bold": true } }, { "type": "text", "text": "에 어울리지 않는 사용 방식이라고 알려주고 있습니다.", "styles": {} } ], "children": [] }, { "id": "94bedc78-927f-4bbf-8967-77df13e486d4", "type": "heading", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left", "level": 2 }, "content": [ { "type": "text", "text": "useEffect 는 외부 시스템과 동기화 하기 위해 사용한다?", "styles": {} } ], "children": [] }, { "id": "ce6ffecb-48f3-4f6a-b85e-173bf41f4ccf", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "외부 시스템과의 동기화라...🤔 이게 무엇을 의미하는 것 일까요? 우선 왜 useEffect 는 ", "styles": {} }, { "type": "text", "text": "외부 시스템과의 동기화", "styles": { "bold": true } }, { "type": "text", "text": "를 위해서만 사용해야 할까요? ", "styles": {} } ], "children": [] }, { "id": "539a895b-da53-4931-8005-543198d93da2", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "6c0d2d5e-33ee-46d2-a5dd-11ffed74c4f8", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "우리가 개발하고 있는 애플리케이션 혹은 컴포넌트에 기능이 많아질수록 필연적으로 우리가 다루어야할 ", "styles": {} }, { "type": "text", "text": "Reactive", "styles": { "bold": true } }, { "type": "text", "text": " ", "styles": {} }, { "type": "text", "text": "value", "styles": { "bold": true } }, { "type": "text", "text": " 도 늘어나게 될 것 입니다. ", "styles": {} } ], "children": [] }, { "id": "7a634987-7a46-4509-b931-20bbbadb51e5", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이러한 Reactive value 에 의존하는 useEffect 가 있다면 당연히 해당 useEffect 가 가지고 있는 ", "styles": {} }, { "type": "text", "text": "deps", "styles": { "bold": true } }, { "type": "text", "text": " 의 길이도 길어질 것 입니다. ", "styles": {} } ], "children": [] }, { "id": "cce2b2c1-5aaa-4753-bed3-83777a30dd16", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "물론 useEffect 의 수도 늘어나게 되겠죠. 이는 useEffect 에 대한 ", "styles": {} }, { "type": "text", "text": "제어나 동작의 추적을 어렵게", "styles": { "bold": true } }, { "type": "text", "text": " 만들 것입니다. ", "styles": {} } ], "children": [] }, { "id": "59abbc67-82ca-441b-8d8b-2cf9057b6d68", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "c6256e55-84aa-4371-b752-7828111089af", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "그렇기 때문에 useEffect 를 덕테이프와 같이 어떠한 경우에도 사용하는 Hook 이 아닌, 컴포넌트와 외부 소스 간의 ", "styles": {} }, { "type": "text", "text": "synchronization", "styles": { "bold": true } }, { "type": "text", "text": ", 즉 ", "styles": {} }, { "type": "text", "text": "동기화", "styles": { "bold": true } }, { "type": "text", "text": "를 위해 사용하는 것이 올바릅니다.", "styles": {} } ], "children": [] }, { "id": "bd59d45f-e9b9-4882-bf43-7e1dfd96a074", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "ae7a69c1-8304-4590-98f6-3bb3812e584a", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "왜 Effect Hook 을 ", "styles": {} }, { "type": "text", "text": "외부 시스템과의 동기화", "styles": { "bold": true } }, { "type": "text", "text": "에 특정지어 사용해야 하는 걸까요?\n이를 이해하기 위해 ", "styles": {} }, { "type": "text", "text": "strict mode ", "styles": { "bold": true } }, { "type": "text", "text": "에서", "styles": {} }, { "type": "text", "text": " useEffect", "styles": { "bold": true } }, { "type": "text", "text": " 가 어떻게 ", "styles": {} }, { "type": "text", "text": "동작", "styles": { "bold": true } }, { "type": "text", "text": " 하는지에 대해 생각해 볼 필요가 있습니다.", "styles": {} } ], "children": [] }, { "id": "cac4f296-c874-4194-8a16-ac9c05d5d89b", "type": "heading", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left", "level": 3 }, "content": [ { "type": "text", "text": "strict mode 에서 React 의 빌트인 Hook", "styles": {} } ], "children": [] }, { "id": "494bb611-65de-40c9-b279-a2c0f0362b1c", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "strict mode 에서 React 의 빌트인 Hook 들은 ", "styles": {} }, { "type": "text", "text": "두 번씩", "styles": { "bold": true } }, { "type": "text", "text": " 동작합니다. ", "styles": {} } ], "children": [] }, { "id": "89c1cb1f-16cf-43ea-82d9-59c3014359af", "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": "091edea6-e56f-4cf4-81d9-673d92b2f7b6", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "75b54728-c9d2-44c4-b427-be1b1bf208d4", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "React 는 ", "styles": {} }, { "type": "text", "text": "멱등성", "styles": { "bold": true } }, { "type": "text", "text": "을 코어한 개념으로 사용하고 있습니다. ", "styles": {} }, { "type": "text", "text": "(동일한 상태에 대해서 렌더링의 결과도 동일해야한다는 개념)", "styles": { "italic": true, "textColor": "gray" } } ], "children": [] }, { "id": "aaa6f3fa-c630-4e65-939b-71487d4b8974", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "그렇기 때문에 ", "styles": {} }, { "type": "text", "text": "Hook 내부 함수", "styles": { "bold": true } }, { "type": "text", "text": "는", "styles": {} }, { "type": "text", "text": " 순수함수", "styles": { "bold": true } }, { "type": "text", "text": "일 것을 권장하고 있습니다. ", "styles": {} } ], "children": [] }, { "id": "edf518c8-9b86-4eb7-b6c1-d92f573f8ea4", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "16be2918-2311-4590-a05f-6e6a8315dc91", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "만약 동일한 상태에 대한 두 번의 Hook 호출 결과가 다르다면 Hook 내부의 과정이 순수하지 못하다는 것이고 이는 개발자가 의도한 결과를 도출하는데 문제를 일으킬 수 있다는 것을 의미합니다. ", "styles": {} } ], "children": [] }, { "id": "98a1c796-ff8e-44b6-b9c7-35f0eea87bd7", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "d8c911f0-b12c-4fd5-a7a4-ce9ab8893b05", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이를 개발자가 쉽게 알아차릴 수 있도록 React 는 strict mode 에서 Hook 들을 두 번 실행되게 합니다.", "styles": {} } ], "children": [] }, { "id": "a9d3bb66-4be2-49e8-a164-99cce9377548", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이러한 내용을 바탕으로 봤을 때 useEffect 가 strict mode 에서 두 번 실행되는 것을", "styles": {} } ], "children": [] }, { "id": "b1957d2e-d225-4bab-92b5-1338d0795adb", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "컴포넌트가 마운트되고 언마운트 되는 동안 내부 로직이 잘 수행 되는지 개발 모드 차원에서 확인하는 것 아닌가?", "styles": { "backgroundColor": "gray" } } ], "children": [] }, { "id": "0292932d-5a1f-4194-8a4c-76acaa9deafb", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "라는 생각이 들 수 있습니다. 맞습니다! ", "styles": {} } ], "children": [] }, { "id": "821c0b2f-1c29-438d-b40c-b2dd195172da", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "하지만 이것만으로는 useEffect 를 외부 시스템과의 동기화를 위해서만 사용해야 한다는 것을 이해하기 어렵습니다.\n조금 더 자세하게 생각해 보도록 하겠습니다.", "styles": {} } ], "children": [] }, { "id": "3e7f10a0-5583-4769-8291-0eb1111b3db2", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "5ad31551-ea54-4dcf-aeb6-4190d6054a4c", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이해를 돕기 위해 우리가 스트리밍 서비스를 통해 특정 채널들을 시청한다고 생각해 봅시다. ", "styles": {} } ], "children": [] }, { "id": "6e0e4d64-9ab3-4d86-8014-205d13ead126", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "스트리밍 서비스에 접속해 침착맨 라이브를 시청하려고 합니다. ", "styles": {} } ], "children": [] }, { "id": "335eb2cd-cc13-4039-b4a4-12473dcb1ce2", "type": "nextImage", "props": { "backgroundColor": "default", "textAlignment": "center", "name": "https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fa21dd205-3918-495e-8881-a8ab9df55b02%2F3d6b02e3-6881-49fd-8cf5-eeae13cb7b55%2FUntitled.png?table=block&id=51a01752-34e1-445f-be40-2c9bc27c0c25&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%2F3d6b02e3-6881-49fd-8cf5-eeae13cb7b55%2FUntitled.png?table=block&id=51a01752-34e1-445f-be40-2c9bc27c0c25&spaceId=a21dd205-3918-495e-8881-a8ab9df55b02&width=2000&userId=&cache=v2", "caption": "", "showPreview": true, "previewWidth": 586 }, "children": [] }, { "id": "e5eeb361-a564-460d-a8be-cdca4982b459", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "침착맨 채널에 들어감으로써 우리는 침착맨 채널과 동기화를 하고 침착맨 채널의 신호를 받아 영상으로 변환해야 합니다.", "styles": {} } ], "children": [] }, { "id": "c08acbd0-1b14-4abb-b0ff-037d793d7ac9", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "그리고 채널을 변경하면 다른 채널과 그러한 동작을 똑같이 수행해야 합니다. ", "styles": {} } ], "children": [] }, { "id": "97d97806-1b6a-40bb-8aad-1661ed6a1ce2", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "또한 스트리밍 서비스를 종료하고자 하면 채널과 연결을 해제하고 신호를 받아 영상으로 변환하는 작업을 중단해야 합니다. ", "styles": {} } ], "children": [] }, { "id": "1b3fc207-e9bd-47f6-9d44-85b720cb4699", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "스트리밍 서비스를 다시 실행하거나 침착맨 채널로 다시 되돌아 오는 과정 등에서 침착맨 채널의 방송은 여전히 진행되고 있을 것입니다.", "styles": {} } ], "children": [] }, { "id": "7dff5c74-4909-4cb3-a2e3-f1fae6a08a8a", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "29903f4b-c5f6-4f95-8f6f-4b2cc661d787", "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": "aebc6bb2-f21f-4bba-b3b0-5533a8df2eb2", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이를 useEffect 로 구현하면 아래와 같은 형태일 것입니다.", "styles": {} } ], "children": [] }, { "id": "7e2250cc-fd58-4056-96c4-ab3476293c6c", "type": "procode", "props": { "type": "tsx", "data": "useEffect(() => {\n const connection = createConnection(serverUrl, roomId); // #1\n connection.connect();\n \n return () => { // # 1-1 connection.disconnect();};\n}, [serverUrl, roomId]); // #2\n\n#1. useEffect 의 로직을 수행하는 setup 함수 입니다. 컴포넌트가 DOM 에 추가되면 setup \n 함수가 실행됩니다.\n#1-1. setup 함수는 cleanup 함수를 반환할 수 있습니다. 컴포넌트가 DOM 에서 제거 되면\n\t cleanup 함수가 실행 됩니다. \n#2. setup 함수에서 참조하는 값들의 목록입니다. 해당 참조 값들이 변경되면 useEffect 가\n 다시 실행됩니다." }, "children": [] }, { "id": "22c820b7-e0e1-4562-9e3b-8d419a74c3a7", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "0555248b-60f2-42fe-bd54-e8261ad023f0", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "자 다시 strict mode 로 돌아와서 useEffect 는 ", "styles": {} }, { "type": "text", "text": "setup → cleanup → setup", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 순으로 동작하게 됩니다. ", "styles": {} } ], "children": [] }, { "id": "36cf4835-3425-4808-bc5b-ca4e21a4f50b", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이러한 과정은 ", "styles": {} }, { "type": "text", "text": "외부 시스템과 연결 → 연결 해제 → 연결", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 을 하게 되는 것으로 볼 수 있습니다.", "styles": {} } ], "children": [] }, { "id": "97a05ca0-2a9e-47ca-8da4-6457f99ee0ee", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "8fb14476-516f-4079-b5a5-bf22e7e03b7a", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": " 즉 침착맨 채널과 제대로 연결되고 연결이 해제 되는지 침착맨이 방송을 시작하기 전에 확인하는 셈인 것 입니다!", "styles": {} } ], "children": [] }, { "id": "53a9742f-c9f4-4a9d-b8ae-8f134158fd07", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "cd644929-db08-473c-9d1c-7c264154f52b", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "지금까지 간단한 비유를 통해 useEffect 의 동작에 대해 확인해 보았습니다. ", "styles": {} } ], "children": [] }, { "id": "2dcd10ab-54db-488d-be4c-9405d419c676", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "useEffect 의 동작이 무언가 ", "styles": {} }, { "type": "text", "text": "양방향성", "styles": { "bold": true } }, { "type": "text", "text": "을 띄고 있다는것을 확인하셨나요?", "styles": {} } ], "children": [] }, { "id": "d65d57be-8d39-4ffc-82bb-69371b558f30", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "b4d01df8-6cf7-4a36-8a3f-35a2ad843135", "type": "nextImage", "props": { "backgroundColor": "default", "textAlignment": "center", "name": "https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fa21dd205-3918-495e-8881-a8ab9df55b02%2Fa6a1d434-6ef0-45b9-8312-b95a3670bebc%2F%25E1%2584%2589%25E1%2585%25B5%25E1%2586%25BC%25E1%2584%258F%25E1%2585%25B3.001.jpeg?table=block&id=935d0ecc-dcb5-475e-8ffe-26e087fe9979&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%2Fa6a1d434-6ef0-45b9-8312-b95a3670bebc%2F%25E1%2584%2589%25E1%2585%25B5%25E1%2586%25BC%25E1%2584%258F%25E1%2585%25B3.001.jpeg?table=block&id=935d0ecc-dcb5-475e-8ffe-26e087fe9979&spaceId=a21dd205-3918-495e-8881-a8ab9df55b02&width=2000&userId=&cache=v2", "caption": "", "showPreview": true, "previewWidth": 642 }, "children": [] }, { "id": "c6a0d6a1-4e35-4fe7-8b21-9e0d177c9dce", "type": "nextImage", "props": { "backgroundColor": "default", "textAlignment": "center", "name": "https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fa21dd205-3918-495e-8881-a8ab9df55b02%2F176afbfe-58e2-4532-b71e-15afc5025024%2F%25E1%2584%2589%25E1%2585%25B5%25E1%2586%25BC%25E1%2584%258F%25E1%2585%25B32.001.jpeg?table=block&id=c0b6443f-b095-4123-813e-8f52fbee32ed&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%2F176afbfe-58e2-4532-b71e-15afc5025024%2F%25E1%2584%2589%25E1%2585%25B5%25E1%2586%25BC%25E1%2584%258F%25E1%2585%25B32.001.jpeg?table=block&id=c0b6443f-b095-4123-813e-8f52fbee32ed&spaceId=a21dd205-3918-495e-8881-a8ab9df55b02&width=2000&userId=&cache=v2", "caption": "", "showPreview": true, "previewWidth": 636 }, "children": [] }, { "id": "4bcdb9c0-2079-4b36-b118-163297a60a74", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "cfbe0281-8eba-4c24-8766-6534bc81e999", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "useEffect 는 위과 같이 ", "styles": {} }, { "type": "text", "text": "외부 시스템과 이벤트들을 주고 받는 형식에 특화", "styles": { "bold": true } }, { "type": "text", "text": "되어 있는 Hook 인 셈입니다.", "styles": {} } ], "children": [] }, { "id": "ebd85690-326c-43fe-89f8-5f263343c0c0", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "물론 useEffect 를 특정한 액션 이펙트에 대한 처리를 위해 사용할 수도 있습니다.", "styles": {} } ], "children": [] }, { "id": "fb6a63ee-03c1-48ee-9dc5-423ce371ade8", "type": "separator", "props": { "type": "default" }, "children": [] }, { "id": "e85ae328-6a4d-4805-93d7-7b49cfefd097", "type": "heading", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left", "level": 1 }, "content": [ { "type": "text", "text": "useEffect 를 사용해야 하는 경우", "styles": {} } ], "children": [] }, { "id": "de29c095-795a-4bd7-9078-4349db635390", "type": "callout", "props": { "textColor": "default", "textAlignment": "left", "type": "default" }, "content": [ { "type": "text", "text": " useEffect 는", "styles": {} }, { "type": "text", "text": " 외부 시스템과 동기화 ", "styles": { "bold": true } }, { "type": "text", "text": "하거나, 혹은 ", "styles": {} }, { "type": "text", "text": "컴포넌트가 사용자에게 보여졌기 때문에(initialized)", "styles": { "bold": true } }, { "type": "text", "text": " 실행해야 하는 코드에만 사용하세요. \n버튼을 누른다거나 하는 경우", "styles": {} }, { "type": "text", "text": "(Action Effect)", "styles": { "bold": true } }, { "type": "text", "text": "에는 다른 해결책을 찾아보세요.", "styles": {} } ], "children": [] }, { "id": "c5aa2149-4da7-4ac7-92c0-4ca2dee281d5", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "48f67689-6dbf-4593-a415-5a8acaedd9d0", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "마우스 커서에 대한 이벤트를 적용하는 컴포넌트가 있다고 가정해 봅시다. ", "styles": {} } ], "children": [] }, { "id": "849c2f1e-49c7-42dc-9353-e75dbfe53931", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이를 위해서는 당연하게 window.addEventListener 를 사용해야 합니다. ", "styles": {} } ], "children": [] }, { "id": "73da4907-c0d2-49e2-8962-025caec614e7", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "29f196ce-7f46-41bd-a095-7e118deb6d7d", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "즉 ", "styles": {} }, { "type": "text", "text": "window 는 React 외부의 시스템", "styles": { "bold": true } }, { "type": "text", "text": "이기 때문에 useEffect 를 사용하는 것이 좋습니다.", "styles": {} } ], "children": [] }, { "id": "c35a597e-816c-4ab8-b22a-51ae9b57ef0b", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "4cf8cf67-6a64-407e-9aaf-3344ec24e94c", "type": "procode", "props": { "type": "tsx", "data": "const Curosr = () => {\n // ...\n \n useEffect(( ) => {\n animateOutLine();\n\n window.addEventListenr(\"mousemove\", cursorPosHandler);\n\n return () => window.removeEventListener(\"mousemove\", cursorPosHandler);\n }, []);\n \n // ...\n};" }, "children": [] }, { "id": "61f736cb-383f-4988-80d3-e4a1c9ab571d", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이처럼 컴포넌트가 마운트되면 event 에 대한 핸들러를 등록하여 핸들러가 실행되게 합니다.", "styles": {} } ], "children": [] }, { "id": "537ccc1f-50f3-400b-8ec2-675883a7e1c7", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "반면에 컴포넌트가 언마운트 되면 더 이상 해당 핸들러를 실행할 필요가 없으므로 ", "styles": {} }, { "type": "text", "text": "cleanup", "styles": { "bold": true } }, { "type": "text", "text": " 해주어야 합니다. ", "styles": {} } ], "children": [] }, { "id": "43451297-fdc1-40a9-a4f5-c33b6927846b", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "032a2a7a-fa24-402a-8d68-2786401c7f25", "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": "1bbe93b7-c55f-493a-aba7-c9e91a0f7e60", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "위 코드의 useEffect 는 앞서 설명한 것 처럼 흘러가고 있는 외부 시스템에 ", "styles": {} }, { "type": "text", "text": "동기화", "styles": { "bold": true } }, { "type": "text", "text": " 한다고 볼 수 있는 것입니다.", "styles": {} } ], "children": [] }, { "id": "68548e70-48f6-48e9-b222-28ecb2b5e36f", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "bd707f03-f138-4de6-a105-c2010ed4f627", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이제는 어떠한 경우에 useEffect 사용을 ", "styles": {} }, { "type": "text", "text": "지양", "styles": { "bold": true } }, { "type": "text", "text": "해야 하는지 실제 저의 사례를 통해 알아보고 이를 다른 방식으로 교체하는 과정에 대해 알아보도록 하겠습니다.", "styles": {} } ], "children": [] }, { "id": "c602b852-d3eb-4e8d-8ccd-a80a8d288587", "type": "separator", "props": { "type": "default" }, "children": [] }, { "id": "696f3948-f7ca-47f0-8cc3-cc21afd396dd", "type": "heading", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left", "level": 1 }, "content": [ { "type": "text", "text": "useEffect 를 대체해야 하는 경우", "styles": {} } ], "children": [] }, { "id": "18a71749-740c-463f-84cd-e7ae619c3671", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "다음과 같은 상황에 대해서는 useEffect 보다는 다른 방식을 사용하는 것이 좋습니다.", "styles": {} } ], "children": [] }, { "id": "7f816243-b1ec-4c56-9c94-90049b9ae478", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "63ab576e-3a7b-4ecd-8883-67f8b1393c20", "type": "bulletListItem", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "Side Effect", "styles": { "bold": true } }, { "type": "text", "text": " 로 인해 ", "styles": {} }, { "type": "text", "text": "상태", "styles": { "bold": true } }, { "type": "text", "text": "가 바뀌는 경우", "styles": {} } ], "children": [] }, { "id": "6d5e3ad4-4406-49a9-85a7-ae565ff70a89", "type": "bulletListItem", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "Parent Component", "styles": { "bold": true } }, { "type": "text", "text": " 와", "styles": {} }, { "type": "text", "text": " 상호작용", "styles": { "bold": true } }, { "type": "text", "text": " 하는 경우", "styles": {} } ], "children": [] }, { "id": "c55fc4e5-ced3-4413-8600-385e15856b49", "type": "bulletListItem", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "External Store", "styles": { "bold": true } }, { "type": "text", "text": " 를 사용하는 경우", "styles": {} } ], "children": [] }, { "id": "dec85c34-e1d0-4206-b876-0c9126ea04df", "type": "bulletListItem", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "Data Fetching", "styles": { "bold": true } }, { "type": "text", "text": " 을 하는 경우", "styles": {} } ], "children": [] }, { "id": "3ba6a7ab-975b-4280-aabf-4382d17f24da", "type": "bulletListItem", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "Global Singleton", "styles": { "bold": true } }, { "type": "text", "text": " 을 ", "styles": {} }, { "type": "text", "text": "초기화", "styles": { "bold": true } }, { "type": "text", "text": " 하는 경우", "styles": {} } ], "children": [] }, { "id": "7d6ccbb5-0906-4164-8975-a099f238159b", "type": "bulletListItem", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "User Event ", "styles": { "bold": true } }, { "type": "text", "text": "를 다루는 경우", "styles": {} } ], "children": [] }, { "id": "d284b32f-e6bf-4afe-b136-bb3e33a958eb", "type": "heading", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left", "level": 2 }, "content": [ { "type": "text", "text": "Side Effect 로 인해 상태가 바뀌는 경우", "styles": {} } ], "children": [] }, { "id": "890387a9-693d-44a3-a913-3d349bb06c6f", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "페이지 라우팅 정보에 따라 페이지 경로를 출력하는 컴포넌트가 있다고 가정해 봅시다. ", "styles": {} } ], "children": [] }, { "id": "0854d6b8-9e8d-43d5-b1b8-8dcbc3d8a98e", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "평소의 저라면 아래와 같이 구현할 것 같습니다.", "styles": {} } ], "children": [] }, { "id": "10332968-91b2-4a52-b08d-0272844afa1a", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "50280cf7-a8a0-473f-a171-704aa7725dd6", "type": "procode", "props": { "type": "tsx", "data": "const { hash } = useLocation();\n\nconst [title, setTitle] = useState(SYMBOL_TITLE);\n\nuseEffect(( ) => {\n if (hash) {\n const next = `${decodeURI(hash).slice(1)} | ${SYMBOL_TITLE}`;\n setTitle(next);\n }\n}, [hash]);" }, "children": [] }, { "id": "83a989d6-f91b-47b0-b67f-779a37ca3f58", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "여기서 ", "styles": {} }, { "type": "text", "text": "side effect 는 router", "styles": { "bold": true } }, { "type": "text", "text": " 입니다. ", "styles": {} } ], "children": [] }, { "id": "e05a7ad1-47aa-493c-a618-c9fb38820ca4", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "router 가 넘겨주는 path 정보를 토대로 title 이라는 ", "styles": {} }, { "type": "text", "text": "Reactive Value", "styles": { "bold": true } }, { "type": "text", "text": " 를 업데이트 하고 있습니다.", "styles": {} } ], "children": [] }, { "id": "64c07b7b-ff05-44eb-b4f1-339a3c5c13b0", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "c4838b08-23e9-4aaa-9f06-9613f347651b", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "만약 해당 useEffect 가 사용하고 있는 Reactive value 의 값이 ", "styles": {} }, { "type": "text", "text": "표현하고 있는 값", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": "은 같지만 ", "styles": {} }, { "type": "text", "text": "값 자체가 바뀌는 경우", "styles": { "bold": true } }, { "type": "text", "text": " 어떻게 될까요?", "styles": {} } ], "children": [] }, { "id": "37e6ae5a-b55a-4601-a49f-f2e243823654", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "229564e4-20b2-4a85-9b10-610272c48905", "type": "callout", "props": { "textColor": "default", "textAlignment": "left", "type": "warning" }, "content": [ { "type": "text", "text": "React 는 기본적으로 리렌더링 될 때, 내부의 ", "styles": {} }, { "type": "text", "text": "모든 변수들을 다시 생성", "styles": { "bold": true } }, { "type": "text", "text": "합니다. \n이는 원시값 이외의 ", "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": "7464d3e6-2423-462e-9f1f-906e293fc10b", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "a7987c70-f67b-445a-b7b7-72674dd94fd6", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "그렇기 때문에 useEffect 는 Reactive value 자체가 ", "styles": {} }, { "type": "text", "text": "달라졌다고 판단", "styles": { "bold": true } }, { "type": "text", "text": "하여 내부의 ", "styles": {} }, { "type": "text", "text": "cleanup → setup", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 과정을 실행합니다. ", "styles": {} } ], "children": [] }, { "id": "faa2c80c-5f4a-44e4-babe-a00a758a2313", "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": "adecaafc-de86-491c-b729-eedc926be88f", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "772e3671-d06c-43ba-866c-4755b88b34de", "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": "fc65610f-f776-4604-940d-c6004043aebf", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "React 에서도 공식적으로 이는 문제가 아니라고 말하고 있습니다. ", "styles": {} } ], "children": [] }, { "id": "dc2959a2-b759-4361-bbdb-08ee302e16f5", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "하지만 리렌더링에 대한 ", "styles": {} }, { "type": "text", "text": "코스트가 매우 높다면", "styles": { "bold": true } }, { "type": "text", "text": ", 예를 들어 수 만 건의 리스트를 렌더링 해야한다거나 데이터에 대한 계산에 많은 코스트가 필요하다면 UI 를 렌더링 과정에 있어서 좋지 않은 사용자 경험을 유발할 수도 있습니다.", "styles": {} } ], "children": [] }, { "id": "b1ef92ef-09b0-4953-8615-45199d3b622b", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "e02640a6-4f38-4edd-af65-090486e6e03b", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "그렇기 때문에 useEffect 를 사용하는 것 보다는 ", "styles": {} }, { "type": "text", "text": "useMemo", "styles": { "bold": true } }, { "type": "text", "text": " 라는 Hook 을 사용하여 side Effect 가 전달하는 값을 ", "styles": {} }, { "type": "text", "text": "메모이제이션", "styles": { "bold": true } }, { "type": "text", "text": " 해서 ", "styles": {} }, { "type": "text", "text": "최적화", "styles": { "bold": true } }, { "type": "text", "text": " 하는 것이 좋아 보입니다.", "styles": {} } ], "children": [] }, { "id": "10d66565-8839-4925-a319-7f77339feab9", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "0f65258c-6555-415b-8277-78ff3b187038", "type": "procode", "props": { "type": "tsx", "data": "const { hash } = useLocation();\n\nconst title = useMemo(( ): string => {\n if (hash) return `${decodeURI(hash).slice(1)} | ${SYMBOL_TITLE}`;\n else return SYMBOL_TITLE;\n}, [hash]);" }, "children": [] }, { "id": "e14ae0d5-59fc-4d4a-84a3-1a74d867d841", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "428d49f2-c51e-4907-9473-f7de92a659f7", "type": "callout", "props": { "textColor": "default", "textAlignment": "left", "type": "info" }, "content": [ { "type": "text", "text": "React 에서는 늘 useMemo 를 사용할 필요는 없다고 합니다. \n앞서 말한 것 처럼 리렌더링이 매우 간단하다면, 굳이 useMemo 를 사용할 필요는 없습니다.", "styles": {} } ], "children": [] }, { "id": "57f761b8-f7d2-4775-9c04-7a50cf32b203", "type": "heading", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left", "level": 2 }, "content": [ { "type": "text", "text": "Parent Component 와 상호작용 하는 경우", "styles": {} } ], "children": [] }, { "id": "e6739f0b-10d4-45d3-bf99-b60c30a72a1f", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "토글 버튼 컴포넌트가 있다고 가정해 보겠습니다. ", "styles": {} } ], "children": [] }, { "id": "b55e4853-781b-4a7b-913f-6be67102007d", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "해당 토글 버튼은 애플리케이션의 테마를 라이트 모드와 다크 모드 사이로 변경하는 역할을 하고 있습니다. ", "styles": {} } ], "children": [] }, { "id": "346fc58c-0d1e-405d-a029-792d5cc0a848", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "그리고 해당 버튼은 이러한 테마값을 읽기 위해 localStorage 로부터 값을 가져옵니다.", "styles": {} } ], "children": [] }, { "id": "09b54f04-ab39-40b7-99f3-6e5cb639ff9b", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "c463ca20-c5ba-49be-9986-133de2a23c9f", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "우선 이를 구현하기 위해 저는 useEffect 를 사용했습니다.", "styles": {} } ], "children": [] }, { "id": "34544668-8798-4e33-ae63-4691c6a74e9b", "type": "nextImage", "props": { "backgroundColor": "default", "textAlignment": "center", "name": "https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fa21dd205-3918-495e-8881-a8ab9df55b02%2F537992ed-ee55-4537-9e40-74a70226f5d8%2FwithParent1.png?table=block&id=aba08eb5-8366-423a-b2a8-7f2fb9ec4e09&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%2F537992ed-ee55-4537-9e40-74a70226f5d8%2FwithParent1.png?table=block&id=aba08eb5-8366-423a-b2a8-7f2fb9ec4e09&spaceId=a21dd205-3918-495e-8881-a8ab9df55b02&width=2000&userId=&cache=v2", "caption": "", "showPreview": true, "previewWidth": 612 }, "children": [] }, { "id": "9dd32ef1-c4fc-4b83-b80d-118e41ff4dda", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "1158502f-d45f-4ab4-aa7e-f154326742b2", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "부모 컴포넌트로부터 토글에 필요한 props 들을 받아왔습니다. ", "styles": {} } ], "children": [] }, { "id": "1d06ccc6-f580-41ad-b5c5-55682395a507", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "그리고 토글 버튼 컴포넌트에서는 토글이 On 이 되었는지 Off 가 되었는지를 나타내는 isOn 이라는 state 를 사용합니다. ", "styles": {} } ], "children": [] }, { "id": "37a83123-1245-4c48-80aa-11eaf1752dd9", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "a7b91cea-b802-4b7d-96ed-b0eff501ae8e", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "버튼을 누르면 isOn state 에 대한 set 함수가 실행되고 렌더링이 트리거 됩니다. ", "styles": {} } ], "children": [] }, { "id": "7cb34af0-ace7-45c1-b205-28700bb6210f", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "그리고 리렌더링 과정에서 useEffect 가 실행되어 내부에서 토글에 대한 로직을 실행하게 됩니다.", "styles": {} } ], "children": [] }, { "id": "0cbd2d6d-c70b-4333-912c-b4cf5f0a0a10", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "68f2135c-7b2d-4d46-9c9a-3d8d237fede8", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "해당 로직은 앞서 설명한 기능을 구현하는데 아무런 문제가 없습니다! ", "styles": {} } ], "children": [] }, { "id": "b008426d-b776-4152-8aef-3c4e2723a20b", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "하지만 ", "styles": {} }, { "type": "text", "text": "버튼을 누르면 테마가 바뀐다", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 라는 하나의 사이클을 가지고 있는 로직을 ", "styles": {} }, { "type": "text", "text": "버튼을 누른다 → 리렌더링 한다 → 토글 기능을 실행한다", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 와 같이 여러 단계를 거쳐 실행하게 됩니다.", "styles": {} } ], "children": [] }, { "id": "23951cb4-4267-4569-8768-d4adf8230f17", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "73779e3d-e309-4df3-8d99-8a43124b27f8", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "만약 useEffect 가 많고 여러 useEffect 가 서로 연관되어 있다면 로직의 흐름은 ", "styles": {} }, { "type": "text", "text": "추적하기 어려워지고", "styles": { "bold": true } }, { "type": "text", "text": " ", "styles": {} }, { "type": "text", "text": "복잡", "styles": { "bold": true } }, { "type": "text", "text": "해질 것 입니다.", "styles": {} } ], "children": [] }, { "id": "0eeb680f-a443-4129-914c-9e4222166349", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "00e0ea6b-acd6-4075-904e-461567c7a6b0", "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": "4832039a-bd19-48db-80c6-7fae20379c8d", "type": "nextImage", "props": { "backgroundColor": "default", "textAlignment": "center", "name": "https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fa21dd205-3918-495e-8881-a8ab9df55b02%2F1bd7d3d7-c7c5-4f9a-ad7e-f5a339fb5704%2FwithParent2.png?table=block&id=feb68d56-abd6-4893-8de6-2553ff6d6d14&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%2F1bd7d3d7-c7c5-4f9a-ad7e-f5a339fb5704%2FwithParent2.png?table=block&id=feb68d56-abd6-4893-8de6-2553ff6d6d14&spaceId=a21dd205-3918-495e-8881-a8ab9df55b02&width=2000&userId=&cache=v2", "caption": "", "showPreview": true, "previewWidth": 642 }, "children": [] }, { "id": "d5dc94f3-8a5a-40f0-a8c7-9f5aefc5a846", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "31988123-81a7-4fe3-9533-591f82cec1fc", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "자주 사용되는 이벤트 핸들러라면 ", "styles": {} }, { "type": "text", "text": "커스텀 Hook ", "styles": { "bold": true } }, { "type": "text", "text": "으로 분리시켜 보세요.", "styles": {} } ], "children": [] }, { "id": "162d2e2f-1782-4ffb-a3cf-bd1ce088930b", "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": "08d2c388-470a-46b9-898a-d26778c1227b", "type": "nextImage", "props": { "backgroundColor": "default", "textAlignment": "center", "name": "https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fa21dd205-3918-495e-8881-a8ab9df55b02%2Fb1f0cfa2-da9f-48a6-8f8a-eaf4975793dc%2FwithParent3.png?table=block&id=a23d3f6e-53bb-4924-ab61-791ca09a5e67&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%2Fb1f0cfa2-da9f-48a6-8f8a-eaf4975793dc%2FwithParent3.png?table=block&id=a23d3f6e-53bb-4924-ab61-791ca09a5e67&spaceId=a21dd205-3918-495e-8881-a8ab9df55b02&width=2000&userId=&cache=v2", "caption": "", "showPreview": true, "previewWidth": 608 }, "children": [] }, { "id": "c9ea7fa1-310e-4cb8-bd84-8d749f1798a1", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "1eab56ad-2c5f-4fcc-bd69-dd828bcfd9aa", "type": "callout", "props": { "textColor": "default", "textAlignment": "left", "type": "default" }, "content": [ { "type": "text", "text": "nextIsOn 을 사용하는 이유?", "styles": { "bold": true } }, { "type": "text", "text": " \nset 함수로 state 를 업데이트하면 해당 라이프 사이클에서는 즉시 반영되지 않습니다. \n", "styles": {} }, { "type": "text", "text": "업데이트는 다음 라이프사이클", "styles": { "bold": true } }, { "type": "text", "text": "에서 반영됩니다. \n이는 set 함수의 동작을 살펴봐야합니다. \nReact 에서 set 함수는 호출 그 즉시 실행되는 것이 아니라 ", "styles": {} }, { "type": "text", "text": "대기 큐", "styles": { "bold": true } }, { "type": "text", "text": "에", "styles": {} }, { "type": "text", "text": "(일반적으로 브라우저의 micro task queue)", "styles": { "italic": true, "textColor": "gray" } }, { "type": "text", "text": "들어가게 됩니다. \n그 후 리렌더링 과정 중에 대기 큐의 set 함수들이 실행되어 state 를 업데이트 하게 됩니다. \n이렇듯 동일한 라이프 사이클 내에서 업데이트된 state 를 사용하기 위해서는 위의 코드와 같이 먼저 갱신된 값을 만들어 해당 값을 사용해야 합니다.", "styles": {} } ], "children": [] }, { "id": "4e326d4e-9c7c-4544-b838-39493ec058fc", "type": "heading", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left", "level": 2 }, "content": [ { "type": "text", "text": "External Store 를 사용하는 경우", "styles": {} } ], "children": [] }, { "id": "4eccacfc-67f7-4333-85fc-7e63d698fc63", "type": "callout", "props": { "textColor": "default", "textAlignment": "left", "type": "default" }, "content": [ { "type": "text", "text": "External Store", "styles": { "bold": true } }, { "type": "text", "text": " \nredux, zustand, tanstackQuery 와 같이 자체적인 ", "styles": {} }, { "type": "text", "text": "상태 관리 라이브러리", "styles": { "bold": true } }, { "type": "text", "text": "나 변경 가능한 값과 이벤트를 노출하여 해당 변경 사항을 구독하는 ", "styles": {} }, { "type": "text", "text": "브라우저 API", "styles": { "bold": true } }, { "type": "text", "text": " 를 의미 합니다.", "styles": {} } ], "children": [] }, { "id": "46d432fb-d751-4732-a266-1a741e1216ab", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "30959eaf-9fb4-49e2-8114-a9c82bd91b20", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "React 가 관리하는 ", "styles": {} }, { "type": "text", "text": "Internal Store(useState, useReducer, context, props)", "styles": { "bold": true } }, { "type": "text", "text": " 가 아닌 ", "styles": {} }, { "type": "text", "text": "External Store", "styles": { "bold": true } }, { "type": "text", "text": " 를 사용하는 경우 useEffect 를 ", "styles": {} }, { "type": "text", "text": "사용하지 않는 것", "styles": { "bold": true } }, { "type": "text", "text": "이 좋습니다.", "styles": {} } ], "children": [] }, { "id": "68fba022-fb8d-4cc9-91ae-3a62c49876c5", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "External Store 를 useEffect 에서 불러오는 것은 ", "styles": {} }, { "type": "text", "text": "concurrent feature Tearing", "styles": { "bold": true } }, { "type": "text", "text": " 과 같은 문제에 취약하기 때문입니다.", "styles": {} } ], "children": [] }, { "id": "6991c6ce-54c6-4c81-b896-9a9cb21585bf", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "2b0ccc32-3caa-473b-a713-86aa5cfd0b19", "type": "callout", "props": { "textColor": "default", "textAlignment": "left", "type": "default" }, "content": [ { "type": "text", "text": " ", "styles": {} }, { "type": "text", "text": "Concurrent Feature Tearing", "styles": { "bold": true } }, { "type": "text", "text": " \n의도치 않게 여러 UI 가 표현되는 것을 의미합니다.", "styles": {} } ], "children": [] }, { "id": "40355c5e-8e09-42b5-ba25-20e41a3144a2", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "25abcde4-0966-48f3-8c4f-028c03819382", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "Internal Store 에 대해서 React 는 Tearing 문제를 자동으로 해결해 줍니다. ", "styles": {} } ], "children": [] }, { "id": "aa1344d0-3381-4519-933c-de80c7c66d0d", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "하지만 External Store 는 말 그대로 React 외부의 store 이므로 React 는 Tearing 문제를 자동으로 해결해주지 못합니다.", "styles": {} } ], "children": [] }, { "id": "68e7e3ef-7157-41e9-a0ce-8ff54a9e0999", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "e15673c3-0bc7-48cf-8617-7d053ef93957", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "예를 들어 서버 사이드 렌더링에서 초기 HTML 을 클라이언트 사이드로 전달한다고 생각해 봅시다. ", "styles": {} } ], "children": [] }, { "id": "4c988d82-eb9e-453c-b48b-484c4c87d8cc", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "클라이언트 사이드는 서버 사이드로부터 받은 초기 HTML 에 하이드레이션을 통해 인터렉션을 부여합니다. ", "styles": {} } ], "children": [] }, { "id": "98fbba88-7025-4fec-8193-eb6bdfed9f45", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이 때 useEffect 내부에서 외부스토어 값을 가져오고 이 값을 사용하는 UI 가 있다면 서버 사이드에서는 당연히 알 수 있는 방법이 없으므로 최초 렌더링 때 해당 UI 가 제대로 렌더링 되지 않을 수 있습니다. ", "styles": {} } ], "children": [] }, { "id": "ba1fbb4c-e964-4d4b-b666-c394de6f0606", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "그리고 그 UI 밑에 다른 UI 들이 있다면 다른 UI 들이 Tearing, 즉 뚧고 나오는 것처럼 보일 수 있습니다.", "styles": {} } ], "children": [] }, { "id": "005d109b-5dc2-4cd2-b847-d7ebba207a0c", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "eafe3edb-46fa-45a8-b4bf-dc449af6464f", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이를 위해서 React18 에서는 ", "styles": {} }, { "type": "text", "text": "useSyncExternalStore", "styles": { "bold": true } }, { "type": "text", "text": " 라는 Hook 을 제공합니다.", "styles": {} } ], "children": [] }, { "id": "ca394abe-4bff-40b0-82b2-00f91d1aab6b", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "9a3f8f5c-08c9-47b8-8f57-7fcfa2eefa8a", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "별도로 사용자가 라이트와 다크 모드를 지정하지 않은 경우 브라우저에 설정된 모드에 따라 라이트와 다크 모드를 설정하는 UI 매니저 컴포넌트가 있다고 생각해봅시다. ", "styles": {} } ], "children": [] }, { "id": "bbd1595e-7233-4c97-ac23-b5aa2a9f5339", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이를 위해 저는 useEffect 를 사용해서 구현을 하였습니다.", "styles": {} } ], "children": [] }, { "id": "31b805fe-9fec-4c5f-97ac-64f7fd09172c", "type": "nextImage", "props": { "backgroundColor": "default", "textAlignment": "center", "name": "https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fa21dd205-3918-495e-8881-a8ab9df55b02%2F8e61a8ec-33c7-47c4-96a2-f97f31240598%2Fexternal1.png?table=block&id=ff64c2f1-aabe-4fd2-83f1-7846e199dd18&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%2F8e61a8ec-33c7-47c4-96a2-f97f31240598%2Fexternal1.png?table=block&id=ff64c2f1-aabe-4fd2-83f1-7846e199dd18&spaceId=a21dd205-3918-495e-8881-a8ab9df55b02&width=2000&userId=&cache=v2", "caption": "", "showPreview": true, "previewWidth": 624 }, "children": [] }, { "id": "1cd456ba-114d-4179-a89b-3c74aab5f18a", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "5d29d6b6-71ed-47f9-ad98-ffc0b1526c90", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이상하게도 최초 마운트 시에는 localStorage 가 undefined 였습니다. ", "styles": {} } ], "children": [] }, { "id": "5e08bcec-48cb-41c9-ab37-3e9a981c7e19", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "만약 가저온 정보를 나타는 UI 였다면 무언가를 보여줄 수 없는 상황이였겠죠.", "styles": {} } ], "children": [] }, { "id": "ea08c625-16a3-4e0e-a22b-e54b5b115896", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "36e39d6f-58b5-4c8e-9828-3c2a508ce780", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이를 해결하기 위해 컴포넌트가 최초로 마운트 되었는지를 확인해주는 별도의 state 를 사용했습니다. ", "styles": {} } ], "children": [] }, { "id": "28d6bb7c-e38b-48f7-8991-be4f2c7a7468", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이는 불필요한 state 와 불필요한 리렌더링을 유발해야 했고 로직이 지저분하게 보이도록 합니다.", "styles": {} } ], "children": [] }, { "id": "3967a533-88bf-48fd-86a9-ba122802c99b", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "62d2ffff-add0-48fd-828d-d47816320762", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이를 해결하기 위해 ", "styles": {} }, { "type": "text", "text": "useSyncExternalStore ", "styles": { "bold": true } }, { "type": "text", "text": "hook 을 사용해 리팩토링을 해보겠습니다.", "styles": {} } ], "children": [] }, { "id": "7c5ef6bf-68c1-4cff-9cab-51c35e7e156c", "type": "nextImage", "props": { "backgroundColor": "default", "textAlignment": "center", "name": "https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fa21dd205-3918-495e-8881-a8ab9df55b02%2Ff328d612-124d-41c3-a7fb-96654245934d%2Fexternal2.png?table=block&id=13a4b029-4da7-4937-a574-31da0ffad5b5&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%2Ff328d612-124d-41c3-a7fb-96654245934d%2Fexternal2.png?table=block&id=13a4b029-4da7-4937-a574-31da0ffad5b5&spaceId=a21dd205-3918-495e-8881-a8ab9df55b02&width=2000&userId=&cache=v2", "caption": "", "showPreview": true, "previewWidth": 618 }, "children": [] }, { "id": "565e5c31-7f49-449b-a5e4-ea8364ad740a", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "20bfe3f9-3ce2-4dc2-8d5e-b322400b661d", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "useSyncExternalStore 는 주로 custom Hook 을 사용하여 호출 합니다. ", "styles": {} } ], "children": [] }, { "id": "0877b175-8f58-40dc-801e-f1e967791231", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이러한 방식을 사용하면 다양한 컴포넌트에서 동일한 외부 저장소를 사용할 수 있게 됩니다.", "styles": {} } ], "children": [] }, { "id": "23660095-a8c1-4d2f-95c6-048cf96d4316", "type": "nextImage", "props": { "backgroundColor": "default", "textAlignment": "center", "name": "https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fa21dd205-3918-495e-8881-a8ab9df55b02%2F368f1f42-0224-4f90-b360-5e140ad7653d%2Fexternal3.png?table=block&id=71d4f651-94a7-4521-bd71-fdb5f89599a6&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%2F368f1f42-0224-4f90-b360-5e140ad7653d%2Fexternal3.png?table=block&id=71d4f651-94a7-4521-bd71-fdb5f89599a6&spaceId=a21dd205-3918-495e-8881-a8ab9df55b02&width=2000&userId=&cache=v2", "caption": "", "showPreview": true, "previewWidth": 612 }, "children": [] }, { "id": "0e953704-9db1-4a71-a9cd-1fa9d1ef74c5", "type": "heading", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left", "level": 2 }, "content": [ { "type": "text", "text": "Data Fetching 을 하는 경우", "styles": {} } ], "children": [] }, { "id": "588ea765-41ab-489d-b437-a425af19d603", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "useEffect 를 사용하여 컴포넌트에 데이터를 패치하는 것 보다는 TanstackQuery 나 NextJS 와 같은 라이브러리나 프레임워크가 제공하는 기능을 사용하는 것이 더욱 ", "styles": {} }, { "type": "text", "text": "효율적", "styles": { "bold": true } }, { "type": "text", "text": "이고", "styles": {} }, { "type": "text", "text": " 안전", "styles": { "bold": true } }, { "type": "text", "text": "합니다. ", "styles": {} } ], "children": [] }, { "id": "adfaccea-68ce-4b03-8d18-3b83372cf177", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이러한 기능들은 ", "styles": {} }, { "type": "link", "href": "https://www.youtube.com/watch?v=bGzanfKVFeU", "content": [ { "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": "0bad6777-0d2b-42e9-804d-ebf34676fee9", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "7e964477-ea52-4aa1-ae36-c096870a3bc9", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "다음은 useEffect 를 통해 데이터를 패칭하는 코드입니다.", "styles": {} } ], "children": [] }, { "id": "8cf5b112-2b99-4dc2-8617-544cf9ceab9d", "type": "procode", "props": { "type": "tsx", "data": "function Stort() {\n const [items, setItems] = useState([]);\n \n useEffect(() => {\n let ignore = false;\n \n fromAPI.then((data) => {\n if (!ignore) return;\n \n setItems(data);\n })\n \n return () => {\n ignore = true;\n }\n }, [deps])" }, "children": [] }, { "id": "85fd5675-8492-4d29-b60f-585c2f2759d4", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "false 로 설정된 ignore 변수가 cleanup 함수에서 true 로 변하는 것을 주목해주세요. ", "styles": {} } ], "children": [] }, { "id": "cbd73892-2459-4f5e-9510-26ff2d78e972", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이를 통해 중복적으로 데이터가 패칭되는 등의 ", "styles": {} }, { "type": "text", "text": "race condition", "styles": { "bold": true } }, { "type": "text", "text": " 을 피할 수 있게 됩니다.", "styles": {} } ], "children": [] }, { "id": "f90481a8-43a9-4d47-b094-3a486a782995", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "21bf1776-af37-495b-aaf0-2180c2d034d7", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "useEffect 로 Data fetching 을 수행하면 다음과 같은 문제를 겪을 수 있습니다.", "styles": {} } ], "children": [] }, { "id": "3083f3f8-3f12-4b63-b779-0a01ee0586a6", "type": "bulletListItem", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "Race conditions", "styles": { "bold": true } }, { "type": "text", "text": " deps 의 Reactive value 가 바뀌어 새로운 fetch 가 발생했지만, 현재 fetch 의 응답이 늦게 도착한 경우 이전 fetch 결과를 사용하게 됩니다.", "styles": {} } ], "children": [] }, { "id": "adfd1430-52bd-44d2-9497-06a69366081c", "type": "bulletListItem", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "No instant back button", "styles": { "bold": true } }, { "type": "text", "text": " page 를 되돌아갔다 오는 등의 경우에 대해 데이터를 다시 fetching 해야 합니다.", "styles": {} } ], "children": [] }, { "id": "b153e620-dd0e-4b98-9a52-52b5dff4f642", "type": "bulletListItem", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "No inital HTML content", "styles": { "bold": true } }, { "type": "text", "text": " 초기 HTML 컨텐츠가 없으므로 사용자들이 지루한 로딩 스피너를 많이 보게 될 수도 있습니다.", "styles": {} } ], "children": [] }, { "id": "9e8ea8d0-2794-4dbf-aa9a-17c3eb498ab3", "type": "bulletListItem", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "Chasing waterfalls", "styles": { "bold": true } }, { "type": "text", "text": " 부모 컴포넌트와 자식 컴포넌트 모두 fetching 작업을 해야하는 경우, 부모 컴포넌트의 fetching 작업이 끝날 때 까지 자식 컴포넌트는 기다려야 합니다.", "styles": {} } ], "children": [] }, { "id": "a4504b91-cd4e-4ecd-a829-8aa6c4a5300b", "type": "heading", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left", "level": 3 }, "content": [ { "type": "text", "text": "renderAsYouFetch()", "styles": {} } ], "children": [] }, { "id": "c7e75c71-5f46-4dde-a298-0c869362ce2f", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이러한 문제점을 해결하기 위해서는 Tanstackquery, SWR 와 같이 잘 만들어진 라이브러리나 Remix, NextJS 와 같은 프레임워크가 제공하는 fetch 을 사용할 수 있습니다. ", "styles": {} } ], "children": [] }, { "id": "2f0f4414-d536-4a64-acb5-2c56dbbbc360", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "9bc29927-3f6d-454e-881b-eba761ba871b", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "혹은 React18 에서 Canary 상태인 ", "styles": {} }, { "type": "text", "text": "use", "styles": { "bold": true } }, { "type": "text", "text": " Hook 을 사용할 수 있습니다.", "styles": {} } ], "children": [] }, { "id": "a19095fa-d2d9-44ac-be80-f6c761e665f6", "type": "heading", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left", "level": 3 }, "content": [ { "type": "text", "text": "use?", "styles": {} } ], "children": [] }, { "id": "b1776b20-13c8-4f2c-9a9f-f65edb897597", "type": "callout", "props": { "textColor": "default", "textAlignment": "left", "type": "default" }, "content": [ { "type": "link", "href": "https://github.com/reactjs/rfcs/pull/229", "content": [ { "type": "text", "text": "RFC: First class support for promises and async/await", "styles": { "bold": true, "textColor": "blue" } } ] }, { "type": "text", "text": " \nReact 18 버전에서 Canary 상태인 Hook 입니다. \n", "styles": {} }, { "type": "text", "text": "비동기", "styles": { "bold": true } }, { "type": "text", "text": "를 위한 일급 객체를 제공합니다. \nuse 는 React 만을 위한 await 라고 볼 수 있습니다.", "styles": {} } ], "children": [] }, { "id": "c6f96d43-8f42-4c1b-8238-c82068938f78", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "7f66cd0e-e81b-4587-8f4e-60606e376f90", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "use", "styles": { "code": true } }, { "type": "text", "text": " 는 ", "styles": {} }, { "type": "text", "text": "Promise", "styles": { "bold": true } }, { "type": "text", "text": " 또는 ", "styles": {} }, { "type": "text", "text": "context", "styles": { "bold": true } }, { "type": "text", "text": " 와 같은 리소스의 값을 읽을 수 있게 해주는 Hook 입니다. ", "styles": {} } ], "children": [] }, { "id": "790cb93a-ef58-481a-8c07-6bc8b4681c52", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "use", "styles": { "code": true } }, { "type": "text", "text": " 는 여타 훅들 과는 다르게 ", "styles": {} }, { "type": "text", "text": "반복문, 조건문 내", "styles": { "bold": true } }, { "type": "text", "text": "에서 호출 가능합니다. ", "styles": {} }, { "type": "text", "text": "(단, 컴포넌트 내 함수에서는 호출할 수 없습니다.)", "styles": { "italic": true, "textColor": "gray" } } ], "children": [] }, { "id": "ab4f96a2-5b98-47c6-8c28-b9624a07e1ae", "type": "procode", "props": { "type": "tsx", "data": "function Stort() {\n\tconst items = use(() => fromAPI());\n\n return (\n Someting went wrong

}>\n waiting for message...

}> \n \n \n \n );\n}" }, "children": [] }, { "id": "9419fbe2-c5da-4c5c-8fdc-735487a57de5", "type": "procode", "props": { "type": "tsx", "data": "'use client';\n\nimport { use } from 'react';\n\nexport function Message({ messagePromise }) {\n const messageContent = use(messagePromise); \n return

Here is the message: {messageContent}

;\n}" }, "children": [] }, { "id": "37ba72c1-2348-47a4-9b54-dd9c9309f232", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "use Hook 은 ", "styles": {} }, { "type": "text", "text": "Suspense", "styles": { "bold": true } }, { "type": "text", "text": ", ", "styles": {} }, { "type": "text", "text": "ErrorBoundary", "styles": { "bold": true } }, { "type": "text", "text": " 와 함께 사용하여 ", "styles": {} }, { "type": "text", "text": "fallback 패턴", "styles": { "bold": true } }, { "type": "text", "text": "을 사용할 수 있습니다.", "styles": {} } ], "children": [] }, { "id": "e6dc2607-3ea0-4344-9c0a-9bf3caff5488", "type": "heading", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left", "level": 2 }, "content": [ { "type": "text", "text": "Global Singleton 을 초기화 하는 경우", "styles": {} } ], "children": [] }, { "id": "ecd27153-e6f9-4ae9-8f83-91cfe14ad6b1", "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": "8f9012a3-ac2d-459b-8918-2861fbe4d6f1", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이를 위해 제일 먼저 떠오르는 방법은 ", "styles": {} }, { "type": "text", "text": "최상위 컴포넌트", "styles": { "bold": true } }, { "type": "text", "text": "에서 Effect 를 사용하는 것입니다.", "styles": {} } ], "children": [] }, { "id": "f170c701-51a4-4fd6-9cb1-78d0ba43b999", "type": "procode", "props": { "type": "tsx", "data": "function App() {\n // 🔴 Avoid: Effects with logic that should only ever run once\n useEffect(() => {\n loadDataFromLocalStorage();\n checkAuthToken();\n }, []);\n // ...\n}" }, "children": [] }, { "id": "07d86d90-0020-4981-ba3c-da24302b5e31", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "ce42091c-74a8-4577-8522-00c0d947fbe4", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "strict mode 에서 useEffect 가 두 번 실행되는 것을 우리는 알고 있습니다.", "styles": {} } ], "children": [] }, { "id": "f08e5cd7-4292-4e7b-8023-31909c015184", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "만약 checkAuthToken 함수가 중복적인 validation 에 대해 에러를 던진다면 어떻게 해야할까요? ", "styles": {} } ], "children": [] }, { "id": "d633cb1b-5803-44cf-af80-4039eca7d32b", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "단지 개발 모드에서 두번 실행되는 것이니 예외 케이스로 두는 것이 올바른것 일까요? ", "styles": {} } ], "children": [] }, { "id": "1d3753eb-0ff1-49a4-b4df-c3e0d9b98177", "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": {} }, { "type": "text", "text": "재사용성 ", "styles": { "bold": true } }, { "type": "text", "text": "면에서 더욱 좋습니다.", "styles": {} } ], "children": [] }, { "id": "f6346722-e5c2-4e4e-844b-b45dcf552b2e", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "7847ae67-2ae7-40c6-9bae-fe17792920fc", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "일반적으로 컴포넌트는 다시 마운트 되는 상황에 대해 ", "styles": {} }, { "type": "text", "text": "복원력", "styles": { "bold": true } }, { "type": "text", "text": "을 가져야 합니다. 이는 최상위 컴포넌트인 App 에도 해당 합니다.", "styles": {} } ], "children": [] }, { "id": "9ece563c-6e29-4448-a0a9-7a337826fc43", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "85883f3a-1a72-4844-94f6-d577c31115fc", "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": "f43d87aa-7cbb-45b7-8aa7-b96fca6e42d9", "type": "procode", "props": { "type": "tsx", "data": "let didInit = false;\n\nfunction App() {\n useEffect(() => {\n if (!didInit) {\n didInit = true;\n // ✅ Only runs once per app load\n loadDataFromLocalStorage();\n checkAuthToken();\n }\n }, []);\n // ...\n}" }, "children": [] }, { "id": "a71cf10c-b8f1-4cf8-b355-1497bc19a825", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "bea39c3e-0e48-4ec2-a412-13a46d73f39e", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "혹은 최상위 컴포넌트가 렌더링 되기전에, 즉 앱이 렌더링 되기전에 해당 로직을 실행시키는 방법을 사용할 수 있습니다.", "styles": {} } ], "children": [] }, { "id": "60100bc3-5e71-47f8-b8b1-959ba806d852", "type": "procode", "props": { "type": "tsx", "data": "if (typeof window !== 'undefined') { // Check if we're running in the browser.\n // ✅ Only runs once per app load\n checkAuthToken();\n loadDataFromLocalStorage();\n}\n\nfunction App() {\n // ...\n}" }, "children": [] }, { "id": "dd0e1f61-1fb5-4175-950e-4f1e714b0751", "type": "heading", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left", "level": 2 }, "content": [ { "type": "text", "text": "User Event 를 다루는 경우", "styles": {} } ], "children": [] }, { "id": "801aa146-cc5a-42b5-a335-d88d77d1a5a3", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "마지막으로는 유저 이벤트를 다루는 경우에 대해서 알아보도록 하겠습니다. ", "styles": {} } ], "children": [] }, { "id": "bff797aa-45b1-4947-925e-59d62f44a42e", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "앞서 봤던 Parent Component 예제의 연장선 같은 느낌입니다.", "styles": {} } ], "children": [] }, { "id": "8b11b8ac-c25e-4abd-85d7-93aebd2665df", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "0396f0d3-f4e6-48fb-b59f-38e95f7c26a3", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "우선 어떠한 스트리밍 서비스가 있고. 다음과 같이 곡의 리스트를 나타내는 컴포넌트가 있다고 가정해 보겠습니다.", "styles": {} } ], "children": [] }, { "id": "8902ada4-2f2e-447a-8cf7-d4bcfda87d84", "type": "nextImage", "props": { "backgroundColor": "default", "textAlignment": "center", "name": "https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fa21dd205-3918-495e-8881-a8ab9df55b02%2Fe7e02bad-5950-443e-b5b5-dac11606a88c%2F%25E1%2584%2586%25E1%2585%25AE%25E1%2584%258C%25E1%2585%25A6.png?table=block&id=33f87da0-f555-4ccc-9e7d-676b5d5f06da&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%2Fe7e02bad-5950-443e-b5b5-dac11606a88c%2F%25E1%2584%2586%25E1%2585%25AE%25E1%2584%258C%25E1%2585%25A6.png?table=block&id=33f87da0-f555-4ccc-9e7d-676b5d5f06da&spaceId=a21dd205-3918-495e-8881-a8ab9df55b02&width=2000&userId=&cache=v2", "caption": "", "showPreview": true, "previewWidth": 622 }, "children": [] }, { "id": "6f006a05-1d2e-407c-a753-0e9b2b77a0bf", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "각각의 Track 은 두 개의 버튼을 가지고 있습니다. ", "styles": {} } ], "children": [] }, { "id": "264e854e-ca1b-4cb0-afd5-388f9b2bab8c", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "하나는 재생버튼, 하나는 플레이리스트 추가 버튼입니다. ", "styles": {} } ], "children": [] }, { "id": "2eea6cc8-b5e0-452b-935e-4fc27461fe59", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "두 버튼은 공통적으로 곡을 플레이리스트에 추가합니다. ", "styles": {} } ], "children": [] }, { "id": "7815a3a0-5bed-4702-8970-2327f4e5be44", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "8ff0306e-42b2-4e9b-94f7-db0cb3c95e28", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "두 버튼 중 하나를 누르면 곡이 플레이리스트에 추가 되었기 때문에 곡이 추가되었다는 팝업 UI 를 띄우고 싶습니다.", "styles": {} } ], "children": [] }, { "id": "f4e553c2-7622-44be-8558-9d1bd1a83615", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이를 구현하기 위해서 다음과 같은 코드를 작성했습니다.", "styles": {} } ], "children": [] }, { "id": "3f542788-b8e3-4439-930d-b2569c27a991", "type": "nextImage", "props": { "backgroundColor": "default", "textAlignment": "center", "name": "https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fa21dd205-3918-495e-8881-a8ab9df55b02%2F39427848-681d-42eb-a060-2d7f46bff453%2FuserEvent1.png?table=block&id=0bc8deac-980a-4f08-bbaa-f8a6327a2ccd&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%2F39427848-681d-42eb-a060-2d7f46bff453%2FuserEvent1.png?table=block&id=0bc8deac-980a-4f08-bbaa-f8a6327a2ccd&spaceId=a21dd205-3918-495e-8881-a8ab9df55b02&width=2000&userId=&cache=v2", "caption": "", "showPreview": true, "previewWidth": 648 }, "children": [] }, { "id": "f38aba13-0b70-48a4-b35b-11ebd6ff96a3", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "트랙 아이템 컴포넌트는 부모 컴포넌트로부터 각각의 곡 정보와 곡 정보를 수정하는 함수를 props 로 받아옵니다. ", "styles": {} } ], "children": [] }, { "id": "80c5e2a1-32bd-4db5-91df-96d715ebc3f4", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "그리고 핸들러 함수를 통해서 트랙의 정보를 수정합니다. ", "styles": {} } ], "children": [] }, { "id": "b73cb7e5-ffd8-4425-9608-8ec941f55cea", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "7a32d4c1-fd71-49d8-ac40-f77dfac45cc9", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "트랙의 정보가 변경되면 리렌더링 발생하고 useEffect 를 통해서 PlayListToast 라는 팝업 UI 를 호출하는 함수를 실행하게 됩니다.", "styles": {} } ], "children": [] }, { "id": "0e128084-1e6a-448a-81dc-58822fb1dd22", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "e152402c-9fab-49cf-896d-e9959e60498f", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "여기에서도 Parent Component 사례에서 소개한 문제가 발생합니다. ", "styles": {} } ], "children": [] }, { "id": "f8259f57-e388-4b08-9c4c-0d002e20f8dc", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "버튼을 누르면 부모 컴포넌트의 state 가 변경되고 리렌더링이 진행됩니다.", "styles": {} } ], "children": [] }, { "id": "762ad675-3e31-478a-abaa-28216aad98b2", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "그 후 useEffect 에서 PlayListToast 함수가 실행됩니다. ", "styles": {} } ], "children": [] }, { "id": "1eff72d8-fb09-48e0-bd89-9f528547849c", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "즉 ", "styles": {} }, { "type": "text", "text": "버튼을 누르면 팝업 UI를 렌더링한다.", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 라는 로직이 여러 단계에 걸쳐 실행됩니다. ", "styles": {} } ], "children": [] }, { "id": "99a0522a-d392-40c7-bb12-d6c5b3e43e2b", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이는 useEffect 가 실행되는 시점에 ", "styles": {} }, { "type": "link", "href": "https://www.youtube.com/watch?v=bGzanfKVFeU", "content": [ { "type": "text", "text": "어떠한 액션", "styles": { "bold": true } } ] }, { "type": "text", "text": "을 통해서 useEffect 가 실행되었는지 ", "styles": {} }, { "type": "text", "text": "추적할 수 없다는 문제", "styles": { "bold": true } }, { "type": "text", "text": "를 발생시킵니다.", "styles": {} } ], "children": [] }, { "id": "b8da461b-cf07-4bc7-ba69-62ed81977726", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "9018fdf2-ba77-4a02-8ec0-b1b8628a5c42", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이를 해결하기 위해 다음과 같이 코드를 수정했습니다.", "styles": {} } ], "children": [] }, { "id": "c3350410-27be-4251-8aa6-03f3bbe71967", "type": "nextImage", "props": { "backgroundColor": "default", "textAlignment": "center", "name": "https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fa21dd205-3918-495e-8881-a8ab9df55b02%2F2008b66c-869c-4e35-85b7-5a4dee342eec%2FuserEvent2.png?table=block&id=f77b87ae-3721-4d16-ab33-f59ecf2a8e7b&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%2F2008b66c-869c-4e35-85b7-5a4dee342eec%2FuserEvent2.png?table=block&id=f77b87ae-3721-4d16-ab33-f59ecf2a8e7b&spaceId=a21dd205-3918-495e-8881-a8ab9df55b02&width=2000&userId=&cache=v2", "caption": "", "showPreview": true, "previewWidth": 620 }, "children": [] }, { "id": "946d3189-015d-47af-9cd9-4664d7bac8b0", "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": "b88deccf-2cc8-4d39-8d88-7b5e8e6fa165", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "해당 함수에서 playList 에 대한 업데이트와 UI 호출을 동시에 처리합니다. ", "styles": {} } ], "children": [] }, { "id": "93fd4f62-ab4d-4678-9b7f-e6c5511cfe07", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "b7d1ddc3-f673-4f87-bf2a-0a7dbea2e923", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이를 통해 ", "styles": {} }, { "type": "text", "text": "버튼을 누르면 팝업 UI 가 렌더링된다.", "styles": { "backgroundColor": "gray" } }, { "type": "text", "text": " 라는 로직이 하나의 사이클에서 처리되고 어떠한 이벤트 핸들러를 통해서 로직이 실행되는지 ", "styles": {} }, { "type": "text", "text": "추적하기 한결 쉬워졌습니다.", "styles": { "bold": true } } ], "children": [] }, { "id": "ba4b8aab-1171-4222-a260-6c148921a375", "type": "separator", "props": { "type": "default" }, "children": [] }, { "id": "dd8a4f7c-e79d-423a-91d7-9fdaf180df24", "type": "heading", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left", "level": 1 }, "content": [ { "type": "text", "text": "마치며", "styles": {} } ], "children": [] }, { "id": "c7ca2eef-6db1-4603-8539-11325b18fefc", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "지금까지 useEffect 의 동작방식과 그에 맞는 활용에 대해서, 그리고 useEffect 를 대체할 수 있는 몇 가지 케이스들을 알아보았습니다.", "styles": {} } ], "children": [] }, { "id": "ab3ca955-7846-4ab5-8e96-7772d336b2fb", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이를 통해서 useEffect 라는 ", "styles": {} }, { "type": "text", "text": "도구", "styles": { "bold": true } }, { "type": "text", "text": "의 올바른 활용법을 이해하고 좀 더 잘 알게 되었습니다.", "styles": {} } ], "children": [] }, { "id": "42679d7a-f083-4ede-a011-e291f1c57835", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "3442290c-05f5-4549-9d0c-a777f2957284", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이번 레시피에서 저는 이런 말을 남기고 싶습니다.", "styles": {} } ], "children": [] }, { "id": "671e22e1-a9a8-4e50-a7a2-abbed13efcda", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "5b884c2a-c62d-4527-adc4-010025de0f5e", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "\"도구의 용법에 매몰되지 말자.\"", "styles": { "bold": true, "italic": true } } ], "children": [] }, { "id": "8c84c6f1-5700-4dd6-b2f5-4f72e10c056c", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "2dfa1f31-a239-48b9-b48f-98f49ad2736f", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "React 는 우리가 잘 알고 있듯 웹 개발을 위해 편리한 기능들을 모아둔", "styles": {} }, { "type": "text", "text": " 라이브러리", "styles": { "bold": true } }, { "type": "text", "text": " 입니다.", "styles": {} } ], "children": [] }, { "id": "3b070b13-5f19-48e9-8485-1a3856fe575e", "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": "bcb5b69e-7fbc-4dd9-a434-1a36b9fca3cb", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "30bf1340-0de7-4b23-b283-f3297b3fac47", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "당장 벽에 못을 박아야하는 상황에 망치가 없다고 망치를 찾을 때까지 못을 못 박고 있는 상황이 과연 올바른 상황일까요?", "styles": {} } ], "children": [] }, { "id": "7d03acc3-f03b-45bf-9697-f866113a2bb2", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "지금 당장 옆에 있는 드라이버로는 못을 박을 수는 없는 걸까요?\n드라이버의 손잡이 부분을 적절히 사용하면 망치를 사용했을 때와 큰 차이 없이 못을 박을 수 있지 않을까요?", "styles": {} } ], "children": [] }, { "id": "99788aa8-e16c-4233-a933-979304e07b85", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "df5f7c5f-f6c0-49a3-b6da-895e3a4b74ff", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "물론 숙련된 기능공이라면 망치를 찾아 헤매는 일이 없을 것 입니다.", "styles": {} } ], "children": [] }, { "id": "6b4590bd-4081-4c65-b064-4d4d891daaf4", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "f2330da4-8219-4e46-8b04-a789d5ae8e5f", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이렇듯 충분히 숙련된 개발자라면 각 기능들을 적재적소에 올바른 용법에 맞게 사용할 수 있을 것 입니다.", "styles": {} } ], "children": [] }, { "id": "df14a8a5-7dde-43b2-947b-fea99418d36c", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "그럼에도 useEffect 의 올바른 사용법에 맞지 않지만 useEffect 외의 다른 방법이 떠오르지 않는다고 ", "styles": {} }, { "type": "text", "text": "과도하게 시간을 낭비", "styles": { "bold": true } }, { "type": "text", "text": "하는 것은 옳지 않다고 생각합니다.", "styles": {} } ], "children": [] }, { "id": "eda84297-a1e5-4e86-8d51-e6915f70f520", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "당장 떠오르는 방식을 사용하여 구현을 하고 추후에 더 나은 방법이 떠오른다면 그때 개선을 하는 것이 더 올바른 방법이라고 저는 생각합니다.", "styles": {} } ], "children": [] }, { "id": "82428f28-52b4-49b8-8590-6ea3d742a18e", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "b75510f9-bf11-4d51-8d3c-616af70e6b14", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "우리가 사용하는 기술의 용도에 대해 잘 이해하는 것은 매우 중요합니다.", "styles": {} } ], "children": [] }, { "id": "2a9a9878-d10d-427d-9b2b-bf71151592e2", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "또한 기술의 용도에 매몰되어 경직된 사고를 가지는 것을 경계하는 것 또한 중요하다고 생각합니다.", "styles": {} } ], "children": [] }, { "id": "855677d5-2201-465e-bd5b-420403b4c1e3", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "f448cbfa-8fd0-4bb8-8234-18a31c852498", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "도구는 도구일 뿐", "styles": {} } ], "children": [] }, { "id": "71059510-5bde-41c8-9d6f-41900d0199c8", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "우리의 창의력을 제한하는 것이 아닌, 창의력을 표출시키는 용도로 사용되어야 한다고 생각합니다.", "styles": {} } ], "children": [] }, { "id": "b14c6b19-9cc4-4b58-a0a4-0cbf8ff58332", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "61c60991-cf19-4f31-813b-24042aec8e5f", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "과감하게 드라이버로 망치질을 해봅시다.", "styles": {} } ], "children": [] }, { "id": "adb20b8a-1107-4bab-8eb6-64355dcdd14f", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "도구는 결국 우리가 어떻게 사용하느냐가 중요한 것이니까요!", "styles": {} } ], "children": [] }, { "id": "e2628c8b-5f7b-4feb-b160-6e40546cec16", "type": "separator", "props": { "type": "default" }, "children": [] }, { "id": "0307f310-0d35-4acd-a94e-f65d14ee3d46", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "174eb1fa-bb6f-456a-9277-bdd7cf0eaf6a", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "강연 영상이 올라왔을 때 큰 배움을 얻을 수 있었습니다.", "styles": {} } ], "children": [] }, { "id": "e14ec6f2-98b3-4a28-b96b-4affcecfec95", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "많은 시간이 흘러 데브코스를 통해서 그 배움을 다른 분들께 나눌 수 있게 되어 큰 보람과 감사함을 느낍니다.", "styles": {} } ], "children": [] }, { "id": "06e9c2d9-a3e5-4c8e-9f0b-ef050e99f448", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "7dd833e7-5f39-4f9f-9d71-e44be1898b32", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "text", "text": "이번 레시피의 내용들은 다음 링크를 통해서 실제 시연과 함께 확인하실 수 있습니다!", "styles": {} } ], "children": [] }, { "id": "01b48d95-9a70-431c-afaf-5c13caeaa7ca", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "link", "href": "https://www.youtube.com/watch?v=0A0_cXY6cGc&t=545s", "content": [ { "type": "text", "text": "오원주 - 당신은 useEffect가 필요 없을 수도 있습니다.｜프론트엔드 데브코스 5기 딥다이브｜231206", "styles": { "bold": true, "textColor": "blue" } } ] } ], "children": [] }, { "id": "4a58b8ea-6399-48ee-b545-7051008a8d72", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "49dc92e0-ad29-4674-b701-98cb52421626", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [ { "type": "link", "href": "https://go-away-use-effect.vercel.app/", "content": [ { "type": "text", "text": "발표 웹 사이트 | https://go-away-use-effect.vercel.app/", "styles": { "bold": true, "textColor": "blue" } } ] } ], "children": [] }, { "id": "c64291cb-9f43-41ce-b0d2-e6b049e21ecb", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] }, { "id": "cd321eec-81e8-4942-b5cb-57882301b72d", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] } ]

useEffect 야 가라 재미 없다~ - useEffect 올바르게 사용하기