IT & Tech

https://codesandbox.io/s/explorer-l44v98?file=/index.js

위 소스는 자식이 2개 이상 있으면 2개가 한꺼번에 오픈되는 에러 있음, 아래는 에러 수정한 버젼

context 생성: import { createContext } from "react"

import { createContext } from "react";

// 기본값으로는 null을 넣어준다.
export const ThemeContext = createContext(null);

context 연결 <ThemeContext.Provider value={{ isDark, setIsDark }}>

import { useState } from "react";
import "./App.css";
import Page from "./Compopnents/Page";
import { ThemeContext } from "./context/ThemeContext";

function App() {
  const [isDark, setIsDark] = useState(false);

  return (
    // 📌
    <ThemeContext.Provider value={{ isDark, setIsDark }}>
      <Page />
    </ThemeContext.Provider>
  );
}
export default App;

context 사용 & 변경

• import { useContext } from "react"
• const { isDark, setIsDark } = useContext(ThemeContext);이때 setIsDark 콜하면 전체화면 refresh됨

import { useContext } from "react";
 // 📌 
import { ThemeContext } from "../context/ThemeContext";

const Header = () => {
  // 📌 
  const { isDark, setIsDark } = useContext(ThemeContext);////////////////////////
  return (
    <header
      className="header"
      style={{
        backgroundColor: isDark ? "black" : "lightgray",
        color: isDark ? "white" : "black",
      }}
    >
      <h1>Welcome 홍길동!</h1>
    </header>
  );
};

export default Header;

context를 가장 상위에서 불러와서 쓰기 때문에 전체 화면 refresh되는 것인지?

context를 state전용, dispatch전용으로 나누어써야 불필요한 렌더링 막을수 있다고 하는 예제https://velog.io/@shin6403/React-ContextAPI-%EC%9D%B4%EB%A0%87%EA%B2%8C-%EC%8D%A8%EB%B3%B4%EC%9E%90

useReducer, useCallback, memo등을 같이 사용하고 있음

에러: Promise로 받은 state의 변화를 감지하려고 하여 useEffect사용했으나, Promise결과가 반환되기 전에 useEffect가 한번만 call되고 결과값이 나온후에 다시 call되지 않음

에러: promise결과값을 useMemo로 저장시 끝까지 promise상태고 남아 있어 에러남

정상

아래 함수를 useEffect(,[])에서 못 부름

위치가 문제인가?

https://velog.io/@rkio/Typescript-React%EC%97%90%EC%84%9C-useRef-%EC%97%AC%EB%9F%AC-%EA%B0%9C-%ED%95%9C%EB%B2%88%EC%97%90-%EC%84%A0%EC%96%B8%ED%95%98%EA%B8%B0useRef-%EB%B0%B0%EC%97%B4-%EB%A7%8C%EB%93%A4%EA%B8%B0

Uncaught Error: The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.

-> .e-checkboxfilter .e-filter-popup .e-control .e-dialog .e-lib .e-popup .e-popup-open

로 수정하니까 정상동작함