#setstate

react, rn 리스트 엔트리 구현시 원본 리스트를 수정하는 함수 최적화가 고민됩니다..

리스트 A 엔트리 컴포넌트 B A를 수정하는 함수 C 이렇게 있을 때 B에서 A를 수정해야 하는 상황입니다. 모바일 환경이라 최대한 엔트리 B를 최적화 하고 싶은데 memo를 해야할 때 함수C는 어떻게 최적화 해야할까요 A에 선언하면 A의 최신 값을 얻기 위해 C가 변경될 때 마다 B또한 C의 변경에 의해 재렌더링 될 것이니 기존에는 이런 재렌더링을 막기위해 setA( (prevA) => { ... } ) 와 같은식으로 setA 내부의 callback으로 A의 최신값을 사용해서 A를 C의 의존성 배열에 추가하는 것을 피해왔는데 수정시 api의 res data를 사용할 일이 생기니 setState내에서는 async await 사용이 불가능해서 질문드립니다... 바보같은 저에게 단비 같은 가르침을 내려주세요..

객체 depth가 깊은 경우 ... 연산자로 복사하면 안좋나요?

안녕하세요. react를 공부 중인 초보자입니다. 현재 recoil 사용하여 recoil state에 객체로 state를 사용하고 있습니다. 그런데 input에서 onChange 이벤트로 state를 변경할 때, 객체의 depth가 깊다면 ... 연산자로 복사하면서 가는게 안좋나요? 예를들어 setState(prev => ({ ...prev, [name]: { ...prev[name], data: { ...prev[name].data, value: value } }, })); 이런 식으로 update 할 경우 ... 연산이 너무 많아져서 비효율적 인가요? 해당 input의 data가 다른 페이지에서 사용 되진 않고 다른 페이지를 갔다 와도 (컴포넌트 이동) 입력된 정보가 남아 있도록 recoil state에 관리하고 있습니다. 초보적인 입장에서 input에 입력 할 때마다 이렇게 하는 건 손해 같아서, input value를 컴포넌트에서 ref로 따로 관리를 하고, useEffect에서 clenup 으로 한번만 setState 하는 방식이 어떨까 하는 의문이 생깁니다. 객체 깊이가 깊어 ... 연산이 많아지는 경우 onChange에서 관리하면 성능적으로도, 클린 코드 (가독성) 면에서도 별로 일까요?

react에서 에러 status에 따라 에러 모달을 가져오는 법

안녕하세요. 지금 api를 호출 후에 api에서 에러가 났을 때, 해당 에러의 status를 저장하여 해당 status에 맞는 에러 모달을 띄워주려고 하고 있습니다. ``` catch (error: unknown) { if (error instanceof AxiosError) { handleErrorModal(error.response?.status); } return null; } ``` 이렇게 fetchData에서 에러가 발생했을 때, handleErrorModal로 에러 status를 전달하고 있습니다. ``` const [errorType, setErrorType] = useRecoilState(errorDataState); const handleErrorModal = (errorStatus: string | number | null) => { setErrorType(errorStatus); }; ``` 그리고 handleErrorModal 함수는 이와 같이 작성을 해놓은 상태이고요. 근데, setState가 비동기로 작동해서인지 errorStatus가 저장이 되지 않아서 계속 초기값인 null을 띄워줍니다. 그리고, 계속 ``` Warning: Can't perform a React state update on a component that hasn't mounted yet. This indicates that you have a side-effect in your render function that asynchronously later calls tries to update the component. Move this work to useEffect instead. ``` 이 오류를 띄우네요. 이 문제를 해결하기 위해서는 useEffect를 쓰는 방법외에는 다른 방법이 없는걸까요?

React 무한 스크롤 구현 방식(useState,useInfiniteQuery) 차이점?

프로젝트를 진행하면서 useInfiniteQuery를 사용해 무한스크롤 기능을 구현했습니다. 방식은 대충 아래와 같이 흘러갑니다. 1. intersection-observer를 사용해 특정 영역이 보이면 useInfinteQuery를 사용해 pageParam를 +1 하고 axios 함수를 호출합니다. 2. 카테고리 별로 상품을 나눴으며 카테고리 재 클릭 시(A->B->A) 캐시가 삭제되어 다시 처음부터 무한 스크롤이 작동 됩니다. 다 만들고 생각해보니깐 뭔가 observer가 활성화되면 axios 함수를 호출 할 때마다 useState를 사용해서 setState(page +1) 이런식으로 적용해서 /shop/getAll/${category}?page=${page} 여기에 넣어주면 구현은 될 거 같습니다. 하지만 이게 성능에 큰 차이점이 있는지도 잘 모르겠고 server 상태를 관리하기 위해 이렇게 사용하는 건가 싶기도 하고.. 두 가지 구현 방식에 대해 차이점을 잘 모르겠습니다. 다른 분들은 왜 사용하고 있는지 궁금합니다. (정확히는 useState를 사용해서 무한 스크롤을 구현하는 방식이랑 useInfiniteQuery를 사용해 구현하는 방식의 차이를 모르겠습니다.)

Url to state or url and state

흰색 배경의 button group이 있고 각각의 button은 클릭할 시 url을 변경시킵니다. 또한 현재 선택된 button은 색상이 칠해집니다. 이러한 상황에서 useState를 통해서 button의 state를 관리하고 있었고, button을 클릭했을때 1. setState를 통해 button의 값을 변경함 2. router을 통해 url 경로를 변경함 이렇게 두가지 액션을 취했었습니다. 그 때 생겼던 궁금중은 어차피 url과 button은 mapping 할 수 있으니까, 버튼을 클릭하면 url만 변경시키고, url을 읽어서 button에 다시 값을 주면 기능적으로 똑같지 않나? 그러면 하나의 액션으로 기존의 두가지 액션을 대체할 수 있지 않나? 라고 생각했습니다. 그래서 조금 찾아보니까 url을 바꾸고 그 값을 통해 button의 상태 관리를 다시 하는건 즉각적인 반응이 아니고, 영상에서 봤던 것 처럼 url과 button state를 각각 바꾸는게 더 인터랙티브하다 라는 글을 읽었습니다. (신빙성이 있는 글은 아닙니다.) 실제로 이러한 이유 때문에 url만 바꾸고, 그 값을 받아와 button 값을 할당하는게 아니라, 두가지를 모두 동시에 바꾸는게 더 좋은 방법이 맞는건지 궁금합니다.

react query가 useEffect를 통한 setState보다 빠른 렌더링을 보여주는 이유는 무엇때문일까요?

버튼을 누르면 QR코드를 받아오는 api를 재호출하여 Qr코드 이미지를 리렌더링 시키려 합니다. react query를 사용하는 것이 useEffect와 setState를 사용해서 api의 값을 화면에 그려주는 것보다 훨씬 속도가 빠르더군요. (react query는 refetch를 통해 api를 재호출 했습니다.) useEffect와 setState를 사용한다면 setState의 배치 처리 과정으로 인해, 즉시 값이 바뀌지 않고 비동기적으로 동작한다고 알고 있습니다. 하지만 react query의 어떤 동작 원리때문에 useEffect와 setState보다 빠르게 처리되는건지는 잘 모르겠습니다. 구글링으로 찾아보니 refetch는 백그라운드에서 처리된다고 하는데 백그라운드의 개념이 정확하게 이해가 되지 않습니다. 제가 추측하기론, react query를 사용하면 api의 응답값을 받자마자 data를 사용할 수 있습니다. setStatef로 state를 변경해주는 과정이 필요 없습니다. 그렇기에, useEffect와 setState를 사용한 것보다 더욱 빠른 렌더링을 보여줄 수 있는 것 같은데 맞을까요??

react query 내에서 과연 react hook을 사용해도 괜찮을까요? 에러 내용을 어떻게 뽑아내면 좋을까요?

안녕하세요. 이번에 로그인 시 에러가 날 때, 서버에서 보내주는 각각의 데이터값이 있는데 그것을 추출해서 활용하려고 합니다. 우선 아래 코드와 같이 useMutation (v5) 를 사용했구요. onError 에서 그 값을 추출해서 리턴하고 싶어했습니다. (error 의 타입은 Error 나 AxiosError 하면 해결되는 줄 알았는데, message 값까지 들어가면 타입 정의가 되지 않더라구요.. any를 바꿀 팁도 알려주시면 감사하겠습니다 ㅎ..) (* mutation 의 error의 return 값은 null 로 찍혔습니다..! *) 여튼, 콘솔로 값은 읽을 수 있으나 isError 값이나, error 객체도 원하는 결과값이 나오지 않고, 외부 리턴값으로 활용하는 방법이 떠오르지 않아, 일단 2가지 방법으로 추출을 시도했었습니다. - let 변수를 활용해서 상단에 선언 후에, error 시 재선언하여 값을 입력 - state를 정의하여 setState값으로 입히기 첫번째 방법은 항상 undefined로 읽혀지고, 두번째 방법은 서버 응답 속도에 따라서 값이 받아질 때가 있고, 아닌 경우는 기본 defaultState 값으로 읽혀집니다. 또한, 하나의 hook 내에서 다른 hook 을 선언해버리면 리액트의 훅 규칙을 어기는 것으로 알고 있습니다. 그러기에 위 방법은 옳지 않은 방법인 것 같아서, 옳은 에러 데이터 추출방법을 알고 싶습니다. 감사합니다 :)

useEffect 가 끊임없이 돌고있어요. dependency 의 늪에서 벗어날 수 있게 도와주세요..! 🥹

안녕하세요. 소켓 통신을 사용한 채팅 기능 구현중인 주니어 개발자입니다. 아래와 같은 상황에 보통 어떻게 대처하시나요? 문제: useEffect 사용 시 서버에 채팅 방 말풍선 목록을 요청(publish)하고, 요청한 데이터를 state 에 저장하는 과정에서 loop 가 생겨 useEffect 가 끊임없이 돌고 있습니다. 문제 설명: - 서버에 채팅 방 말풍선 목록을 요청할 때 넘기는 값 중에 direction 이라는 변수가 있는데요, 이 direction 변수는 채팅 방 말풍선 개수에 의존적입니다. 따라서 useEffect 의 dependency에 채팅 방 말풍선 목록이 들어가게 됩니다. - 서버로부터 데이터를 받은 즉시 채팅방 말풍선 목록을 state에 저장하게 됩니다. - 위 두 상황(useEffect의 deps 설정, setState) 때문에 loop 가 생기게 됩니다. 생각해본 해결 방안: - useRef 를 사용하여 deps 에 등록하지 않아도 최신 데이터를 바라볼 수 있습니다. - 말풍선 목록이 배열 데이터이기 때문에, 새로운 배열을 만들지 않고 기존 배열을 계속 사용하여 같은 메모리를 사용합니다. 같은 메모리를 사용하고 있기 때문에 useEffect 의 deps 에 등록하지 않아도 최신 데이터를 바라볼 수 있습니다. - 말풍선 목록을 링크드리스드 자료구조를 사용하고, 한 번 생성한 자료구조를 새로 만들지 않고 재사용하여 같은 메모리를 이용합니다. 같은 메모리를 사용하고 있기 때문에 useEffect 의 deps 에 등록하지 않아도 최신 데이터를 바라볼 수 있습니다. 위 해결 방안의 문제점: - useEffect 의 deps 에 등록하지 않는 방법은 anti pattern 이라는 느낌을 받습니다. 아마도 위 방법을 사용한 데이터를 사용하는 컴포넌트의 re-rendering 이 되지 않기 때문에 이런 느낌을 받는 것 같습니다. 참고 자료: [react 문서](https://react.dev/learn/removing-effect-dependencies#are-you-reading-some-state-to-calculate-the-next-state)

useState에서 previous state인자를 사용하는 방법과 이전 값을 spread해서 사용하는 방법중 어떤 방법을 사용해야 할지 고민입니다

const [imageArray, setImageArray] = useState([]); 혹시 어떤 배열안에 있는 객체요소 state변경을 할때, setState 인자인 previous state를 받아서 수정하는게 나은가요? 예) setImageArray((prev)=> [ …prev, {something}]) 아니면 spread로 새로운 배열로 복사해서 이것을 수정하고 setState에 넣는게 나은가요? 예) const copiedArray = […imageArray]; copiedArray. something something 작업 setImageArray(copiedArray);

타입스크립트에서 비동기 함수 리턴값을 정의하려고 하는데 undefined 라서 타입 오류가 발생합니다.

타입스크립트를 사용하고 있는데, 비동기 함수 호출 후 반환되는 데이터의 타입을 어떻게 정의하고, 이를 setState 함수를 사용할 때 어떻게 처리해야 할지 궁금합니다. 현재 코드에서는 데이터를 받아오는 부분에서 undefined가 반환될 가능성이 있어서, setState(data) 부분에서 타입 관련 에러가 발생하는데, 이 문제를 해결하려면 어떻게 해야 할까요? (1) 번에서 undefined일 가능성이 존재해서 최종적으로 setState(data)이 타입걸리는거 같은데 이럴땐 Undefined를 일일히 전부 명시해줘야 하는 걸까요?

setState를 props로 전달하려고 하는데 의견 부탁드려요.

setState를 props로 전달하는 것에 대해 어떻게 생각하시나요? 개인적으로는 한 단계 정도의 깊이라면 괜찮다고 생각합니다. 현재는 리코일을 사용 중이지만, 굳이 전역으로 관리할 필요가 있는지 의문이 들고, setState를 하위 컴포넌트로 넘겨주는 것이 상태 추적에 혼동을 야기할 수도 있다고 생각합니다. 하위 컴포넌트가 테이블이며, 이를 하나의 컴포넌트에 포함시키기에는 크기가 너무 커서 분리하려고 합니다. 이 과정에서 props로 setState를 전달해야 하는 상황이 발생하여 이에 대한 의견을 여쭤보고자 합니다!

React에서 setState를 props로 넘겨줄 때 타입을 어떻게 지정해서 사용해야 하나요 ?

setState를 props로 넘겨줄때 넘겨받은 자식컴포넌트에서 setState((prev) => { ... }) 처럼 쓰려면 props 타입을 어떻게 줘야할까요 ...?

flutter 변수 공유하는 방법 질문드려요

A 페이지에 변수x를 선언하고, A페이지에서 x를 B페이지에 인자로 넘겨서 호출하는데, B페이지에서 setState를 해도 A페이지에 선언된 변수는 변경이 안되더라구요. Getx, bloc 같은 라이브러리를 사용하면 어떻게 하는지는 아는데, 순수하게 flutter 기본으로만 해당 로직을 구현하려면 어떻게 해야하나요 ??

useInput 훅의 onChange 연속 2번 사용하는법

function useInput(initialState) { const [state, setState] = useState(initialState); const onChange = (e) => { console.log(e, 'onchange') const { target: { name, value }, } = e; setState({ ...state, [name]: value, }); }; return { state, onChange, }; } 이러한 useInput 훅이 있습니다. 어떠한 페이지에서 const {state, onChange} = useInput(); 이라고 코드를 선언 한 후에 onChange를 두번 연속으로 코드를 작성하면 정상적으로 동작할까 궁금해서 해봤는데 마지막에 선언된 값만 state에 들어가더라구요 이유가 무엇인가요?? const onClick = () => { onChange({ target: {name : "AAA", value: "1번" }}); onChange({ target: {name : "BBB", value: "2번" }}); } 결과 : 2번값만 들어가있음

javascript에서 class대신 object를 사용하면 안되나요?

react에서 같은 목적을 가진 변수와 함수를 object로 묶어봤습니다. class로도 가능하겠지만 setState함수도 바로 참조할 수 있어서 class보다는 object형태로 만들어봤습니다. 다만, 이런 코드를 본적은 없어서 사용하면 안되는건가 싶어서 질문드립니다. 안된다고하면 왜 안되는지 말씀 부탁드립니다!

Next.js 렌더링을 막고 싶습니다.

부모컴포넌트의 input값을 setState함수를 자식 input컴포넌트에 pros하여 onChange 이벤트로 값을 입력받는데요. 문제는 부모컴포넌트의 서버와 연결을 시도하는 로직도 input값이 변할때마다 렌더링이 되면서 자꾸 시도한다는 문제점이 있습니다. 어떻게 하면 막을 수 있을까요 ㅜㅜ

리액트에서 타입스크립트 사용할 때 이런 경우 타입을 어떻게 줘야할지 모르겠습니다

리액트와 타입스크립트를 연습해보려고 혼자 토이프로젝트를 만드는 중인데 어떤 타입을 지정해줘야 할지 모르겠어서 질문올립니다. 혹시 더 자세한 설명이 필요할 것 같으면 댓글부탁드려요! 상황) 리액트, 타입스크립트를 사용하는 프로젝트에서 부트스트랩 모달을 사용하려고 합니다. 사진1번이 모달을 포함하고있는 부모컴포넌트, 사진2번이 모달컴포넌트 인데 부모컴포넌트에서 모달컴포넌트로 show, onHide라는 2개의 props를 넘깁니다(부트스트랩에서 지정해놓은 프롭스입니다.) 부모컴포넌트에는 모달의 표시 여부를 관리하는 const [showEmptyInputModal, setShowEmptyInputModal] = useState(false); 이라는 상태값이 있고 그게 각각 props로 넘겨지게 되는 것 같습니다. 여기서 문제) 그런데 사진2번에 넘겨주는 props의 타입을 어떻게 설정해야할 지 모르겠습니다... 일단 any로 하면 작동은 되긴하는데ㅠㅠ any는 최대한 쓰지 않는게 좋다고 해서요 사진4번의 빠른 수정을 보면 이런 옵션들이 있던데 unknown이나 never를 사용하면 그 props를 사용하는 곳들에서 에러가 납니다. any를 사용하거나 빠른 수정의 옵션 중 eslint 규칙을 무시하는 선택지밖에 없는 걸까요? state와 setState를 실행하는 함수 props로 넘기려면 타입을 어떻게 줘야하나요...!

setState가 되지 않습니다.

사수가 없어 랜선 사수님들의 조언을 구합니다. 저는 지금 페이지네이션을 구현하고 있는데, setState가 되지 않는 이슈가 있습니다. 리액트 18버전과 타입스크립트를 사용하고 있고, 현재 구현중인 tsx파일 코드의 플로우는 이러합니다. 1. 페이지에 대한 타입 정의 2. 파라미터로 몇개의 옵션을 받음 3. 기본 옵션들을 options에 객체로 담아 useState 선언 4. useEffect(()=>{},[]) 안에서 Object.assign으로 options에 parameter 내에 있는 몇개의 옵션을 덮어씌워줌 5. (아직 useEffect) options에 있는 값으로 페이지네이션에 보여질 첫 페이지 넘버와 마지막 페이지넘버를 구한 후, 기존 options 객체 안의 minPage와 maxPage 값을 변경 5번에서 minPage와 maxPage의 값이 변하지 않습니다. 사용한 코드는 1. setOptions({...options, minPage: 첫페이지넘버, maxPage: 마지막페이지넘버}) 2. setOptions(options=>{...options, minPage: 첫페이지넘버, maxPage: 마지막페이지넘버}) 입니다. 하지만 두 코드 모두 options 객체 안의 minPage, maxPage의 값이 반영되지 않습니다. 5번 기능이 구현된 함수를 useEffect(()=>{},[options])에 넣어보았는데, 반영은 되는 듯 하나 무한렌더링의 늪에 빠졌습니다... 도와주십시오ㅠㅠ

react의 setState가 정상동작하지 않아요.

react를 이용해 이것저것 테스트해보고 있는데요. 버튼을 눌렀을 때 state를 1 증가시키는 예제를 해보고 있습니다. const oneCountUp = () => { setCount(count + 1); }; 위처럼 1 증가시키는 함수를 정의해서 onClick에서 위의 함수를 호출하는 방식으로 했습니다. 근데 호기심에 3을 증가시켜보자 하고 oneCountUp을 3번 호출했습니다. 근데 여전히 1만 올라갑니다. 왜 그런걸까요??? import React, { useState } from 'react'; export default function CountTest() { const [count, setCount] = useState(1); const oneCountUp = () => { setCount(count + 1); }; return ( <div> <button onClick={() => { oneCountUp(); oneCountUp(); oneCountUp(); }} > 1 증가 </button> <p>{count}</p> </div> ); }

Maximum update depth exceeded 에러 해결 방법

콘솔에 "Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn’t have a dependency array, or one of the dependencies changes on every render." 라는 에러가 표시되면서 해당 컴포넌트가 무한히 렌더링 되고 있습니다. 문제 원인과 해결 방법을 아시는 분이 계실까요? 코드 간단히 요약해서 첨부합니다.