Frontend/React (35) 썸네일형 리스트형 useState와 그 대체재 useRef useState에서 변경한 값이 바로변경되지 않는 이유React에서 useState의 상태 업데이트는 비동기로 처리된다.따라서 리렌더링을 완료하지않은경우 이전값을 가져오는 경우가 발생할 수 있어 주의가 필요하다. 반면 useRef는 값이 바뀌더라도 리렌더링과 관계없이 바로 참조할 수 있는 최신 값을 유지할 수 있다. 단순한 값의 저장 및 참조만 필요한 상황에서는 useRef를 고려하면좋다. useState를 사용하면서 상태 업데이트의 비동기 특성까지 고려하고싶다면, useEffect나 콜백함수 내부에서 상태를 참조하는 방식으로 수정 할 수있다. 의존성으로 추가하여 상태 변화 시 최신값을 참조하도록 한다. // useRef 대신 useState 사용const [listCount, setListCount] .. [Nextjs13 에러] Uncaught SyntaxError: "undefined" is not valid JSON Nextjs 13버전에서 contextAPI를 사용하려하니 json에러가났다. use client를 상단에 쓰면서 랜더링하는도중에 에러가 생긴듯하였다. 버전을 수정하니 해결되었다. "next": "13.3.0", "next": "13.3.1", npm i next-auth --legacy-peer-deps useCallback한 함수를 다시 useCallback으로 깜싸는이유 useCallback을 하는이유 첨부한 움짤은 증가 버튼을 누르기만하였는데 App컴포넌트 자체가 랜더링되버리는 예시이다. (파란색 선이 App컴포넌트를 의미함) 만약에 자식 컴포넌트들이 여러개있고 이들이 모두 increment함수를 자식 컴포넌트에 전달하게된다면 App컴포넌트뿐만 아니라 자식 컴포넌트들까지도 불필요하게 랜더링이 되버린다. 이를 해결하는 방법중의 하나가 useCallback이다. useCallback이란 함수를 자식컴포넌트에 전달할때 불필요한 렌더링이 발생하지않게하는 함수를 메모이제이션하는 최적화 방법으로 메모이제이션은 쉽게말해서 함수를 캐시한다고생각하면된다. 아래는 useCallback 예시이다. import React, { useState, useCallback } from 'react.. vite, typescript, react env 설정 알게된것 * NODE_ENV는 환경변수로 노드환경에서 자동으로 만들어져서 개발에는 development, 빌드한것에는 production으로 이루어짐 * 정적파일 특히 이미지파일들은 public폴더내에서 인식된다. 때문에 필요하다면 publicDir이라는것을 강제로 변경해줘야한다.(최근에 assetsDir로 바뀐듯함) * package.json script에서 맥/리눅스용 윈도우용 명령어가 따로있다. * .env들은 src경로안에서 VITE_로 시작해야 vite가 인식해서 리엑트내에서도 사용가능 .env VITE_REACT_APP_URL=http://localhost:5002/ blabla.tsx console.log('mode',process.env.NODE_ENV) if(import.meta.env).. React에서 .env-cmdrc 안먹을때 .env가 개발환경에서 만약에 안되거나 undefined로 찍힌다면? 나같은경우는 REACT_APP_URL은 먹는데 두번째 키부터 인식되지않는것같았다. 1. package.json 점검 devDependencies와 dependencies에 둘다 설치했는지 확인하고 시작하거나 배포할때 명령어를 점검해보자. "scripts": { //개발환경 "start": "env-cmd -e development react-scripts start", // 빌드-QA환경 "build-qa": "cross-env BUILD_PATH='./build-qa' env-cmd -e qa react-scripts build", // 빌드-프로덕션환경 "build-prod": "env-cmd -e production react-s.. [env-cmd] 리액트 env 사용방법 nodejs처럼 리액트에서도 env를 사용해보자. env-cmd를 설치하고 루트 경로에 .env-cmdrc를 추가한다. npm i env-cmd .env-cmdrc 개발환경에는 백엔드 로컬서버를 넣고 배포환경에는 배포시 사용될 URL을 넣는다. { "development":{ "REACT_APP_URL":"http://localhost:500/" }, "production":{ "REACT_APP_URL":"배포시 사용될 URL" } } package.json scripts에 env-cmd -e 개발모드 혹은 배포모드를 추가한다. ... "scripts": { "start": "env-cmd -e development react-scripts start", "build": "env-cmd -e produ.. [build] 에러 Cannot convert a BigInt value to a number 해결 개발할때는 문제없었는데 빌드를 하고난후에 확인해보니 Cannot convert a BigInt value to a number에러가 나서 화면이 보이질않았다. package.json에서 browserslist의 production모드(배포) 버전을 손보니까 해결됨 browserslist 속성은 브라우저 및 버전을 설정하는데 사용되는 속성으로 주로 css전처리기(예: Autoprefixer)나 Javascript 번들러(예: Babel)에서 사용되어 해당 프로젝트를 지원하는 브라우저 범위를 설정합니다. 수정전 배포버전에서는 지원이 중단되지않은 브라우저 중에서 사용률이 0.2% 이상인 브라우저만 지원하겠다는 의미이고 개발버전에서는 크롬,파이어폭스,사파 최신버전들만 지원하겠다는 의미 "browserslist".. useReducer 복잡한 상태관리 로직분리 useState로 데이터를 관리하다보면 crud할때 계속 setState를 사용하다보니 코드줄이 길어짐 => 밖으로 빼서 깔끔하게하기위함 로직은 useState와 매우 비슷함 1. 기존 useState를 지우고 그자리에 useReducer를 넣는다. const [data, dispatch] = React.useReducer(reducer, []) 2. 외부에(app컴포넌트 밖 혹은 다른파일) reducer 함수에 action type에 따른 로직 준비 const reducer = (state, action) => { switch(action.type){ case 'INIT':{ return action.data } case 'CREATE':{ const newItem = { ...action.data }.. 이전 1 2 3 4 5 다음
