sohyeon kim

💡 감싸지지 않은 컴포넌트에서 "useContext" 훅을 사용하려고 할 때 발생하는 에러를 처리해보자. ✔️ 컨텍스트 프로바이더 확인하기특정 컴포넌트에서 useContext 를 사용할 때 해당 컴포넌트가 Context.Provider 로 감싸져 있는지 확인한다.Provider 컴포넌트로 감싸지지 않았다면, 컨텍스트 데이터를 가져올 수 없다. 장점 : 특정 컴포넌트에서 사용될 때만 확인하기 때문에 특정한 컴포넌트와 관련된 에러 메시지 제공 가능.단점 : 컨텍스트를 사용하는 모든 컴포넌트마다 동일한 검사 반복 필요 import React, { createContext, useContext } from 'react';// Context 생성const MyContext = createContext();con..

💡 특정멤버에게 편지를 작성하고, 멤버 페이지마다 그 멤버의 편지함을 볼 수 있는 사이트 😇 props 로 내려줬던 데이터들을 useContext 로 바꾸다가 생긴 에러 모든 페이지에서 쓰고 있는 letter 들은 잘 내려줬는데.. 편지가 저장될 멤버 데이터를 내려주다가 에러가 생겼다. 검색해보니.. 오타나, 경로를 이상하게 가져왔을 거라고 나오길래 이름을 다 복붙해가며 수정해봤는데도 해결이 안됐다. 자꾸 저 ToHeader 에서 쓸 name 이 에러가 떠서 최상위에서 내려줬는데 왜 안되지??! 했으나 Member.jsx 에서 Provider 로 감싼 상태에서 Detial.jsx 에서도ToHeader 컴포넌트를 써서 생긴 문제였다. 🥵 그래서 데이터를 쓸 .. 최상위인 Layout 에 Provider 를..

💡 props 없이 데이터를 공유해보자 App.jsx ➡️ GranFa.jsx ➡️ Father.jsx ➡️ Child.jsx App.jsx import "./App.css"; import GrandFa from "./components/GrandFa"; function App() { return ; } export default App; FamilyContext.js createContext 를 만든다. import { createContext } from "react"; export const FamilyContext = createContext(null); GranFa.jsx 데이터를 내려줄(공유할) 그랜파 파일에 FamilyContext import import { FamilyContext } f..