IT & Tech

react-dom.development.js:86 Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components

react-dom.development.js:86 Warning: `value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components.

서버에 올리면 onLoad, onError event 둘다 안탈때가 있음 왜그런지는?

<label class="required">Name:</label>
<input type="text">

<style>
  .required:after {
    content:" *";
    color: red;
  }
</style>

https://stackoverflow.com/questions/11197671/use-css-to-automatically-add-required-field-asterisk-to-form-inputs

{route.path === "/board/viewimage" && (
              <>
                <meta name="viewport" content="initial-scale=1,width=device-width,user-scalable=1" />
              </>
            )}

TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at editorwatchdog.js:179:1
    at async u._initializeEditor (index.js:5:4518)
    at async u.componentDidMount (index.js:5:3736) {phase: 'initialization', willEditorRestart: false}

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등을 같이 사용하고 있음

처음 적용하고 됐는데 새 컴퓨터에 설치하니 경로이동이 안되었음 - jsconfig.json 파일을 그냥 고치고나서 해보니 다시 됨

이 경우는 @hooks/* 로 커버안됨,

에러발생해서 아래 블로그 발견

https://m.blog.naver.com/theonlyoneu/221981154881

https://github.com/mobxjs/mobx-devtools 로 가서 npm install mobx-devtools설치하고 크롬 플러그인 설치 후 npm run start webapp:local 했으나 아래 아래 발생

ERROR in ./src/store/ParamStore.js 2:0-48
Module not found: Error: Can't resolve 'mobx-devtools-mst' in 'C:\dev\csportalfront\src\store'
resolve 'mobx-devtools-mst' in 'C:\dev\csportalfront\src\store'
  Parsed request is a module
  using description file: C:\dev\csportalfront\package.json (relative path: ./src/store)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module