그린그린티라떼

"Objects are not valid as a React child (found: [object Promise])" 위와 같은 에러가 발생했다. 이 에러는 비동기 작업이 완료되기 전에 프로미스 객체가 렌더링되어 발생하는 문제다. 주로 useEffect 내에서 비동기 작업을 수행하고 해당 작업이 완료되기 전에 컴포넌트가 렌더링되면서 에러가 발생한다. 1. 'useEffect' 내에서 비동기 작업을 수행한다. 2. 해당 작업이 완료되기 전에 컴포넌트가 렌더링된다. 3. 렌더링 시점에넌 아직 프로미스가 해결되지 않아 `[object Promise]`가 렌더링되어 오류가 발생한다. 해결방법은 비동기 작업이 완료된 후에 상태를 업데이트하고, 그 상태를 렌더링하면 된다. 예를 들어 다음과 같이 고쳐보자. imp..

One of your dependencies, babel-preset-react-app, is importing the "@babel/plugin-proposal-private-property-in-object" package without declaring it in its dependencies. This is currently working because "@babel/plugin-proposal-private-property-in-object" is already in your node_modules folder for unrelated reasons, but it may break at any time. babel-preset-react-app is part of the create-react-..

React에서 User Data를 관리하기 위해 ContextAPI를 사용해보았다. import { Outlet } from 'react-router-dom'; import AuthContextProvider from './components/context/AuthContext'; import Navbar from './components/Navbar'; function App() { return ( ); } export default App; 최상단의 App.js 파일은 아래와 같다 내가 사용한 ContextAPI코드는 AuthContext.js에 담겨져있다 App 컴포넌트에서 AuthContextProvider로 감싸서 ContextAPI를 사용하면 된다. import { createContext, ..

[Immer] An immer producer returned a new value *and* modified its draft. Either return a new value *or* modify the draft. 오늘 개발하면서 이런 에러를 마주쳤다. immer producer가 새로운 값을 리턴한다는 내용인데 해결해보자. 간단하다! 1. 에러가 난 코드 2. 수정된 코드 차이가 보이시나요??JavaScript 화살표 함수를 사용할 때 {}에는 로직이 들어가고 {}로 감싸지 않으면 값이 리턴된다. ⭐️ 꼭 유의해서 개발하자!! ⭐️

React에서 불변성을 지키지 않으면 컴포넌트에서 예상하지 못한 동작을 일으킬 수 있다. 또한 React 성능 최적화에도 영향을 미칠 수 있다. import React, { useState } from 'react'; function MutableStateExample() { // 잘못된 방법: 불변성을 지키지 않음 const [items, setItems] = useState([1, 2, 3]); const addItem = () => { // 배열에 새로운 아이템을 추가하는데 push를 사용하면 안됨 items.push(4); setItems(items); // 상태를 직접 업데이트하면서 불변성을 지키지 않음 }; return ( {items.map(item => ( {item} ))} Add Ite..

React에서 Component를 나누는 기준 재사용성 DRY - Don't Repeat Yourself 단일책임 SR - Single Responsibility useMemo, useCallback등을 통한 최적화를 하는 이유? - 함수형 컴포넌트는 단순히 그냥 함수이다. jsx를 반환하는 함수이다. - 컴포넌트가 렌더링 된다는 것은 누군가 그 함수(컴포넌트)를 호출하여 실행되는 것을 의미한다. 함수가 실행될 때마다 내부에 선언되어 있던 표현식(변수, 또 다른 함수 등)도 매번 다시 선언되어 사용된다. - 컴포넌트는 자신의 state가 변경되거나 부모에게서 받는 props가 변경되었을 때마다 리렌더링 된다. 하위 컴포넌트에서 최적화 설정을 해주지 않으면 부모에게서 받는 props가 변경되지 않더라도 리..

Redux의 단방향 데이터 흐름이란? - state는 특정 시점의 앱 상태를 설명한다. - UI는 해당 상태를 기반으로 렌더링된다. - 어떤 이벤트가 발생하면 발생한 일에 따라 state가 업데이트 된다. - 새로운 상태에 따라 UI가 다시 렌더링된다. 위의 이미지는 리덕스에 대해 알고 있어요! 하면 무조건 설명이 가능해야하는 그림이다. 아래의 설명을 외우기보다는 그림을 보며 꼭! 이해해야한다. 사실 별 거 없다ㅎㅎ Redux에 대해 기억해야 되는 것들 ✔️Redux는 전역 어플리케이션 상태를 관리하기 위한 라이브러리이다. - Redux는 일반적으로 Redux와 React를 함께 통합하기 위해 React-Redux 라이브러리와 함께 사용된다. - Redux Toolkit는 Redux 로직을 작성하는 데 ..

React를 사용하면 거의 필수적으로 사용하는 Redux 그런데 막상 Redux에 대해 설명하려고 하니 잘 모르겠어서 정리해본다. 우선 공식 홈페이지를 참고해서 글을 작성한다. https://redux.js.org/ Redux - A predictable state container for JavaScript apps. | Redux A predictable state container for JavaScript apps. redux.js.org Redux? JS앱을 위한 예측 가능한 상태 컨테이터 ✔️ 예측 가능 - Redux는 일관성 있게 동작하고 다양한 환경(클라이언트, 서버)에서 실행되며 테스트하기 쉬운 어플리케이션을 작성하는데 도움이 된다. ✔️ 중앙 집중식 - Redux DevTools를 사용..

클래스형 컴포넌트는 잘 사용하지 않음 함수형 컴포넌트를 주로 사용함 + hooks 하지만 유지 보수할 때 가끔 쓰일 수 있기 때문에 알아두기, 꼭 필요한 경우에만 사용하기 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 import React, { Component } from "react"; class Hello extends Component { render() { const { color, isSpecial, name } = this.props; return ( {isSpecial && *} 안녕하세요 {name} ); } } // function Hello({ color, name, isSpecial ..

class -> className for -> htmlFor 1 입력 cs