{"id":26823921,"url":"https://github.com/romantech/react-context-api-rendering-test","last_synced_at":"2026-05-18T06:13:24.544Z","repository":{"id":60113178,"uuid":"540907995","full_name":"romantech/react-context-api-rendering-test","owner":"romantech","description":"React Context API 렌더링 최적화 스터디","archived":false,"fork":false,"pushed_at":"2024-11-02T10:48:47.000Z","size":878,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-02T11:26:35.395Z","etag":null,"topics":["codesandbox","context-api","react"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/github/romantech/react-context-api-rendering-test","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/romantech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-09-24T17:17:44.000Z","updated_at":"2024-11-02T10:48:49.000Z","dependencies_parsed_at":"2024-06-27T04:54:30.861Z","dependency_job_id":"1086841b-8919-4b32-8386-18abba2ba0de","html_url":"https://github.com/romantech/react-context-api-rendering-test","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/romantech%2Freact-context-api-rendering-test","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/romantech%2Freact-context-api-rendering-test/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/romantech%2Freact-context-api-rendering-test/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/romantech%2Freact-context-api-rendering-test/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/romantech","download_url":"https://codeload.github.com/romantech/react-context-api-rendering-test/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246296578,"owners_count":20754635,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["codesandbox","context-api","react"],"created_at":"2025-03-30T09:17:09.688Z","updated_at":"2026-05-18T06:13:24.508Z","avatar_url":"https://github.com/romantech.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Context API 렌더링 최적화 스터디\n\n![2022-09-25 22 11 32](https://user-images.githubusercontent.com/8604840/192145269-5fda479d-41bf-43e0-9156-96cca7e22307.gif)\n\n\n### TL;DR\n\n리액트에서 제공하는 ContextAPI를 사용하면 원하는 상태(값)를 전역적으로 사용할 수 있다. 컴포넌트끼리 특정 상태를 공유할 때도 유용하다. 하지만 `Context.Provider` 하위에서 컨텍스트를 구독하는 모든 컴포넌트는 값을 변경할 때마다 리렌더링 된다. `Context.Provider` 값이 업데이트되면 `useContext` 훅이 최신 컨텍스트 값을 사용해 컴포넌트 리렌더를 트리거하기 때문이다. \n\n이처럼 ContextAPI는 렌더링 최적화에 일일이 신경써야하는 단점이 있다. [여러 최적화 방법](https://github.com/facebook/react/issues/15156#issuecomment-474590693)중에서 상태/디스패치 단위로 컨텍스트를 쪼개는 방식이 가장 간단하다. 대신 Provider가 너무 많아지는 단점(Wrapper Hell)이 있다.\n\n- context 상태가 변경될 때마다 해당 Context.Provider 안쪽에서 상태를 구독(소비)하는 모든 컴포넌트가 리렌더링 된다\n- 상태(state)와 디스패치(dispatch) 함수를 동일한 Context에 넣으면, 디스패치 함수만 필요한 컴포넌트도 상태 업데이트시 리렌더링 된다 ⚡️\n- 상태/디스패치 함수 전용 Context를 각각 만들면 불필요한 리렌더링을 방지할 수 있다\n- 상태/디스패치 함수를 같은 Context에 넣어야 한다면 `useMemo`를 사용해서 리렌더링을 방지할 수 있다 ⚡️\n- 이외에도 `React.memo`를 사용해서 컨텍스트 값을 prop으로 받는 컴포넌트를 만들거나, [use-context-selector](https://github.com/dai-shi/use-context-selector) 같은 라이브러리 등을 사용해서 불필요한 리렌더링을 방지할 수 있다\n\n### 관련 링크\n- [노션에서 전체 글 보기](https://www.notion.so/colorfilter/TIL-React-Context-API-ee62683c29fb40699efe424f13a6028e)\n- [CodeSandbox](https://codesandbox.io/s/react-context-api-rendering-test-xhg6fp)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fromantech%2Freact-context-api-rendering-test","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fromantech%2Freact-context-api-rendering-test","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fromantech%2Freact-context-api-rendering-test/lists"}