useEffect dependency관련해서 질문 드립니다.
늘 좋은 강의 감사합니다.
유효성 검사에 관해 짜보면서 useEffect를 사용해봤는데 2번째 사진 같이 dependency 오류가 뜹니다.
dependency에 추가하지 않아도 코드는 잘 돌아가지만, state값이나 정규식을 추가하면 무한 렌더링이 일어납니다.
제 생각에는 dependency를 추가해도 input에 입력 값이 없으면 관찰을 안할것이라고 생각해서 useEffect를 사용했는데요.
오류 메시지는 무시해도 괜찮을까요?
유효성 검사처럼 state를 계속 감시하는 상황일 때 useEffect를 사용한다면 state값을 dependency에 추가해도 괜찮을까요?
혹은 useEffect를 잘못 사용한 걸까요?
답변 1
0
아뇨 문제가 있을 겁니다. isValid나 validText 등은 []에 넣어야 합니다. 다만 []에 넣었을 때 에러가 발생한다면 함수형 setState 쓰시면 됩니다.
setIsValud((prev) => ({ ...prev, isCompany: true });
0
빠르고 자세한 답변 감사합니다! 알려주신 대로 하니 dependency 경고 창은 없어졌습니다!!!!!!! 다만 이해가 명확히 안되는 부분이 있어서 ㅠ 추가로 질문 드립니다.
아래 두 코드는 console을 찍어보니 결과는 같은 값이던데 어째서 이런 차이가 발생한 걸까요? state를 useEffect안에 직접 명시해서 발생한 문제가 맞을까요?
1. 알려주신 코드
setIsValid((prev) => ({ ...prev, isCompany: false }))
제가 적은 코드
setIsValid({ ...isValid, isCompany: false });
0
2번이 운 좋게 잘 돌아갔던 겁니다. 몇 번 useEffect를 반복해보면 isValid가 첫 값에서 바뀌지 않고 고정되어있음을 볼 수 있습니다. state를 useEffect 안에서 쓸 때는 무조건 [] 안에 넣어주어야 항상 최신 state가 됩니다.
npm run dev 실행 시 포트가 안뜨는 문제
0
211
2
timeouts.current를 useEffect 의 input값으로 넣었을때
0
89
2
렌더링 테스트 코드 (Hooks)
0
81
1
Cannot find package 'react-refesh' 이런 에러 뜨시는 분들 보세요.
0
154
1
해당 에러 뜨는 분들 보세요. "Uncaught TypeError: ReactDom.createRoot is not a function"
1
193
1
강사님 레포지토리에서 코드 복사 시 master 브랜치 말고 react18 브랜치꺼 복붙하세요ㅠㅠ
0
99
1
useMemo와 useCallback 사용 시기
0
209
2
onRightClickTd가 작동을 하지 않습니다.
0
228
1
action.type 불러오는 방식
0
222
2
onClickRedo 질문
0
172
1
const Try = require(./Try) 빨간줄
0
249
1
npx webpack 실행시
0
316
1
지뢰찾기 강좌에서 빈칸들 한번에 열기 파트에서 여쭤보고싶은부분이 있어서 글 올립니다.
0
236
1
강좌에서 다루지 않은 기능들은 어떻게 학습하면 좋을까요?
0
311
1
react devtool이 enable 않됩니다.
0
532
2
React 랜더링이 되지 않습니다.
0
414
2
비동기로 동작하는 setState에 대해서
0
332
1
npm run dev 할 때 에러발생
0
480
2
memo, PureComponenet, shouldComponentUpdate 관련 질문
0
207
1
devMiddleware의 필요성
0
354
1
리액트에서 화살표 함수를 사용해야하는 이유
0
937
2
path.join관련질문
0
283
2
2-9. 웹팩 데브 서버와 핫 리로딩 설치과정 시 에러
0
377
1
next.js 에서 이와 비슷한 예제를 돌리고있는데 react랑 달라서 질문 드립니
1
494
4