Typescript & React (30) 썸네일형 리스트형 npm error path C:\Users\USER\AppData\Roaming\npm 원인: C:\Users\USER\AppData\Roaming\npm 경로에 npm이 없다.해결: 해당 경로에 npm 이라는 이름의 폴더를 수동으로 생성하여 문제를 해결 ->npm install npm -g useCallback 예시를 통한 이해 import React, { useState, useCallback } from 'react';const ExampleComponent = ({ onClick }) => { return Click me;};const App = () => { const [count, setCount] = useState(0); // useCallback을 사용하여 메모이제이션된 콜백 함수 생성 const handleClick = useCallback(() => { setCount(count + 1); }, [count]); // count가 변경될 때만 함수 재생성 return ( Clicked {count} times );};export default App;한 마디로.. useState hook과 spread 연산자 사용시 object is not iterable // 에러 원인: const [selectedOps, setSelectedOps] = useState(); // // ⭐️에러 해결: const [selectedOps, setSelectedOps] = useState([]);if(!existingOp){ setSelectedOps((prev) => [...prev!, new_selecOp])} select change 이벤트 속성 사용법 const handleOpSelectedChange = (event:React.ChangeEvent) => { //선택된 옵션 중 리스트들: HTMLOptionsCollection(2) [option, option, selectedIndex: 1] const selectedOp_lists = event.target.options; //선택된 옵션 중 선택된 리스트의 값 표시 방법 1. const selected_options_list_value = selectedOp_lists[selectedOp_lists.selectedIndex].value //선택된 옵션 중 선택된 리스트의 값 표시 방법 2. const selected_options_list_value2 .. 무한 루프 상황: 이벤트 헨들러 또는 useEffec 훅에서 사용하지 않은 상황if(Array.isArray(selectedOptionsValues!)){ for(const value of selectedOptionsValues!){ OpTotalValues += Number(value) } setOpTotalVal(OpTotalValues); //이놈이 문제다!! } 원인 추정1. setState를 컴포넌트의 바디에서 직접 호출하면 컴포넌트가 렌더링될 때마다 state가 변경되어 무한 루프에 빠질 수 있다.setOpTotalVal을 렌더링 중에 직접 호출하게 되면 리액트가 상태 변경을 감지하고 다시 렌더링을 시도하므로 무한 렌더링 루프가 발생하게 된다. 해결 방법1. onChang.. [React]contains an input of type email with both value and defaultValue props. Input elements must be either controlled or uncontrolled contains an input of type email with both value and defaultValue props. Input elements must be either controlled or uncontrolled 해결방법1.해당 상황에서 value 속성을 지정하는 경우, 리액트의 핵심 설계 원리인 "single source of truth" 관점에서 위배되는 상황 useQuery 사용 시 반환 값이 undefined 에러 아래와 같이 작성했다. const {data:me} = useQuery( ["me2", "Member"], () => getMyinfo(ckToken!) );그러나 me의 값이 undefined 이 나온다. 이렇게 되면 me?.속성 이런 방법으로 써야한다. 문제는 값을 못 받아올 때 입력 값이 필요 할 때 발생 ( 정보 등록의 경우 ) 따라서 해결방법은 non-null assertion operator를 사용하여user가 undefined값이 아니고 null이 아닐 경우 sessionStorage에 넣고 사용한다. export async function getMyinfo(token:string) { try { const response = await fetch(`${BASE_PATH}/.. 'delete' 연산자의 피연산자는 선택 사항이어야 합니다.ts(2790) interface IOption{ option_index:number; option_title:string; option_parts?:IOptionPart[]; //🌟option_parts? -> "즉, 피연산자 option_parts 선택사항이어야 한다"} const delOptPart = (option_idx:number, optPart_idx:string) => { //삭제 sensor setDelOpPartCount((prev) => prev+1); const selectedOpt = options.find(option => option.option_index === option_idx); const newOptionParts = selectedOpt!.optio.. React에서 실제 값은 변경 정상 하지만 화면은 변경 안됨 해결 리액트에서 아래의 코드는 값은 변경되지만 화면에서 어떤 값이 삭제되지 않는다. 이유는 가상 dom에서 리랜더링 되지 않기 때문이다. const delOptPart = (option_idx:number, optPart_idx:string) => { const selectedOpt = options.find(option => option.option_index === option_idx); const newOptionParts = selectedOpt!.option_parts!.filter(optPart => optPart.optPart_idx !== optPart_idx); delete selectedOpt?.option_parts; selectedOpt!.option_par.. Typscript 문법 오류 에러 현상Expected an assignment or function call and instead saw an expression @typescript-eslint/no-unused-expressions 할당 또는 함수 호출이 예상되었으나 표현식이 나왔다 @타입스크립트 사용하지 않는 expression이 나왔다. const setCookie = (name: string, value: string, day: number) => { let today = new Date(); today.setDate(today.getDate() + day); document.cookie = name + "=" + value + "; path=/; expires=" + today.toUTCString();.. 이전 1 2 3 다음
