[React] Context API - useContext() Context API React.createContext() 📌 Context (객체) 생성 const MyContext = React.createContext(기본값); 리액트에서 렌더링이 일어날 때, context를 구독하는 하위 컴포넌트가 나오면 현재 context의 값을 가장 가까이에 있는 상위 레벨의 Provider로부터 받아오게 된다. 만약 상위 레벨에 매칭되는 Provider가 없다면 기본값이 사용된다. 기본값은 Provider 없이 컴포넌트를 테스트할 때 유용하며, 기본값으로 undefined를 넣으면 기본값이 사용되지 않는다. Context.Provider 하위 컴포넌트들이 해당 context의 값을 사용할 수 있도록 전달해 준다. (Provider→제공자) 모든 Context 객체는 P.. [React] Context 개념 및 특징 Context Context란, 기존의 일반적인 리액트 컴포넌트는, 컴포넌트의 props를 통해 데이터를 전달한다. 하지만 이러한 전달 방식은 '부모 → 자식'의 일방향이기 때문에, 아래로 들어갈수록 코드가 복잡해진다. 그러므로 여러 컴포넌트에 걸쳐 자주 사용되는 데이터의 경우, Context를 사용한다. 언제 Context를 사용해야 할까? 여러개의 컴포넌트들이 접근해야 하는 데이터 ➰ 로그인 여부, 로그인 정보, UI 테마, 현재 언어 등 📌 prop를 통해 데이터를 전달하는 경우 ( 기존 방식 ) function App(props){ return } function Toolbar(props) { // 이 Toolbar 컴포넌트는 ThemeButton에 theme를 넘겨주기 위해서 'theme' pr.. 이전 1 다음
