Web Dev/react.js (16) 썸네일형 리스트형 Warning: A component is changing an uncontrolled input to be controlled. 리엑트 인풋 에러 해결 방법 개발한 화면 게시판 개발을 하는데 해당 에러가 발생한다 input 태그 쪽에서 발생하는 건 확실하다 테스트에는 전혀 문제가 없지만 해당 에러가 불편하다 . 페이지 화면이 렌더링 될 때 input 태그에 undefined 값이 들어가서 발생하는 문제이다 이러면 그냥 그래서 일단 인풋에 || 연산자로 undefined일 때 공백을 지정해주면 에러가 없어질 것이다. 하지만 영 맘에 안든다 코드가 더러워 보인다. 그러면 useEffect 을 사용할 수 있지 않을까 ? React Hook useEffect has a missing dependency: 'params.postNum'. Either include it or remove the dependency array react-hooks/exhaustive-deps 해당 경고가 의미하는 바가 무엇일까 ? 해당 에러는 React의 useEffect 훅에서 누락된 의존성(dependency)인 'params.postNum'을 갖고 있음을 나타냅니다. useEffect 훅은 컴포넌트의 렌더링 이후에 특정 동작을 수행하기 위해 사용됩니다. 의존성 배열(dependency array)을 통해 useEffect가 어떤 상태나 프롭스에 의존하고 있는지를 명시해야 합니다. React는 useEffect 훅이 의존하는 값이 변경될 때마다 트리거되는데, 의존성 배열이 누락되면 React는 해당 훅이 항상 최신의 값에 대해 동작한다고 가정하지 않습니다. 따라서 의존성 배열에 'params.postNum'을 포함시키거나, 의존성 배열 자체를 제거하여 이 경고를 해결할 수 있습니다. 다음은 'params.postNum'을 의존.. React.js 개발 : utilsService is not defined 해결 방법 해당 에러가 계속 떠서 뭐가 문제인지 찾아 봤는데 확인이 쉽지 않았다 문제는 요 크롬 확장 프로그램 이 보내는 에러 메세지였다. 정확한 원인은 잘 모르겠지만 해당 에러를 만나면 크롬 확장 프로그램을 한번 확인해보시길 바랍니다. useEffect 훅은 함수형 컴포넌트의 라이프사이클을 기반으로 사이드 이펙트를 수행할 수 있게 해줍니다 React에서 useEffect 훅은 함수형 컴포넌트의 라이프사이클을 기반으로 사이드 이펙트를 수행할 수 있게 해줍니다. 이는 클래스 컴포넌트의 componentDidMount, componentDidUpdate, componentWillUnmount와 같은 라이프사이클 메서드의 대체재 역할을 합니다. useEffect의 기본 문법은 다음과 같습니다: useEffect(() => { // 사이드 이펙트 코드 return () => { // 정리 코드 (선택적) }; }, [의존성 배열]); useEffect 훅의 다른 부분에 대한 설명은 다음과 같습니다: 첫 번째 매개변수는 사이드 이펙트 코드를 포함하는 함수입니다. 이 코드는 컴포넌트가 렌더링된 후에 실행됩니다. 데이터 가져오기, 구독 설정, DOM 수.. React.js 라우팅 된 각각 페이지에 한개의 useState 변수 전달하기 App.js import { Route, Routes } from 'react-router-dom'; import React, { useState } from 'react' import './App.css'; import Test from './Test'; import Heading from './Component/Heading'; import List from './Component/List'; import Upload from './Component/Upload'; function App() { const [ContentList, setContentList] = useState([]); return ( ); } export default App; const [ContentList, setContent.. React-Native 앱 개발 : 로또 번호 생성하기(React.js로 중복 되지 않는 랜덤 수 뽑아내기) [로또 번호 생성] 일단 expo 앱을 설치해준다. 맥북으로 코딩하였는데 맥북에 react-native 설치하는건 다음 포스팅에.... npx create-expo-app AwesomeProject cd AwesomeProject npx expo start 에디터로 vscode를 실행해준다. 핵심 ! 1에서 45까지의 숫자 중 뽑아내는 6개의 랜덤 값이 중복이 안 되도록 하여 출력해줘야 한다. 이것 저것 찾아 봤는데 내가 개발한 중복 되지 않는 랜덤 값 생성 자바스크립트 코드가 초심자가 보기에 좋을 것 같다 function loadingLotto() { let lotto_num_list = []; let random_num = 0; for (let i = 0; i < 6; i++) { random_num.. react .js 파일에서는 emmet이 왜 적용이 안되나 ? React.js 파일에서 Emmet 기능이 적용되지 않는 이유는 React.js 파일이 일반 HTML 파일과 다른 문법을 가지고 있기 때문입니다. React.js는 JSX라는 문법을 사용하며, 이는 HTML과 JavaScript의 혼합된 형태로 작성됩니다. 따라서 React.js에서 Emmet 기능을 사용하려면 다음과 같이 설정해야합니다. Visual Studio Code에서 Ctrl + ,를 눌러 "User Settings"을 엽니다. "emmet.includeLanguages"를 검색하여 설정 파일에 다음과 같은 코드를 추가합니다. "emmet.includeLanguages": { "javascript": "javascriptreact" }, 위 설정을 추가하면, React.js에서도 Emmet 기능.. [React.js] useReducer 사용 방법에 대해 알아보자 import "./App.css"; import { useState, useReducer } from "react"; function App() { // useState const [count, setCount] = useState(0); function down() { setCount(count - 1); } function up() { setCount(count + 1); } function reset() { setCount(0); } // useReducer function countReducer(oldcount, action) { if (action === "UP") { return oldcount + 1; } else if (action === "DOWN") { return oldcount - .. 이전 1 2 다음
