useContext 2

contextAPI와 useContext 사용법 (다크모드 구현) 2 - 더사용쉬운 버전으로 만들기!! (리팩토링)

전역적인 상태관리를 위해서 contextAPI와 useContext를 사용하였다. 필요없는 컴포넌트에까지 props drilling을 해줄때보다 가독성측면이나, 효율성, 유지보수 모두 뛰어나다. 하지만 필요한 페이지마다 import를 많이 해주는 나름의 단점(?)이 존재한다. 그래서 이것을 조금이라도 줄여보조자하는 방법을 적어보고자 한다. 어제 만들었던 다크모드의 리팩토링을 통해 useContext를 다른 방식으로도 사용해보겠다. //footer.js import React, { useContext } from "react"; import { ThemeContext } from "./ThemeContext"; export default function Footer() { const { isDark, se..

React 2023.03.17

contextAPI와 useContext 사용법 (다크모드 구현하기)

1️⃣ contextAPI와 useContext 사용이유 🤬 전역적인 정보들을 props로 전달하려면 단계별로 일일이 다 써주고, 수정시에도 불편하다. 🤬 전역적인 정보: User, 테마, 언어 ✅ 이럴때 사용하는 contextAPI, useContext ✅ 리액트에서는 이러한 문제점을 해결하기 위해서 contextAPI를 제공한다. context는 앱안에서 전역적으로 사용되는 데이터들을 여러컴포넌트끼리 쉽게 공유할 수 있는 방법을 제공한다. ➡️ 일일이 props로 제공하지 않아도 상위컴포넌트에서 전역적인 정보를 해당 컴포넌트로 바로 제공할 수 있어서 편리 2️⃣ useContext 사용법 🔫 다크모드 만들어보기 🔫 1. contex이름.js 파일을 생성한다. 2. createContext를 impor..

React 2023.03.15