본문 바로가기

context api

(5)
[React] Context API를 활용한 전략 패턴 원문 : https://itnext.io/the-interface-mindset-how-to-build-flexible-maintainable-react-components-with-context-api-8b332d76f6b9 The Interface Mindset: How to Build Flexible, Maintainable React Components with Context API Thinking in interfaces can enhance the flexibility and maintainability of the code, despite appearing more complex at first glance. itnext.io React의 Context API는 Prop Drilling을 피..
리액트의 의존성 주입 with Context API (dependency injection) 중간에 useContext훅을 끼워넣으면 Consumer가 사라지고, 컴포넌트는 Context의 존재에 대해 몰라도 됨. 같이 보면 좋을 글 https://itchallenger.tistory.com/646 리액트 프로젝트의 결합도를 관리하는 방법 원문 : https://betterprogramming.pub/coupling-cohesion-552b022492b2 Organizing Modules in React Project — Low Coupling and High Cohesion Design robust applications betterprogramming.pub 서로 분리되.. itchallenger.tistory.com https://itchallenger.tistory.com/644 리액트 ..
새로운 리액트 공식문서로 배우는 Context API 2편 : 리듀서와 컨텍스트로 애플리케이션 확장하기 원문 보기 : https://beta.reactjs.org/learn/scaling-up-with-reducer-and-context Scaling Up with Reducer and Context A JavaScript library for building user interfaces beta.reactjs.org 리듀서를 사용하면 컴포넌트의 상태 업데이트 논리를 통합할 수 있습니다. (+핸들러의 변경 필요 X) 컨텍스트를 사용하면 데이터를 컴포넌트 트리 깊숙히 전달할 수 있습니다. 리듀서와 컨텍스트를 결합하여 복잡한 화면의 상태를 관리할 수 있습니다. 해당 문서는 딱히 주목할만한 내용이 없네요. 오늘 배울 내용 리듀서를 컨텍스트와 결합하는 방법 props를 통한 상태 및 디스패치 전달을 ​​피하는 ..
새로운 리액트 공식문서로 배우는 Context API 1편 : 프롭 드릴링 해결하기 원문 링크 : https://beta.reactjs.org/learn/passing-data-deeply-with-context 컨텍스트를 사용하면 부모 컴포넌트가 무언가를 props를 통해 명시적으로 전달하지 않아도 하위 컴포넌트가 얼마나 깊은 곳에 존재하는지 여부에 관계없이 하위 트리의 모든 컴포넌트에서 일부 정보를 사용할 수 있도록 합니다. 배울 내용 "프롭 드릴링"이란 반복적인 prop 전달을 컨텍스트로 바꾸는 방법 컨텍스트의 일반적인 사용 사례 컨텍스트의 대안 "프롭 드릴링"이란 보통 공유 상태는 상위 컴포넌트로 올립니다. 이 경우 매우 아래에 있는 컴포넌트에 전달하기 곤란해 질 수 있죠. 이처럼 여러 단계에 거처 prop을 전달하는 것을 prop drilling이라 합니다. props를 전달하..
Context API(컨텍스트API)는 Dependency Injection(의존성 주입) 수단이다. 원문 : React Context for Dependency Injection Not State Management (testdouble.com) React Context for Dependency Injection Not State Management Dive into the concept that React Context API is primarily a tool for injecting dependencies into a React tree and how we can use that to improve testability, reusability, and maintainability of our … blog.testdouble.com TLDR : ContextAPI는 전이적 의존성을 추상화하기 위..