Framework/React6 React 개발자 알면 좋은 안티 패턴 ※ 아래 내용은 생성형 AI 도움을 받아 작성했습니다.1. 상태 직접 변경❌ 안티패턴: 상태를 직접 변경하면 React가 렌더링하지 않습니다.const [tasks, setTasks] = useState([]);tasks.push(newTask); // 잘못된 방법✅ 올바른 방법: 불변성을 유지하며 상태 업데이트 함수를 활용합니다.setTasks(prevTasks => [...prevTasks, newTask]);2. 리스트에서 인덱스를 키로 사용❌ 안티패턴: 배열의 인덱스를 key로 사용하면 성능 문제 및 버그가 발생합니다.{tasks.map((task, idx) => ( ))}✅ 올바른 방법: 안정적인 고유 식별자를 사용합니다.{tasks.map(task => ( ))}3. 파생 가능한 상태를 과.. 2025. 5. 23. [React] Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it. 이슈 1 router element를 컴포넌트로 호출안해서 생긴 이슈입니다. import React from "react"; import Home from "pages/Home"; import { createBrowserRouter, RouterProvider } from "react-router-dom"; const router = createBrowserRouter([ { path: "/", element: Home, }, ]); function App() { return ( ); } export default App; 해결 방안 import React from "react"; import Home from "pages/Home"; import { createBrowserRouter, RouterPr.. 2023. 9. 17. Warning Received 'true' for non-boolean attribute react-dom.development.js:84 Warning: Received `true` for a non-boolean attribute `{속성이름}`. If you want to write it to the DOM, pass a string instead: {속성이름}="true" or {속성이름}={value.toString()}. style-componets에서 속성에 맞지 않는 값을 넣으면 나타나는 경고 문구입니다. 올바른 속성 값을 넣으면 더이상 표기안되는 걸 확인하실 수 있습니다. 2023. 9. 1. [React] React 새로운 Root Document 생성하기 React 18.2.0 기준으로 작성 된 글입니다. 필자에 경우 react-force-graph를 사용해서 3D 차트를 구현하던 중 싱글 페이지로 구현이 되어있어 여러개의 차트를 그릴 경우 아래와 같이 타입에러가 발생했습니다. Cannot read properties of undefined (reading 'children') TypeError: Cannot read properties of undefined (reading 'children') at emptyObject (http://localhost:3000/static/js/bundle.js:663004:14) at _objectSpread2.objBindAttr (http://localhost:3000/static/js/bundle.js:6630.. 2023. 8. 8. [React] Uncaught ReferenceError: Buffer is not defined in React 리액트 17 버전에서 18 버전으로 변경하면서 아래와 같은 오류가 나와서 해결한 내용을 정리합니다. Uncaught ReferenceError: Buffer is not defined in React 해결방안 buffer 설치 npm npm install --save buffer yarn yarn add buffer --save App.js 추가 import React from "react"; ... import { Buffer } from "buffer"; Buffer.from("anything", "base64"); window.Buffer = window.Buffer || require("buffer").Buffer; const App = () => { ... }; export default App.. 2023. 8. 1. [React] ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://react.dev/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis How to Upgrade to React 18 – React The library for web and native user interfaces react.dev React 17 버전에서 18 버전으로 변경 했을 시 생기는 이슈.. 2023. 8. 1. 이전 1 다음
